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

2018-10-26 17 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基础的动画教程,直观易懂
Jan 10 12
JS 各种网页尺寸判断实例方法
Apr 18 25
获取阴历(农历)和当前日期的js代码
Feb 15 20
简单实现AngularJS轮播图效果
Apr 10 20
关于js陀螺仪的理解分析
Apr 11 25
vuex中store存储store.commit和store.dispatch的用法
Jul 24 27
swiper自定义分页器的样式
Sep 14 25
手机访问当前页面