다음은 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:

http://wellcaffeinated.net/PhysicsJS/installation

http://wellcaffeinated.net/PhysicsJS/basic-usage

Posted by izeye

댓글을 달아 주세요