本篇文章给大家带来的内容是介绍如何实现一个简单的跑酷游戏？(代码详解)。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。

采用的物理引擎是：Phaser.js

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

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

效果展示：

源码(详细源码图片资源访问：https://github.com/ProsperLee)

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;

}

简单跑酷java代码_如何实现一个简单的跑酷游戏？（代码详解）相关推荐

  1. 掷骰子python代码_通过构建一个简单的掷骰子游戏去学习怎么用 Python 编程

    不论是经验丰富的老程序员,还是没有经验的新手,Python 都是一个非常好的编程语言. Image by : opensource.com Python 是一个非常流行的编程语言,它可以用于创建桌面应 ...

  2. 腾讯小程序 java编写_微信小程序 使用腾讯地图SDK详解及实现步骤

    微信小程序 使用腾讯地图SDK详解及实现步骤 近期在做一款彩票服务类项目中用到了腾讯地图提供的小程序解决方案,拿来给大家分享一下! 使用起来非常简单,就是一些功能还有待完善. 官方文档:http:// ...

  3. 我的世界刷猪人塔java版_我的世界速攻猪人塔详解 史上最牛的经验塔

    我的世界速攻猪人塔详解 史上最牛的经验塔.那下面给大家分享的这个是一个可以让所有经验塔自叹不如的速攻猪人塔哦~那到底这个塔是什么呢?那下面就给大家详细的介绍一下吧!有感兴趣的玩家不妨进来看看哦~希望大 ...

  4. 【牛客刷题】上手用C语言写一个三子棋小游戏超详解哦（电脑优化）

    作者:[南航科院小张 南航科院小张的博客 专栏:从c语言的入门到进阶 学习知识不只是要懂,还要会用:想要找到好的工作,这里给大家介绍一件可以斩获诸多大厂offer的利器–牛客网 点击免费注册和我一起开 ...

  5. python注销代码_python怎么注销代码_如何从一个简单的web应用程序注销。在CherryPy，Python中...

    我不熟悉CherryPy和Python,但我需要编写一个非常简单的web应用程序来执行login---&gt:do some commands---&gt:logout.对于登录,我使 ...

  6. php网页制作代码_如何制作一个简单的HTML登录页面（附代码）

    几乎每个网站都会有登录页面,那你知道如何写HTML登录页面吗?这篇文章就和大家分享一个HTML简单登录界面的代码,有一定的参考价值,感兴趣的朋友可以看看. 制作登录页面需要用到很多CSS属性和HTML ...

  7. java简单学生考勤源代码_这是一个简单的学生考勤管理系统

    [android]代码库package cindy.android.test.synclistview; import java.io.BufferedReader; import java.io.I ...

  8. yum 查看java版本_如何查找YUM安装的JAVA_HOME环境变量详解

    前言 开发中很多需要javac 的程序依赖 JAVA_HOME环境变量. 如果是手工下载源码安装的JDK,很容易知道JAVA_HOME的目录. 例如 那么对应的 JAVA_HOME 为 /usr/lo ...

  9. ts文件引入js文件_如何编写一个d.ts文件的步骤详解

    前言 本文主要讲怎么写一个typescript的描述文件(以d.ts结尾的文件名,比如xxx.d.ts). 最近开始从js转ts了.但是要用到一些描述文件(d.ts),常用的比如jquery等都可以通 ...

最新文章

  1. 神经网络理论基础及Python实现
  2. 关于智能车竞赛总结 | 山东大学（威海） - 山魂五队
  3. function checkBrowser()//判断浏览器
  4. apply()与call()
  5. oracl 单行字符型函数
  6. 重磅推荐！日立开源语义分割数据集标注工具Semantic Segmentation Editor
  7. 为什么word下面有红线_这4个Word细节不做好，老板看了都想骂人！赶紧记下来
  8. C基础06天--字符串
  9. 用python进行wifi密码生成
  10. QTeewidget逐行进行遍历（递归）
  11. 卡巴斯基安全部队2014，越来越像VISTA了
  12. 01-ArcGIS从下载到卸载那些事儿
  13. 非常简单的四子棋【java编写】
  14. HP Helion让合作伙伴到少增30%收入
  15. IOTA,物联网区块链？
  16. 宇视摄像机巡航和自动跟踪哪个优先级高？
  17. 将字符串的一部分拷贝到另一个字符串
  18. Vista系统安装优化备忘
  19. 易飞9.0.12官方正版安装程序下载地址
  20. 修改activityMQ的登录账与密码

热门文章

  1. HTML常用标签或属性 英文全称和中文释义
  2. gin：结合gorilla实现webSocket
  3. php-java-net-python-报修修改计算机毕业设计程序
  4. dz每个php模板页文件,dz模板引擎分析
  5. [Jquery]天气接口简单使用
  6. 怎么引流微信 ，QQ，抖音，淘宝，微博，Facebook好友
  7. 最后的彩虹蝶为生命而舞
  8. 机器学习十大算法之贝叶斯算法
  9. 00007__点阵字体（位图）和TrueType字体
  10. apollo自动驾驶入门课-高精地图