采用的物理引擎是Phaser.js
官网地址：http://phaser.io/
在这里对此引擎不做过多介绍（因为我也是小白，嘿嘿）
效果展示：
源码（详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone）
1.创建游戏舞台
1 var config = {
2 type: Phaser.AUTO,
3 width: 800,
4 height: 400,
5 physics: {
6 default: 'arcade',
7 arcade: {
8 gravity: {
9 y: 300
10 },
11 debug: false
12 }
13 },
14 scene: {
15 preload: preload,
16 create: create,
17 update: update
18 }
19 };
20
21 var game = new Phaser.Game(config); // 创建游戏
2.载入资源
1 function preload() {
2 this.load.image('sky', 'assets/sky.png');
3 this.load.image('ground', 'assets/platform.png');
4 5 6 this.load.spritesheet('dude', 'assets/dude.png', {
7 frameWidth: 32,
8 frameHeight: 48
9 });
10 }
3.将资源创建到舞台上
1 var distanceText; // 路程文本
2 var distance = 0; // 路程
3 var platforms; // 地面
4 var player; // 玩家
5 var enemy; // 敌人
6 var enemys; // 敌人们
7 var enemyTimer; // 敌人计时器
8 var distanceTimer; // 路程计时器
9
10 function create() {
11 // 添加画布背景
12 this.add.image(400, 200, 'sky');
13 // 添加分数文本
14 distanceText = this.add.text(16, 16, 'Distance: 0m', {
15 fontSize: '20px',
16 fill: '#000'
17 });
18 // 添加地面
19 platforms = this.physics.add.staticGroup();
20 platforms.create(400, 400, 'ground').setScale(3).refreshBody();
21 // 添加玩家（精灵）
22 player = this.physics.add.sprite(100, 300, 'dude');
23 player.setBounce(0); // 设置阻力
24 player.setCollideWorldBounds(true); // 禁止玩家走出世界
25
26 // 敌人
27 enemys = this.physics.add.group();
28 enemys.children.iterate(function (child) {
29 child.setCollideWorldBounds(false);
30 });
31 // 动态创建敌人
32 enemyTimer = setInterval(function () {
33 enemy = enemys.create(1000, 300, 'dude');
34 enemy.setTint(getColor());
35 enemy.anims.play('left', true);
36 enemy.setVelocityX(Phaser.Math.Between(-300, -100));
37 }, Phaser.Math.Between(4000, 8000))
38
39 distanceTimer = setInterval(function () {
40 distance += 1;
41 distanceText.setText('Distance: ' + distance + 'm');
42 }, 1000)
43
44 this.physics.add.collider(player, platforms); //玩家在地面上
45 this.physics.add.collider(enemys, platforms); //敌人在地面上
46 this.physics.add.collider(player, enemys, hitBomb, null, this);
47 }
4.在创建场景过程中写键盘监听事件
var cursors; // 按键
// 事件
this.anims.create({
key: 'left',
frames: this.anims.generateFrameNumbers('dude', {
start: 0,
end: 3
}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'right',
frames: this.anims.generateFrameNumbers('dude', {
start: 5,
end: 8
}),
frameRate: 10,
repeat: -1
});
this.anims.create({
key: 'turn',
frames: [{
key: 'dude',
frame: 4
}],
frameRate: 20
});
cursors = this.input.keyboard.createCursorKeys();
5.写碰撞函数（当玩家与敌人碰撞的结果）
1 var gameOver = false; // 游戏结束
2 function hitBomb(player, enemys) {
3 this.physics.pause();
4 clearInterval(enemyTimer);
5 clearInterval(distanceTimer);
6 player.setTint(0xff0000);
7 gameOver = true;
8 alert('游戏结束,您跑了' + distance + 'm');
9 }
6.在update函数中写时间的执行（须注意的是此函数每一帧都在执行，1帧≠1秒）
1 function update() {
2 if (cursors.up.isDown && player.body.touching.down) {
3 player.setVelocityY(-220);
4 } else {
5 player.anims.play('right', true);
6 }
7 if (gameOver) {
8 player.setVelocityX(0);
9 player.anims.play('turn');
10 return;
11 }
12 }
这里我给敌人上了颜色的，随机16进制颜色
1 function getColor() {
2 var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
3 return Math.random() - 0.5
4 }).join("").substr(0,6);
5
6 return "0x" + color;
7 }
整个源码奉上（建议去github上自己clone）：
1 var config = {
2 type: Phaser.AUTO,
3 width: 800,
4 height: 400,
5 physics: {
6 default: 'arcade',
7 arcade: {
8 gravity: {
9 y: 300
10 },
11 debug: false
12 }
13 },
14 scene: {
15 preload: preload,
16 create: create,
17 update: update
18 }
19 };
20
21 var game = new Phaser.Game(config); // 创建游戏
22
23 var distanceText; // 路程文本
24 var distance = 0; // 路程
25 var platforms; // 地面
26 var player; // 玩家
27 var enemy; // 敌人
28 var enemys; // 敌人们
29 var gameOver = false; // 游戏结束
30 var enemyTimer; // 敌人计时器
31 var distanceTimer; // 路程计时器
32
33 var cursors; // 按键
34 // 载入资源
35 function preload() {
36 this.load.image('sky', 'assets/sky.png');
37 this.load.image('ground', 'assets/platform.png');
38 39 40 this.load.spritesheet('dude', 'assets/dude.png', {
41 frameWidth: 32,
42 frameHeight: 48
43 });
44 }
45
46 // 将资源展示到画布创建资源
47 function create() {
48 // 添加画布背景
49 this.add.image(400, 200, 'sky');
50 // 添加分数文本
51 distanceText = this.add.text(16, 16, 'Distance: 0m', {
52 fontSize: '20px',
53 fill: '#000'
54 });
55 // 添加地面
56 platforms = this.physics.add.staticGroup();
57 platforms.create(400, 400, 'ground').setScale(3).refreshBody();
58 // 添加玩家（精灵）
59 player = this.physics.add.sprite(100, 300, 'dude');
60 player.setBounce(0); // 设置阻力
61 player.setCollideWorldBounds(true); // 禁止玩家走出世界
62
63 // 敌人
64 enemys = this.physics.add.group();
65 enemys.children.iterate(function (child) {
66
67 child.setCollideWorldBounds(false);
68 });
69
70 // 事件
71 this.anims.create({
72 key: 'left',
73 frames: this.anims.generateFrameNumbers('dude', {
74 start: 0,
75 end: 3
76 }),
77 frameRate: 10,
78 repeat: -1
79 });
80
81 this.anims.create({
82 key: 'right',
83 frames: this.anims.generateFrameNumbers('dude', {
84 start: 5,
85 end: 8
86 }),
87 frameRate: 10,
88 repeat: -1
89 });
90
91 this.anims.create({
92 key: 'turn',
93 frames: [{
94 key: 'dude',
95 frame: 4
96 }],
97 frameRate: 20
98 });
99
100 cursors = this.input.keyboard.createCursorKeys();
101
102 // 动态创建敌人
103 enemyTimer = setInterval(function () {
104 enemy = enemys.create(1000, 300, 'dude');
105 enemy.setTint(getColor());
106 enemy.anims.play('left', true);
107 enemy.setVelocityX(Phaser.Math.Between(-300, -100));
108 }, Phaser.Math.Between(4000, 8000))
109
110 distanceTimer = setInterval(function () {
111 distance += 1;
112 distanceText.setText('Distance: ' + distance + 'm');
113 }, 1000)
114
115
116
117 this.physics.add.collider(player, platforms); //玩家在地面上
118 this.physics.add.collider(enemys, platforms);
119 this.physics.add.collider(player, enemys, hitBomb, null, this);
120
121 }
122 // 一直执行
123 function update() {
124 if (cursors.up.isDown && player.body.touching.down) {
125 player.setVelocityY(-220);
126 } else {
127 player.anims.play('right', true);
128 }
129 if (gameOver) {
130 player.setVelocityX(0);
131 player.anims.play('turn');
132 return;
133 }
134 }
135
136 function hitBomb(player, enemys) {
137 this.physics.pause();
138 clearInterval(enemyTimer);
139 clearInterval(distanceTimer);
140 player.setTint(0xff0000);
141 gameOver = true;
142 alert('游戏结束,您跑了' + distance + 'm');
143 }
144
145 function getColor() {
146 var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
147 return Math.random() - 0.5
148 }).join("").substr(0,6);
149
150 return "0x" + color;
151 }
