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技巧
Dec 06 Javascript
JS Replace 全部替换字符的用法小结
Dec 24 Javascript
运用JQuery的toggle实现网页加载完成自动弹窗
Mar 18 Javascript
创建js对象和js类的方法汇总
Dec 24 Javascript
EasyUI中combobox默认值注意事项
Mar 01 Javascript
JS正则表达式验证密码格式的集中情况总结
Feb 23 Javascript
jquery实现侧边栏左右伸缩效果的示例
Dec 19 jQuery
关于JavaScript中高阶函数的魅力详解
Sep 07 Javascript
通过JS运行机制的角度说说作用域
Mar 12 Javascript
在vue中使用setInterval的方法示例
Apr 16 Javascript
JavaScript中的this/call/apply/bind的使用及区别
Mar 06 Javascript
JavaScript中的this妙用实例分析
May 09 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
风味层面去分析咖啡油脂
2021/03/03 咖啡文化
PHP中在数据库中保存Checkbox数据(2)
2006/10/09 PHP
PHP4和PHP5性能测试和对比 测试代码与环境
2007/08/17 PHP
解析php curl_setopt 函数的相关应用及介绍
2013/06/17 PHP
PHP三元运算的2种写法代码实例
2014/05/12 PHP
PHP使用Session遇到的一个Permission denied Notice解决办法
2014/07/30 PHP
php实现单笔转账到支付宝功能
2018/10/09 PHP
jQuery ui 1.7更新小结
2009/08/15 Javascript
JS 精确统计网站访问量的实例代码
2013/07/05 Javascript
使用jQuery实现返回顶部
2015/01/26 Javascript
使用jspdf生成pdf报表
2015/07/03 Javascript
Vue2.x中的父子组件相互通信的实现方法
2017/05/02 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
bootstrap里bootstrap动态加载下拉框的实例讲解
2018/08/10 Javascript
vuejs实现折叠面板展开收缩动画效果
2018/09/06 Javascript
js针对图片加载失败的处理方法分析
2019/08/24 Javascript
微信小程序点击生成朋友圈分享图(遇到的坑)
2020/06/17 Javascript
python读写ini文件示例(python读写文件)
2014/03/25 Python
python实现按行切分文本文件的方法
2016/04/18 Python
Python整型运算之布尔型、标准整型、长整型操作示例
2017/07/21 Python
详解Python中的内建函数,可迭代对象,迭代器
2019/04/29 Python
用OpenCV将视频分解成单帧图片,图片合成视频示例
2019/12/10 Python
Pytorch转keras的有效方法,以FlowNet为例讲解
2020/05/26 Python
购买英国原创艺术:Art Gallery
2018/08/25 全球购物
Yahoo-PHP面试题4
2012/05/05 面试题
YII2 全局异常处理深入讲解
2021/03/24 PHP
迎元旦广播稿
2014/02/22 职场文书
产品销售计划书
2014/05/04 职场文书
班组拓展活动方案
2014/08/14 职场文书
学雷锋活动倡议书
2014/08/30 职场文书
2014年物业公司工作总结
2014/11/22 职场文书
迎新生欢迎词
2015/01/23 职场文书
大四学生个人总结
2015/02/15 职场文书
交通事故被告答辩状
2015/05/22 职场文书
理想国读书笔记
2015/06/25 职场文书
七年级语文教学反思
2016/03/03 职场文书