다음은 PhysicsJS 예제이다.
project.html 파일은 다음과 같다.
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>PhysicsJS Example</title>
<script data-main="js/main" src="js/require.js">
</script>
</head>
<body>
</body>
</html>
js/main.js 파일은 다음과 같다.
require.config({
baseUrl: './',
packages: [
{
name: 'physicsjs',
location: 'js/physicsjs',
main: 'physicsjs-0.6.0.js'
}
]
});
require([
'physicsjs',
'physicsjs/behaviors/body-impulse-response',
'physicsjs/behaviors/constant-acceleration',
'physicsjs/behaviors/edge-collision-detection',
'physicsjs/renderers/canvas',
'physicsjs/bodies/circle'
], function (Physics) {
console.log(Physics);
Physics(function (world) {
console.log(world);
var viewWidth = 500;
var viewHeight = 300;
var renderer = Physics.renderer('canvas', {
el: 'viewport',
width: viewWidth,
height: viewHeight,
meta: true,
style: {
'circle': {
strokeStyle: '#351024',
lineWidth: 1,
fillStyle: '#d33682',
angleIndicator: '#351024'
}
}
});
world.add(renderer);
world.on('step', function () {
world.render();
});
var viewportBounds = Physics.aabb(0, 0, viewWidth, viewHeight);
world.add(Physics.behavior('edge-collision-detection', {
aabb: viewportBounds,
restitution: 0.99,
cof: 0.99
}));
world.add(
Physics.body('circle', {
x: 50,
y: 30,
vx: 0.2,
vy: 0.01,
radius: 20
})
);
world.add(Physics.behavior('body-impulse-response'));
world.add(Physics.behavior('constant-acceleration'));
Physics.util.ticker.on(function (time, dt) {
world.step(time);
});
Physics.util.ticker.start();
});
});
References:
댓글을 달아 주세요