步骤0：虚无的空间

在一切的开始。我们需要设置我们的html。我们使用HTML cavas来渲染。所以从你的标准HTML5模板开始。我假设scripts在body的末尾加载

这样就不用担心DOM加载了，我们打算使用 RequireJS 来加载我们的scripts。如果你没用过requirejs，也不想学，那么你不得不

摆脱所有的define()和require() 然后把所有你的jacascript以适当的顺序放在一起。（我强烈建议使用）

我的文件以这样的结构运行：

index.html
images/
    ...
js/
    require.js
    physicsjs/
    ...

现在让我们添加一些CSS在头部来设置"space"的背景图片和一些游戏角色的样式。

html, body {
    padding: 0;
    margin: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}
body:after {
    font-size: 30px;
    line-height: 140px;
    text-align: center;
    color: rgb(60, 16, 11);
    background: rgba(255, 255, 255, 0.6);
    position: absolute;
    top: 50%;
    left: 50%;
    width: 400px;
    height: 140px;
    margin-left: -200px;
    margin-top: -70px;
    border-radius: 5px;
}
body.before-game:after {
    content: ‘press "z" to start‘;
}
body.lose-game:after {
    content: ‘press "z" to try again‘;
}
body.win-game:after {
    content: ‘Win! press "z" to play again‘;
}
body {
    background: url(images/starfield.png) 0 0 repeat;
}

<script src="js/require.js"></script>
<script src="js/main.js"></script>

// begin main.js
require(
    {
        // use top level so we can access images
        baseUrl: ‘./‘,
        packages: [{
            name: ‘physicsjs‘,
            location: ‘js/physicsjs‘,
            main: ‘physicsjs‘
        }]
    },
    ...

第一版的main.js

呵呵一个无聊的游戏~。！

所以我们要添加点东西。首先我们加载physicsjs 库通过requirejs的依赖。我们也加载一系列其他的依赖项

如physicsjs的扩展，可以让我们能增加圆形刚体，弹性碰撞以及更多。当我们使用requirejs我们需要声明

每一个依赖项。它只加载那些我们需要的东西。

在我们的requirejs里，我们搭建我们的游戏。我们通过添加一个类名到body tag来显示“press ‘z‘ to start"的

游戏开始信息。然后我们监听‘z‘的键盘事件来调用我们的newGame();

接下来我们设置cavas渲染器(renderer)来绘制窗口监听窗口大小改变事件实时地改变cavas。

下一步我们建立重要的init()函数.在init()函数里调用physics()构造我们的游戏世界。在这个函数里我们需要以下东西

• 一个 “ship” (现在只是一个圆)
• a planet (一个有质量的大圆，配上图片)
• 在世界的每个角落装上触发器

这个行星的一部分代码。

planet.view = new Image();
planet.view.src = require.toUrl(‘images/planet.png‘);

我们创建一张图片，并把它存入.view里。这张图片以planet.png加载。（我们使用requirejs来设置路径）.

但是为什么这样做？这样规定了如何显示我们的物件。canvas renderer 观察全局来找出哪里需要渲染。

如果缺失一些东西，就把它按类型（circle,polygon）绘制到canvas并认作图片来保存。（我想就是指

默认情况下的绘制方式）。这些图片都存在body的.view里。然而如果有图片在那里就用图片来加载。

好像有点扯远了。但有2个好消息要告诉你。

1.renderer可以简单地被替换成你想要的任何东西..只需要你建立不同的renderer。documentation about how to do this

2.在几个星期以内，会有个比赛。（明显是过期了，略）

回到正题。init()函数

// add things to the world
world.add([
  ship,
  planet,
  Physics.behavior(‘newtonian‘, { strength: 1e-4 }),//万有引力，系数1e-4.
  Physics.behavior(‘sweep-prune‘),//broad phase algorithm。添加碰撞物体后一定记得添加。
  Physics.behavior(‘body-collision-detection‘),//监听sweep-prune事件,算出物体如何碰撞。注意只是监听，不做事。
  Physics.behavior(‘body-impulse-response‘),//发生碰撞后做事的。碰撞以后物体的运动变化。
  renderer
]);

现在已经有个一个真空的世界。我们还需要添加一些行为和动作进去。

接下来在main.js里部署newGame()。在这个函数里做清理(重新开始游戏前)并调用 Physics(init)。它也添加一些监听事件。

最后我们连接ticker来使world.step在每一帧都被调用。

步骤1：有序地创建物体

现在开始会越来越有趣。我们可以在这世界里任意飞翔。我们可以像做行星一样做其他物体。但是我们需要更多的纹理。

我们需要多种方法来操作物体。我们最好的动作教程是用physicsjs，这个能力可以扩展到任何物体。现在我们扩展我们的物体（body）。

~好吧翻译能力有限，things和body有点难翻译了。body是physicsjs里一个对象。通过physics.body（）来创建。

我们创建一个player.js的文件。它将定义一个自定义的物体(body)叫做player。我们将假设一个特殊的物件(ship)，扩展的circle body。

requirejs的定义

define(
[
    ‘require‘,
    ‘physicsjs‘,
    ‘physicsjs/bodies/circle‘,
    ‘physicsjs/bodies/convex-polygon‘
],
function(
    require,
    Physics
){
    // code here...
});

// extend the circle body
Physics.body(‘player‘, ‘circle‘, function( parent ){
    // private helpers
    // ...
    return {
        // extension definition
    };
});

// private helpers     翻译中好几处help忽略了，主要我不是很理解。大概指一些辅助的函数或对象。
var deg = Math.PI/180;
var shipImg = new Image();
var shipThrustImg = new Image();
shipImg.src = require.toUrl(‘images/ship.png‘);
shipThrustImg.src = require.toUrl(‘images/ship-thrust.png‘);

var Pi2 = 2 * Math.PI;
// VERY crude approximation to a gaussian random number.. but fast
var gauss = function gauss( mean, stddev ){
    var r = 2 * (Math.random() + Math.random() + Math.random()) - 3;
    return r * stddev + mean;
};
// will give a random polygon that, for small jitter, will likely be convex
var rndPolygon = function rndPolygon( size, n, jitter ){

    var points = [{ x: 0, y: 0 }]
        ,ang = 0
        ,invN = 1 / n
        ,mean = Pi2 * invN
        ,stddev = jitter * (invN - 1/(n+1)) * Pi2
        ,i = 1
        ,last = points[ 0 ]
        ;

    while ( i < n ){
        ang += gauss( mean, stddev );
        points.push({
            x: size * Math.cos( ang ) + last.x,
            y: size * Math.sin( ang ) + last.y
        });
        last = points[ i++ ];
    }

    return points;
};

return {
    // we want to do some setup when the body is created
    // so we need to call the parent‘s init method
    // on "this"
    init: function( options ){
        parent.init.call( this, options );
        // set the rendering image
        // because of the image i‘ve chosen, the nose of the ship
        // will point in the same angle as the body‘s rotational position
        this.view = shipImg;
    },
    // this will turn the ship by changing the
    // body‘s angular velocity to + or - some amount
    turn: function( amount ){
        // set the ship‘s rotational velocity
        this.state.angular.vel = 0.2 * amount * deg;
        return this;
    },
    // this will accelerate the ship along the direction
    // of the ship‘s nose
    thrust: function( amount ){
        var self = this;
        var world = this._world;
        if (!world){
            return self;
        }
        var angle = this.state.angular.pos;
        var scratch = Physics.scratchpad();
        // scale the amount to something not so crazy
        amount *= 0.00001;
        // point the acceleration in the direction of the ship‘s nose
        var v = scratch.vector().set(
            amount * Math.cos( angle ), 
            amount * Math.sin( angle ) 
        );
        // accelerate self
        this.accelerate( v );
        scratch.done();

        // if we‘re accelerating set the image to the one with the thrusters on
        if ( amount ){
            this.view = shipThrustImg;
        } else {
            this.view = shipImg;
        }
        return self;
    },
    // this will create a projectile (little circle)
    // that travels away from the ship‘s front.
    // It will get removed after a timeout
    shoot: function(){
        var self = this;
        var world = this._world;
        if (!world){
            return self;
        }
        var angle = this.state.angular.pos;
        var cos = Math.cos( angle );
        var sin = Math.sin( angle );
        var r = this.geometry.radius + 5;
        // create a little circle at the nose of the ship
        // that is traveling at a velocity of 0.5 in the nose direction
        // relative to the ship‘s current velocity
        var laser = Physics.body(‘circle‘, {
            x: this.state.pos.get(0) + r * cos,
            y: this.state.pos.get(1) + r * sin,
            vx: (0.5 + this.state.vel.get(0)) * cos,
            vy: (0.5 + this.state.vel.get(1)) * sin,
            radius: 2
        });
        // set a custom property for collision purposes
        laser.gameType = ‘laser‘;

        // remove the laser pulse in 600ms
        setTimeout(function(){
            world.removeBody( laser );
            laser = undefined;
        }, 600);
        world.add( laser );
        return self;
    },
    // ‘splode! This will remove the ship
    // and replace it with a bunch of random
    // triangles for an explosive effect!
    blowUp: function(){
        var self = this;
        var world = this._world;
        if (!world){
            return self;
        }
        var scratch = Physics.scratchpad();
        var rnd = scratch.vector();
        var pos = this.state.pos;
        var n = 40; // create 40 pieces of debris
        var r = 2 * this.geometry.radius; // circumference
        var size = 8 * r / n; // rough size of debris edges
        var mass = this.mass / n; // mass of debris
        var verts;
        var d;
        var debris = [];

        // create debris
        while ( n-- ){
            verts = rndPolygon( size, 3, 1.5 ); // get a random polygon
            if ( Physics.geometry.isPolygonConvex( verts ) ){
                // set a random position for the debris (relative to player)
                rnd.set( Math.random() - 0.5, Math.random() - 0.5 ).mult( r );
                d = Physics.body(‘convex-polygon‘, {
                    x: pos.get(0) + rnd.get(0),
                    y: pos.get(1) + rnd.get(1),
                    // velocity of debris is same as player
                    vx: this.state.vel.get(0),
                    vy: this.state.vel.get(1),
                    // set a random angular velocity for dramatic effect
                    angularVelocity: (Math.random()-0.5) * 0.06,
                    mass: mass,
                    vertices: verts,
                    // not tooo bouncy
                    restitution: 0.8
                });
                d.gameType = ‘debris‘;
                debris.push( d );
            }
        }

        // add debris
        world.add( debris );
        // remove player
        world.removeBody( this );
        scratch.done();
        return self;
    }
};

和垃圾回收的帮手。 read more about scratchpads here.

现在我们有个帮手，但是它连接任何用户输入。我们需要做的是创建一个player 行为(behavior) 来处理用户输入

所以创建player-behavior.js的文件以我们熟悉的方式。

define(
[
    ‘physicsjs‘
],
function(
    Physics
){

    return Physics.behavior(‘player-behavior‘, function( parent ){

        return {
            init: function( options ){
                var self = this;
                parent.init.call(this, options);
                // the player will be passed in via the config options
                // so we need to store the player
                var player = self.player = options.player;
                self.gameover = false;

                // events
                document.addEventListener(‘keydown‘, function( e ){
                    if (self.gameover){
                        return;
                    }
                    switch ( e.keyCode ){
                        case 38: // up
                            self.movePlayer();
                        break;
                        case 40: // down
                        break;
                        case 37: // left
                            player.turn( -1 );
                        break;
                        case 39: // right
                            player.turn( 1 );
                        break;
                        case 90: // z
                            player.shoot();
                        break;
                    }
                    return false;
                });
                document.addEventListener(‘keyup‘, function( e ){
                    if (self.gameover){
                        return;
                    }
                    switch ( e.keyCode ){
                        case 38: // up
                            self.movePlayer( false );
                        break;
                        case 40: // down
                        break;
                        case 37: // left
                            player.turn( 0 );
                        break;
                        case 39: // right
                            player.turn( 0 );
                        break;
                        case 32: // space
                        break;
                    }
                    return false;
                });
            },

            // this is automatically called by the world
            // when this behavior is added to the world
            connect: function( world ){

                // we want to subscribe to world events
                world.subscribe(‘collisions:detected‘, this.checkPlayerCollision, this);
                world.subscribe(‘integrate:positions‘, this.behave, this);
            },

            // this is automatically called by the world
            // when this behavior is removed from the world
            disconnect: function( world ){

                // we want to unsubscribe from world events
                world.unsubscribe(‘collisions:detected‘, this.checkPlayerCollision);
                world.unsubscribe(‘integrate:positions‘, this.behave);
            },

            // check to see if the player has collided
            checkPlayerCollision: function( data ){

                var self = this
                    ,world = self._world
                    ,collisions = data.collisions
                    ,col
                    ,player = this.player
                    ;

                for ( var i = 0, l = collisions.length; i < l; ++i ){
                    col = collisions[ i ];

                    // if we aren‘t looking at debris
                    // and one of these bodies is the player...
                    if ( col.bodyA.gameType !== ‘debris‘ && 
                        col.bodyB.gameType !== ‘debris‘ && 
                        (col.bodyA === player || col.bodyB === player) 
                    ){
                        player.blowUp();
                        world.removeBehavior( this );
                        this.gameover = true;

                        // when we crash, we‘ll publish an event to the world
                        // that we can listen for to prompt to restart the game
                        world.publish(‘lose-game‘);
                        return;
                    }
                }
            },

            // toggle player motion
            movePlayer: function( active ){

                if ( active === false ){
                    this.playerMove = false;
                    return;
                }
                this.playerMove = true;
            },

            behave: function( data ){

                // activate thrusters if playerMove is true
                this.player.thrust( this.playerMove ? 1 : 0 );
            }
        };
    });
});

So now we can declare js/player and js/player-behavior as dependencies and use them in ourmain.js file by adding this to our init() function:

// in init()
var ship = Physics.body(‘player‘, {
    x: 400,
    y: 100,
    vx: 0.08,
    radius: 30
});

var playerBehavior = Physics.behavior(‘player-behavior‘, { player: ship });

// ...

world.add([
    ship,
    playerBehavior,
    //...
]);

改变renderer offset right，在renderer调用world.render()之前。

// inside init()...
// render on every step
world.subscribe(‘step‘, function(){
    // middle of canvas
    var middle = { 
        x: 0.5 * window.innerWidth, 
        y: 0.5 * window.innerHeight
    };
    // follow player
    renderer.options.offset.clone( middle ).vsub( ship.state.pos );
    world.render();
});

步骤2：找麻烦

现在，这是个无聊的游戏。我们要升级它。让我们创建ufo(我看着像病毒...)

我们做的几乎是和创建player一样的事情。我们创建新的body(扩展 circle)。但是我们接下来做到简单多了。

新建ufo.js，仅仅给他一个简单的blowup()：

define(
[
    ‘require‘,
    ‘physicsjs‘,
    ‘physicsjs/bodies/circle‘
],
function(
    require,
    Physics
){

    Physics.body(‘ufo‘, ‘circle‘, function( parent ){
        var ast1 = new Image();
        ast1.src = require.toUrl(‘images/ufo.png‘);

        return {
            init: function( options ){
                parent.init.call(this, options);

                this.view = ast1;
            },
            blowUp: function(){
                var self = this;
                var world = self._world;
                if (!world){
                    return self;
                }
                var scratch = Physics.scratchpad();
                var rnd = scratch.vector();
                var pos = this.state.pos;
                var n = 40;
                var r = 2 * this.geometry.radius;
                var size = r / n;
                var mass = 0.001;
                var d;
                var debris = [];

                // create debris
                while ( n-- ){
                    rnd.set( Math.random() - 0.5, Math.random() - 0.5 ).mult( r );
                    d = Physics.body(‘circle‘, {
                        x: pos.get(0) + rnd.get(0),
                        y: pos.get(1) + rnd.get(1),
                        vx: this.state.vel.get(0) + (Math.random() - 0.5),
                        vy: this.state.vel.get(1) + (Math.random() - 0.5),
                        angularVelocity: (Math.random()-0.5) * 0.06,
                        mass: mass,
                        radius: size,
                        restitution: 0.8
                    });
                    d.gameType = ‘debris‘;

                    debris.push( d );
                }

                setTimeout(function(){
                    for ( var i = 0, l = debris.length; i < l; ++i ){
                        world.removeBody( debris[ i ] );
                    }
                    debris = undefined;
                }, 1000);

                world.add( debris );
                world.removeBody( self );
                scratch.done();
                world.publish({
                    topic: ‘blow-up‘, 
                    body: self
                });
                return self;
            }
        };
    });
});

// inside init()...
var ufos = [];
for ( var i = 0, l = 30; i < l; ++i ){

    var ang = 4 * (Math.random() - 0.5) * Math.PI;
    var r = 700 + 100 * Math.random() + i * 10;

    ufos.push( Physics.body(‘ufo‘, {
        x: 400 + Math.cos( ang ) * r,
        y: 300 + Math.sin( ang ) * r,
        vx: 0.03 * Math.sin( ang ),
        vy: - 0.03 * Math.cos( ang ),
        angularVelocity: (Math.random() - 0.5) * 0.001,
        radius: 50,
        mass: 30,
        restitution: 0.6
    }));
}

//...

world.add( ufos );

代码到init()，来确保我们消灭了多少并发出win-game事件如果我们全灭他们.我们也监听collisions:detected事件

如果任何物体碰到ufo,就消灭他们,接着我们将射出子弹。

// inside init()...
// count number of ufos destroyed
var killCount = 0;
world.subscribe(‘blow-up‘, function( data ){

    killCount++;
    if ( killCount === ufos.length ){
        world.publish(‘win-game‘);
    }
});

// blow up anything that touches a laser pulse
world.subscribe(‘collisions:detected‘, function( data ){
    var collisions = data.collisions
        ,col
        ;

    for ( var i = 0, l = collisions.length; i < l; ++i ){
        col = collisions[ i ];

        if ( col.bodyA.gameType === ‘laser‘ || col.bodyB.gameType === ‘laser‘ ){
            if ( col.bodyA.blowUp ){
                col.bodyA.blowUp();
            } else if ( col.bodyB.blowUp ){
                col.bodyB.blowUp();
            }
            return;
        }
    }
});

不同的风格(style)有很多方法可以这么做。

第3版的main.js

Fantastic! We’re almost done. There’s just one more thing I want to show you…

步骤3：找到的道路（写个雷达）

我们很容易在空间里迷失方向。很难看到你的四周，你需要一些帮助，为了解决这个，来创建一个雷达小地图吧。

我们将获取所有bodys的坐标。把他们变成点绘制在小的canvas区域在上右上角。尽管rendererb不是万能的

但还是有不是游泳的方法能满足我的要求。我们需要做的是关联renderer事件，当renderer结束渲染bodies时调用。

接下来看代码

// inside init()...
// draw minimap
world.subscribe(‘render‘, function( data ){
    // radius of minimap
    var r = 100;
    // padding
    var shim = 15;
    // x,y of center
    var x = renderer.options.width - r - shim;
    var y = r + shim;
    // the ever-useful scratchpad to speed up vector math
    var scratch = Physics.scratchpad();
    var d = scratch.vector();
    var lightness;

    // draw the radar guides
    renderer.drawCircle(x, y, r, { strokeStyle: ‘#090‘, fillStyle: ‘#010‘ });
    renderer.drawCircle(x, y, r * 2 / 3, { strokeStyle: ‘#090‘ });
    renderer.drawCircle(x, y, r / 3, { strokeStyle: ‘#090‘ });

    for (var i = 0, l = data.bodies.length, b = data.bodies[ i ]; b = data.bodies[ i ]; i++){

        // get the displacement of the body from the ship and scale it
        d.clone( ship.state.pos ).vsub( b.state.pos ).mult( -0.05 );
        // color the dot based on how massive the body is
        lightness = Math.max(Math.min(Math.sqrt(b.mass*10)|0, 100), 10);
        // if it‘s inside the minimap radius
        if (d.norm() < r){
            // draw the dot
            renderer.drawCircle(x + d.get(0), y + d.get(1), 1, ‘hsl(60, 100%, ‘+lightness+‘%)‘);
        }
    }

    scratch.done();
});

PhysicsJS,布布扣,bubuko.com

PhysicsJS