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


Posted in Javascript onOctober 26, 2018

采用的物理引擎是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 面向对象编程 万物皆对象
Sep 17 Javascript
document.getElementById方法在Firefox与IE中的区别
May 18 Javascript
有关于eclipse配置spket需要注意的一些地方
Apr 07 Javascript
解析ScrollPic在ie8下只滚动一遍,然后变为空白 ie6,ie7,chrome,firefox正常
Jun 26 Javascript
javascript实现在某个元素上阻止鼠标右键事件的方法和实例
Aug 12 Javascript
JavaScript正则表达式中的ignoreCase属性使用详解
Jun 16 Javascript
vue.js+Element实现表格里的增删改查
Jan 18 Javascript
详解Vue2.0之去掉组件click事件的native修饰
Apr 20 Javascript
vue.js的手脚架vue-cli项目搭建的步骤
Aug 30 Javascript
详解 vue.js用法和特性
Oct 15 Javascript
vue和better-scroll实现列表左右联动效果详解
Apr 29 Javascript
浅析 Vue 3.0 的组装式 API(一)
Aug 31 Javascript
如何用Node写页面爬虫的工具集
Oct 26 #Javascript
Javascript中绑定click事件的四种方式介绍
Oct 26 #Javascript
使用webpack打包后的vue项目如何正确运行(express)
Oct 26 #Javascript
jQuery Ajax实现Select多级关联动态绑定数据的实例代码
Oct 26 #jQuery
详解ES6 系列之异步处理实战
Oct 26 #Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
Oct 26 #Javascript
angularjs通过过滤器返回超链接的方法
Oct 26 #Javascript
You might like
常用表单验证类,有了这个,一般的验证就都齐了。
2006/12/06 PHP
简单的php数据库操作类代码(增,删,改,查)
2013/04/08 PHP
深入PHP empty(),isset(),is_null()的实例测试详解
2013/06/06 PHP
PHP面相对象中的重载与重写
2017/02/13 PHP
PHP设计模式之原型设计模式原理与用法分析
2018/04/25 PHP
短信提示使用 特效
2007/01/19 Javascript
javascript之卸载鼠标事件的代码
2007/05/14 Javascript
json 实例详细说明教程
2009/10/31 Javascript
Json2Template.js 基于jquery的插件 绑定JavaScript对象到Html模板中
2011/10/29 Javascript
HTML页面登录时的JS验证方法
2014/05/28 Javascript
jQuery实现高亮显示网页关键词的方法
2015/08/07 Javascript
js实现有过渡渐变效果的图片轮播相册(兼容IE,ff)
2016/01/19 Javascript
使用three.js 画渐变的直线
2016/06/05 Javascript
详解JavaScript跨域总结与解决办法
2016/10/31 Javascript
JavaScript数据结构链表知识详解
2016/11/21 Javascript
原生JavaScript实现Tooltip浮动提示框特效
2017/03/07 Javascript
通过Kettle自定义jar包供javascript使用
2020/01/29 Javascript
原生js实现ajax请求和JSONP跨域请求操作示例
2020/03/14 Javascript
vue-openlayers实现地图坐标弹框效果
2020/09/24 Javascript
[27:08]完美世界DOTA2联赛PWL S2 SZ vs Rebirth 第二场 11.21
2020/11/23 DOTA
tensorflow更改变量的值实例
2018/07/30 Python
python实现对指定字符串补足固定长度倍数截断输出的方法
2018/11/15 Python
python 经典数字滤波实例
2019/12/16 Python
python给视频添加背景音乐并改变音量的具体方法
2020/07/19 Python
Python SMTP发送电子邮件的示例
2020/09/23 Python
CSS3轻松实现清新 Loading 效果的简单实例
2016/06/06 HTML / CSS
Html5内唤醒百度、高德APP的实现示例
2019/05/20 HTML / CSS
中考冲刺决心书
2014/03/11 职场文书
多媒体教室标语
2014/06/26 职场文书
农村优秀教师事迹材料
2014/08/27 职场文书
网上祭先烈心得体会
2014/09/01 职场文书
实现中国梦思想汇报2014
2014/09/13 职场文书
授权委托书范本(单位)
2014/09/28 职场文书
公司合并协议书范本
2014/09/30 职场文书
债务追讨律师函
2015/06/24 职场文书
Pytorch中的学习率衰减及其用法详解
2021/06/05 Python