当前位置: 开发笔记 > 开发工具 > 正文

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

作者：有点难 | 来源：互联网 | 2021-10-27 10:37

这篇文章主要介绍了Phaser.js实现简单的跑酷游戏附源码下载,需要的朋友可以参考下

采用的物理引擎是Phaser.js

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

在这里对此引擎不做过多介绍（因为我也是小白，嘿嘿）

效果展示：

源码（详细源码图片资源可点击文章下方或屏幕右上方的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实现简单的跑酷游戏附源码下载，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！

推荐阅读

git
基于KVM的SRIOV直通配置及性能测试

SRIOV介绍、VF直通配置，以及包转发率性能测试小慢哥的原创文章，欢迎转载目录?1.SRIOV介绍?2.环境说明?3.开启SRIOV?4.生成VF?5.VF ... [详细]

蜡笔小新 2024-12-25 19:26:39
git
Git 分布式版本控制系统：远程仓库的深入探讨

本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例，帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]

蜡笔小新 2024-12-25 18:30:21
git
Node.js 本地扩展开发指南

本文详细介绍了如何在 Windows 环境下使用 node-gyp 工具进行 Node.js 本地扩展的编译和配置，涵盖从环境搭建到代码实现的全过程。 ... [详细]

蜡笔小新 2024-12-25 10:35:17
git
提升Tumblr爬虫效率与功能

本文介绍了对之前开发的Tumblr爬虫脚本进行升级，整合了两个脚本的功能，实现了自动分页爬取博客内容，并支持配置文件以下载多个博客的不同格式文件。此外，还优化了图片下载逻辑。 ... [详细]

蜡笔小新 2024-12-24 16:29:06
diff
理解在 Ember.js 中加载 JSON 的最佳实践

作为一名 Ember.js 新手，了解如何在路由和模型中正确加载 JSON 数据是至关重要的。本文将探讨两者之间的差异，并提供实用的建议。 ... [详细]

蜡笔小新 2024-12-24 16:26:33
git
解析 org.apache.qpid.server.model.VirtualHost.closeAsync() 方法及其应用

本文详细介绍了 Java 中 org.apache.qpid.server.model.VirtualHost 类的 closeAsync() 方法，提供了具体的代码示例和应用场景。通过这些示例，读者可以更好地理解和使用该方法。 ... [详细]

蜡笔小新 2024-12-24 16:23:01
git
不确定性|放入_华为机试题 HJ9提取不重复的整数

不确定性|放入_华为机试题 HJ9提取不重复的整数 ... [详细]

蜡笔小新 2024-12-24 16:13:05
alias
企业级项目中 Webpack 配置优化指南

本文详细介绍了在企业级项目中如何优化 Webpack 配置，特别是在 React 移动端项目中的最佳实践。涵盖资源压缩、代码分割、构建范围缩小、缓存机制以及性能优化等多个方面。 ... [详细]

蜡笔小新 2024-12-24 14:41:48
eclipse
创建项目：Visual Studio Online 入门指南

本文介绍如何使用微软的 Visual Studio Online（VSO）创建和管理开发项目。作为一款基于云计算的开发平台，VSO 提供了丰富的工具和服务，简化了项目的配置和部署流程。 ... [详细]

蜡笔小新 2024-12-24 14:27:35
git
深入解析com.vividsolutions.jts.io.WKTWriter.appendGeometryCollectionText()方法

本文详细介绍了Java库中com.vividsolutions.jts.io.WKTWriter类的appendGeometryCollectionText()方法，并提供了实际代码示例，帮助开发者更好地理解和使用该方法。 ... [详细]

蜡笔小新 2024-12-24 13:41:29
git
使用 GitHub、JSDelivr、PicGo 和 Typora 构建高效的图床解决方案

本文详细介绍了如何利用 GitHub 仓库、JSDelivr CDN、PicGo 图床工具和 Typora 编辑器，搭建一个高效且免费的图床系统。通过此方案，用户可以轻松管理和上传图片，并在 Markdown 文档中快速插入高质量的图片链接。 ... [详细]

蜡笔小新 2024-12-24 12:54:21
git
FinOps 与 Serverless 的结合：破解云成本难题

本文探讨了如何通过 FinOps 实践优化 Serverless 应用的成本管理，提出了首个 Serverless 函数总成本估计模型，并分享了多种有效的成本优化策略。 ... [详细]

蜡笔小新 2024-12-24 12:44:26
git
科研单位信息系统中的DevOps实践与优化

本文探讨了某科研单位通过引入云原生平台实现DevOps开发和运维一体化，显著提升了项目交付效率和产品质量。详细介绍了如何在实际项目中应用DevOps理念，解决了传统开发模式下的诸多痛点。 ... [详细]

蜡笔小新 2024-12-24 11:46:45
git
加速 npm 构建流程的策略与方法

探讨如何优化 npm 构建过程，提升开发效率，减少构建时间，并介绍自动化部署的最佳实践。 ... [详细]

蜡笔小新 2024-12-24 10:49:28
git
开发笔记:2020 BJDCTF Re encode

开发笔记:2020 BJDCTF Re encode ... [详细]

蜡笔小新 2024-12-24 09:26:02

有点难

这个家伙很懒，什么也没留下！

Tags | 热门标签

RankList | 热门文章