Phaser.js实现简单的跑酷游戏附源码下载

2018-10-26 38 ProsperLee

采用的物理引擎是Phaser.js

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

在这里对此引擎不做过多介绍(因为我也是小白,嘿嘿)

效果展示:

Phaser.js实现简单的跑酷游戏附源码下载

源码(详细源码图片资源可点击文章下方或屏幕右上方的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');
  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;
}

GitHub:Fuck me on GitHub Fuck me on GitHub

总结

以上所述是小编给大家介绍的Phaser.js实现简单的跑酷游戏附源码下载,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

展开阅读全文

更多Javascript文章

Javascript冒泡排序算法详解
Dec 03 49
jQuery文字提示与图片提示效果实现方法
Jul 04 53
Vue.js实现实例搜索应用功能详细代码
Aug 24 52
JS实现移动端点击按钮复制文本内容
Jul 28 46
使用flow来规范javascript的变量类型
Sep 12 49
Webpack按需加载打包chunk命名的方法
Sep 22 60
如何在selenium中使用js实现定位
Aug 18 79
手机访问当前页面