如何实现一个简单的跑酷游戏？（代码详解）

采用的物理引擎是：Phaser.js

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

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

效果展示：

源码（详细源码图片资源访问：https://gIThub.COM/PRosPErLee）

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');
     5      6     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');
     39      40     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;
}
    

以上就是如何实现一个简单的跑酷游戏？（代码详解）的详细内容，更多请关注其它相关文章！

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！