Phaser.js實現(xiàn)簡單的跑酷游戲附源碼下載
更新時間：2018年10月26日 11:56:49 作者：ProsperLee
這篇文章主要介紹了Phaser.js實現(xiàn)簡單的跑酷游戲附源碼下載,需要的朋友可以參考下
采用的物理引擎是Phaser.js
官網(wǎng)地址：http://phaser.io/
在這里對此引擎不做過多介紹（因為我也是小白，嘿嘿）
效果展示：
源碼（詳細源碼圖片資源可點擊文章下方或屏幕右上方的github鏈接進行clone）
1.創(chuàng)建游戲舞臺
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); // 創(chuàng)建游戲
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.將資源創(chuàng)建到舞臺上
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');
// 添加分數(shù)文本
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); // 設(shè)置阻力
player.setCollideWorldBounds(true); // 禁止玩家走出世界
// 敵人
enemys = this.physics.add.group();
enemys.children.iterate(function (child) {
child.setCollideWorldBounds(false);
});
// 動態(tài)創(chuàng)建敵人
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.在創(chuàng)建場景過程中寫鍵盤監(jiān)聽事件
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.寫碰撞函數(shù)（當玩家與敵人碰撞的結(jié)果）
var gameOver = false; // 游戲結(jié)束
function hitBomb(player, enemys) {
this.physics.pause();
clearInterval(enemyTimer);
clearInterval(distanceTimer);
player.setTint(0xff0000);
gameOver = true;
alert('游戲結(jié)束,您跑了' + distance + 'm');
}
6.在update函數(shù)中寫時間的執(zhí)行（須注意的是此函數(shù)每一幀都在執(zhí)行，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); // 創(chuàng)建游戲
var distanceText; // 路程文本
var distance = 0; // 路程
var platforms; // 地面
var player; // 玩家
var enemy; // 敵人
var enemys; // 敵人們
var gameOver = false; // 游戲結(jié)束
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
});
}
// 將資源展示到畫布創(chuàng)建資源
function create() {
// 添加畫布背景
this.add.image(400, 200, 'sky');
// 添加分數(shù)文本
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); // 設(shè)置阻力
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();
// 動態(tài)創(chuàng)建敵人
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);
}
// 一直執(zhí)行
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('游戲結(jié)束,您跑了' + 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
總結(jié)
以上所述是小編給大家介紹的Phaser.js實現(xiàn)簡單的跑酷游戲附源碼下載，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！
相關(guān)文章
這篇文章主要介紹了微信小程序之判斷頁面滾動方向的示例代碼，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了嵌入式iframe子頁面與父頁面js通信的方法,實例分析了嵌入式iframe子頁面與父頁面js通信的常用技巧,非常具有實用價值,需要的朋友可以參考下2015-01-01
JavaScript計時器用法分析【setTimeout和clearTimeout】
這篇文章主要介紹了JavaScript計時器用法,結(jié)合實例形式分析了setTimeout和clearTimeout函數(shù)的具體使用技巧,需要的朋友可以參考下2017-01-01
老生常談JavaScript面向?qū)ο蠡A(chǔ)與this指向問題
下面小編就為大家?guī)硪黄仙Ｕ凧avaScript面向?qū)ο蠡A(chǔ)與this指向問題。小編覺得挺不錯的，現(xiàn)在就分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2017-10-10
JavaScript中利用構(gòu)造器函數(shù)模擬類的方法
JavaScript中沒有類的概念，所以其在對象創(chuàng)建方面與面向?qū)ο笳Z言有所不同。這篇文章主要介紹了JavaScript中利用構(gòu)造器函數(shù)模擬類的方法，文中給出了詳細的示例代碼和介紹，需要的朋友可以參考下，下面一起看看吧。2017-02-02
BootStrapTable 單選及取值的實現(xiàn)方法
學習bootstrapTable 一直沒有找到 單選框的選定的和取值的教程,接下來通過本文給大家分享BootStrapTable 單選及取值的實現(xiàn)方法，非常不錯，需要的朋友參考下2017-01-01
JavaScript使用面向?qū)ο髮崿F(xiàn)的拖拽功能詳解
這篇文章主要介紹了JavaScript使用面向?qū)ο髮崿F(xiàn)的拖拽功能,結(jié)合實例形式詳細分析了javascript基于面向?qū)ο蟮耐献Чδ軐崿F(xiàn)思路、原理與具體操作技巧,需要的朋友可以參考下2019-06-06
這篇文章主要介紹了一文讓你快速了解JavaScript棧，棧全稱為堆棧，是一種先進后出的的數(shù)據(jù)結(jié)構(gòu)，棧中只有兩種基本操作，也就是插入和刪除，也就是入棧和出棧操作，棧只有一端可以進行入棧和出棧操作，我們將其稱為棧頂，另一端稱其為棧底2022-07-07
這篇文章主要為大家詳細介紹了微信小程序?qū)崿F(xiàn)tab點擊切換，不滑動，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-07-07
這篇文章主要介紹了JavaScript中省略元素對數(shù)組長度的影響,本文給大家介紹的非常詳細具有參考借鑒價值，需要的朋友可以參考下2016-10-10