Phaser.js之简单的跑酷游戏

采用的物理引擎是Phaser.js

官网地址：http://phaser.io/

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

效果展示：

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

1.创建游戏舞台

 var config = {
     type: Phaser.AUTO,
     width: 800,
     height: 400,
     physics: {
         default: 'arcade',
         arcade: {
             gravity: {
                 y: 300
             },
             debug: false
         }
     },
     scene: {
         preload: preload,
         create: create,
         update: update
     }
 };

 var game = new Phaser.Game(config); // 创建游戏

2.载入资源

 function preload() {
     this.load.image('sky', 'assets/sky.png');
     this.load.image('ground', 'assets/platform.png');
               this.load.spritesheet('dude', 'assets/dude.png', {
         frameWidth: 32,
         frameHeight: 48
     });
 }

3.将资源创建到舞台上

 var distanceText; // 路程文本
 var distance = 0; // 路程
 var platforms; // 地面
 var player; // 玩家
 var enemy; // 敌人
 var enemys; // 敌人们
 var enemyTimer; // 敌人计时器
 var distanceTimer; // 路程计时器

 function create() {
     // 添加画布背景
     this.add.image(400, 200, 'sky');
     // 添加分数文本
     distanceText = this.add.text(16, 16, 'Distance: 0m', {
         fontSize: '20px',
         fill: '#000'
     });
     // 添加地面
     platforms = this.physics.add.staticGroup();
     platforms.create(400, 400, 'ground').setScale(3).refreshBody();
     // 添加玩家（精灵）
     player = this.physics.add.sprite(100, 300, 'dude');
     player.setBounce(0); // 设置阻力
     player.setCollideWorldBounds(true); // 禁止玩家走出世界

     // 敌人
     enemys = this.physics.add.group();
     enemys.children.iterate(function (child) {
         child.setCollideWorldBounds(false);
     });
     // 动态创建敌人
     enemyTimer = setInterval(function () {
         enemy = enemys.create(1000, 300, 'dude');
         enemy.setTint(getColor());
         enemy.anims.play('left', true);
         enemy.setVelocityX(Phaser.Math.Between(-300, -100));
     }, Phaser.Math.Between(4000, 8000))

     distanceTimer = setInterval(function () {
         distance += 1;
         distanceText.setText('Distance: ' + distance + 'm');
     }, 1000)

     this.physics.add.collider(player, platforms); //玩家在地面上
     this.physics.add.collider(enemys, platforms); //敌人在地面上
     this.physics.add.collider(player, enemys, hitBomb, null, this);
 }

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.写碰撞函数（当玩家与敌人碰撞的结果）

 var gameOver = false; // 游戏结束
 function hitBomb(player, enemys) {
     this.physics.pause();
     clearInterval(enemyTimer);
     clearInterval(distanceTimer);
     player.setTint(0xff0000);
     gameOver = true;
     alert('游戏结束,您跑了' + distance + 'm');
 }

6.在update函数中写时间的执行（须注意的是此函数每一帧都在执行，1帧≠1秒）

 function update() {
     if (cursors.up.isDown && player.body.touching.down) {
         player.setVelocityY(-220);
     } else {
         player.anims.play('right', true);
     }
     if (gameOver) {
         player.setVelocityX(0);
         player.anims.play('turn');
         return;
     }
 }

这里我给敌人上了颜色的，随机16进制颜色

 function getColor() {
     var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
         return Math.random() - 0.5
     }).join("").substr(0,6);

     return "0x" + color;
 }

整个源码奉上（建议去github上自己clone）：

 var config = {
     type: Phaser.AUTO,
     width: 800,
     height: 400,
     physics: {
         default: 'arcade',
         arcade: {
             gravity: {
                 y: 300
             },
             debug: false
         }
     },
     scene: {
         preload: preload,
         create: create,
         update: update
     }
 };

 var game = new Phaser.Game(config); // 创建游戏

 var distanceText; // 路程文本
 var distance = 0; // 路程
 var platforms; // 地面
 var player; // 玩家
 var enemy; // 敌人
 var enemys; // 敌人们
 var gameOver = false; // 游戏结束
 var enemyTimer; // 敌人计时器
 var distanceTimer; // 路程计时器

 var cursors; // 按键
 // 载入资源
 function preload() {
     this.load.image('sky', 'assets/sky.png');
     this.load.image('ground', 'assets/platform.png');
               this.load.spritesheet('dude', 'assets/dude.png', {
         frameWidth: 32,
         frameHeight: 48
     });
 }

 // 将资源展示到画布创建资源
 function create() {
     // 添加画布背景
     this.add.image(400, 200, 'sky');
     // 添加分数文本
     distanceText = this.add.text(16, 16, 'Distance: 0m', {
         fontSize: '20px',
         fill: '#000'
     });
     // 添加地面
     platforms = this.physics.add.staticGroup();
     platforms.create(400, 400, 'ground').setScale(3).refreshBody();
     // 添加玩家（精灵）
     player = this.physics.add.sprite(100, 300, 'dude');
     player.setBounce(0); // 设置阻力
     player.setCollideWorldBounds(true); // 禁止玩家走出世界

     // 敌人
     enemys = this.physics.add.group();
     enemys.children.iterate(function (child) {

         child.setCollideWorldBounds(false);
     });

     // 事件
     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();

     // 动态创建敌人
     enemyTimer = setInterval(function () {
         enemy = enemys.create(1000, 300, 'dude');
         enemy.setTint(getColor());
         enemy.anims.play('left', true);
         enemy.setVelocityX(Phaser.Math.Between(-300, -100));
     }, Phaser.Math.Between(4000, 8000))

     distanceTimer = setInterval(function () {
         distance += 1;
         distanceText.setText('Distance: ' + distance + 'm');
     }, 1000)

     this.physics.add.collider(player, platforms); //玩家在地面上
     this.physics.add.collider(enemys, platforms);
     this.physics.add.collider(player, enemys, hitBomb, null, this);

 }
 // 一直执行
 function update() {
     if (cursors.up.isDown && player.body.touching.down) {
         player.setVelocityY(-220);
     } else {
         player.anims.play('right', true);
     }
     if (gameOver) {
         player.setVelocityX(0);
         player.anims.play('turn');
         return;
     }
 }

 function hitBomb(player, enemys) {
     this.physics.pause();
     clearInterval(enemyTimer);
     clearInterval(distanceTimer);
     player.setTint(0xff0000);
     gameOver = true;
     alert('游戏结束,您跑了' + distance + 'm');
 }

 function getColor() {
     var color = ["0", "1", "2", "3", "4", "5", "6", "7", "8", "9", "a", "b", "c", "d", "e", "f"].sort(function(){
         return Math.random() - 0.5
     }).join("").substr(0,6);

     return "0x" + color;
 }