Phaser.js之简单的跑酷游戏_phaser引擎官网

 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); // 创建游戏
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

 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 }
1
2
3
4
5
6
7

 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 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46

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();
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31

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 }
1
2
3
4
5
6
7
8

 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 }
1
2
3
4
5
6
7
8
9
10
11

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 }
1
2
3
4
5
6

  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 }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148