采用的物理引擎是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實現簡單的跑酷游戲附源碼下載，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
