如何实现一个简单的跑酷游戏?(代码详解)

如果下载的源码需要作者授权,请更换源码。本站免费分享资源不会增加授权

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

采用的物理引擎是: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; }
本文由(壳先生)整理自网络,如转载请注明出处:https://www.mrshell.com;
本站发布的内容若侵犯到您的权益,请邮件联系 i@mrshell.com 删除,我们将及时处理!
===========================================================================

1. 本站大部分下载资源收集于网络,不保证其完整性以及安全性,请下载后自行测试。
2. 本站资源仅供学习和交流使用,版权归资源原作者所有,请在下载后24小时之内自觉删除。
3. 不得使用于非法商业用途,商用请支持正版!不得违反国家法律,否则后果自负!
4. 若作商业用途,请购买正版,由于未及时购买和付费发生的侵权行为,与本站无关。
5. 如有链接无法下载、失效或广告,请联系管理员处理!
6. 本站资源售价只是赞助,收取费用仅维持本站的日常运营所需!

=================================================================

壳先生 » 如何实现一个简单的跑酷游戏?(代码详解)

发表评论

提供最优质的资源集合

立即查看 了解详情