zoukankan html css js c++ java

Phaser.js之简单的跑酷游戏

采用的物理引擎是Phaser.js

在这里对此引擎不做过多介绍（因为我也是小白，嘿嘿）

效果展示：

源码（详细源码图片资源可点击文章下方或屏幕右上方的github链接进行clone）

1.创建游戏舞台

 1 var config = {
 2     type: Phaser.AUTO,
 3      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      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 }

查看全文

相关阅读:
Vsftpd 3.0.2 正式版发布
 Putdb WebBuilder 6.5 正式版本发布
 SoaBox 1.1.6 GA 发布，SOA 模拟环境
 pynag 0.4.6 发布，Nagios配置和插件管理
 Percona Playback 0.4，MySQL 负荷回放工具
 xombrero 1.3.1 发布，微型 Web 浏览器
 Hypertable 0.9.6.4 发布，分布式数据库
 libmemcached 1.0.11 发布
 CryptoHeaven 3.7 发布，安全邮件解决方案
 Android Activity生命周期

原文地址：https://www.cnblogs.com/lprosper/p/9855361.html