如何实现一个简单的跑酷游戏？

百变鹏仔 2个月前 (10-18) #H5教程

文章标签如何实现

本篇文章给大家带来的内容是介绍如何实现一个简单的跑酷游戏？（代码详解）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

采用的物理引擎是：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 &amp;&amp; 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: &#39;arcade&#39;,        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(&#39;sky&#39;, &#39;assets/sky.png&#39;);    this.load.image(&#39;ground&#39;, &#39;assets/platform.png&#39;);     39      40     this.load.spritesheet(&#39;dude&#39;, &#39;assets/dude.png&#39;, {        frameWidth: 32,        frameHeight: 48    });}// 将资源展示到画布创建资源function create() {    // 添加画布背景    this.add.image(400, 200, &#39;sky&#39;);    // 添加分数文本    distanceText = this.add.text(16, 16, &#39;Distance: 0m&#39;, {        fontSize: &#39;20px&#39;,        fill: &#39;#000&#39;    });    // 添加地面    platforms = this.physics.add.staticGroup();    platforms.create(400, 400, &#39;ground&#39;).setScale(3).refreshBody();    // 添加玩家（精灵）    player = this.physics.add.sprite(100, 300, &#39;dude&#39;);    player.setBounce(0); // 设置阻力    player.setCollideWorldBounds(true); // 禁止玩家走出世界    // 敌人    enemys = this.physics.add.group();    enemys.children.iterate(function (child) {        child.setCollideWorldBounds(false);    });    // 事件    this.anims.create({        key: &#39;left&#39;,        frames: this.anims.generateFrameNumbers(&#39;dude&#39;, {            start: 0,            end: 3        }),        frameRate: 10,        repeat: -1    });    this.anims.create({        key: &#39;right&#39;,        frames: this.anims.generateFrameNumbers(&#39;dude&#39;, {            start: 5,            end: 8        }),        frameRate: 10,        repeat: -1    });    this.anims.create({        key: &#39;turn&#39;,        frames: [{            key: &#39;dude&#39;,            frame: 4        }],        frameRate: 20    });    cursors = this.input.keyboard.createCursorKeys();    // 动态创建敌人    enemyTimer = setInterval(function () {        enemy = enemys.create(1000, 300, &#39;dude&#39;);        enemy.setTint(getColor());        enemy.anims.play(&#39;left&#39;, true);        enemy.setVelocityX(Phaser.Math.Between(-300, -100));    }, Phaser.Math.Between(4000, 8000))    distanceTimer = setInterval(function () {        distance += 1;        distanceText.setText(&#39;Distance: &#39; + distance + &#39;m&#39;);    }, 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(&#39;right&#39;, true);    }    if (gameOver) {        player.setVelocityX(0);        player.anims.play(&#39;turn&#39;);        return;    }}function hitBomb(player, enemys) {    this.physics.pause();    clearInterval(enemyTimer);    clearInterval(distanceTimer);    player.setTint(0xff0000);    gameOver = true;    alert(&#39;游戏结束,您跑了&#39; + distance + &#39;m&#39;);}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;}

文章推荐

如何实现一个简单的跑酷游戏？

HTML在线编辑器的调用方法和使用方法

AlloyTouch全屏滚动插件 30秒搞定顺滑H5页

HTML5 js实现拖拉上传文件功能

Canvas and Drawables 翻译第一集

Canvas and Drawables 翻译第三集