本篇文章给大家带来的内容是介绍如何实现一个简单的跑酷游戏？（代码详解）。有一定的参考价值，有需要的朋友可以参考一下，希望对你们有所帮助。
采用的物理引擎是：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;
}
以上就是如何实现一个简单的跑酷游戏？（代码详解）的详细内容，更多请关注双恒网络其它相关文章！
1. 本站所有资源来源于用户上传和网络，如有侵权请邮件联系站长！
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何实现一个简单的跑酷游戏？（代码详解）
2. 分享目的仅供大家学习和交流，您必须在下载后24小时内删除！
3. 不得使用于非法商业用途，不得违反国家法律。否则后果自负！
4. 本站提供的源码、模板、插件等等其他资源，都不包含技术服务请大家谅解！
5. 如有链接无法下载、失效或广告，请联系管理员处理！
6. 本站资源售价只是赞助，收取费用仅维持本站的日常运营所需！
7. 如遇到加密压缩包，请使用WINRAR解压,如遇到无法解压的请联系管理员！
8. 精力有限，不少源码未能详细测试（解密），不能分辨部分源码是病毒还是误报，所以没有进行任何修改，大家使用前请进行甄别
9.本站默认解压密码为:www.sudo1.com
本站提供的一切软件、教程和内容信息仅限用于学习和研究目的。
不得将上述内容用于商业或者非法用途，否则，一切后果请用户自负。
本站信息来自网络收集整理，版权争议与本站无关。您必须在下载后的24个小时之内，从您的电脑或手机中彻底删除上述内容。
如果您喜欢该程序和内容，请支持正版，购买注册，得到更好的正版服务。
我们非常重视版权问题，如有侵权请邮件与我们联系处理。敬请谅解！
云资源网 » 如何实现一个简单的跑酷游戏？（代码详解）
常见问题FAQ
- 免费下载或者VIP会员专享资源能否直接商用？
- 本站所有资源版权均属于原作者所有，这里所提供资源均只能用于参考学习用，请勿直接商用。若由于商用引起版权纠纷，一切责任均由使用者承担。更多说明请参考 VIP介绍。
- 提示下载完但解压或打开不了？
- 你们有qq群吗怎么加入？
