摘要:回顧上一節我們完成了游戲核心場景的大部分工作,能操控主角,能隨機掉落蘋果了。于是我們修改之前的方法,也就是接到蘋果后的方法。接到炸彈后結束和蘋果掉地上的調用方式是一樣的。
回顧
上一節我們完成了游戲核心場景play的大部分工作,能操控主角,能隨機掉落蘋果了。那么這一節我們來完成游戲剩余的部分,主要是計算分數、如何結束游戲等等。
正式開始主角加入物理運動
檢測接觸事件
接到蘋果后,讓蘋果消失,并加分
對主角的修改:
game.physics.enable(man); // 加入物理運動 man.body.allowGravity = false; // 清除重力影響
檢測接觸事件要寫在play場景的update生命周期內,意思為每次更新視圖都會去檢測主角和蘋果是否有接觸,有的話,則執行pickApple方法。
this.update = function() { // 監聽接觸事件 game.physics.arcade.overlap(man, apples, pickApple, null, this); }
接觸事件則非常簡單,調用apple的kill方法,則可以讓蘋果從場景中清除。同時,我們更新一下分數。
// 接觸事件 function pickApple(man, apple) { apple.kill(); title.text = ++score; }
示例代碼:https://jsfiddle.net/Vincent_...
檢測蘋果與場景邊緣的接觸
一旦接觸,則游戲結束,跳轉到結束場景
布置結束場景,并顯示分數
為結束場景添加點擊事件,點擊后再玩一次
onWorldBounds屬性可設置為一個Phaser.Signal對象,當開啟了collideWorldBounds并且接觸到場景邊緣時,將觸發Signal的事件。另外,這個特殊的Signal提供了上下左右四個值來讓我們判斷物體到底接觸的是哪條邊,考慮到有些蘋果會接觸到左右兩邊,我們只在和下邊界接觸的時候才結束游戲。
// 設置蘋果與游戲邊緣碰撞, apple.body.collideWorldBounds = true; apple.body.onWorldBounds = new Phaser.Signal(); apple.body.onWorldBounds.add(function(apple, up, down, left, right) { if (down) { apple.kill(); game.state.start("over", true, false, score); } });
布置結束場景,和之前布置其他場景一樣,添加背景、文本等等。不同的是這次多了init這個生命周期,主要是由于在play場景中跳轉到這個場景時會帶上score,這個score會傳入init這個生命周期的方法中。
// 結束場景 over: function() { var score = 0; this.init = function() { score = arguments[0]; } this.create = function() { // 添加背景 var bg = game.add.image(0, 0, "bg"); bg.width = game.world.width; bg.height = game.world.height; // 添加文本 var title = game.add.text(game.world.centerX, game.world.height * 0.25, "游戲結束", { fontSize: "40px", fontWeight: "bold", fill: "#f2bb15" }); title.anchor.setTo(0.5, 0.5); var scoreStr = "你的得分是:"+score+"分"; var scoreText = game.add.text(game.world.centerX, game.world.height * 0.4, scoreStr, { fontSize: "30px", fontWeight: "bold", fill: "#f2bb15" }); scoreText.anchor.setTo(0.5, 0.5); } }
最后我們在結束場景添加一個點擊事件,點擊后跳轉到play場景,再玩一次。
var remind = game.add.text(game.world.centerX, game.world.height * 0.6, "點擊任意位置再玩一次", { fontSize: "20px", fontWeight: "bold", fill: "#f2bb15" }); remind.anchor.setTo(0.5, 0.5); // 添加點擊事件 game.input.onTap.add(function() { game.state.start("play"); });
示例代碼:https://jsfiddle.net/Vincent_...
為不同蘋果設置不同的得分
接到蘋果時添加對應的得分圖片到場景中
為得分圖片添加過渡效果
先來介紹一下Phaser的過渡:
要使用過渡,首先要創建過渡對象,傳入的是要應用過渡效果的對象,例如apple。
// 創建過渡對象 game.add.tween(obj);
然后使用得最多的是Tween的to方法,也就是過渡到指定狀態的方法??梢灾付ㄟ^渡時間曲線,延遲、是否重復、過渡時間等等參數,使用Tween已經可以實現大部分的動畫效果。
于是我們修改之前的pickApple方法,也就是接到蘋果后的方法。
function pickApple(man, apple) { var point = 1; var img = "one"; if (apple.type === "red") { point = 3; img = "three"; } else if (apple.type === "yellow") { point = 5; img = "five"; } // 添加得分圖片 var goal = game.add.image(apple.x, apple.y, img); var goalImg = game.cache.getImage(img); goal.width = apple.width; goal.height = goal.width / (goalImg.width / goalImg.height); goal.alpha = 0; // 添加過渡效果 var showTween = game.add.tween(goal).to({ alpha: 1, y: goal.y - 20 }, 100, Phaser.Easing.Linear.None, true, 0, 0, false); showTween.onComplete.add(function() { var hideTween = game.add.tween(goal).to({ alpha: 0, y: goal.y - 20 }, 100, Phaser.Easing.Linear.None, true, 200, 0, false); hideTween.onComplete.add(function() { goal.kill(); }); }); // 更新分數 score += point; title.text = score; // 清除蘋果 apple.kill(); }
示例代碼:https://jsfiddle.net/Vincent_...
隨機掉落炸彈
加入接到蘋果或炸彈的音效
接到炸彈后游戲結束
要想隨機掉落炸彈非常簡單,只需要在之前的appleTypes里面加入bomb即可,同時如果有其他東西(例如梨子)要加入的話也可以這樣。
var appleTypes = ["green", "red", "yellow", "bomb"];
同時,由于我們不接炸彈,因此炸彈掉到地上也不會導致游戲結束,因此修改一下代碼:
apple.body.onWorldBounds.add(function(apple, up, down, left, right) { if (down) { apple.kill(); if (apple.type !== "bomb") game.state.start("over", true, false, score); } });
接到蘋果和炸彈時播放音效,這個很簡單,直接調用音頻對象的play方法即可。接到炸彈后結束和蘋果掉地上的調用方式是一樣的。我們繼續來修改pickApple方法:
function pickApple(man, apple) { if (apple.type === "bomb") { // 播放音效 bombMusic.play(); game.state.start("over", true, false, score); } else { var point = 1; var img = "one"; if (apple.type === "red") { point = 3; img = "three"; } else if (apple.type === "yellow") { point = 5; img = "five"; } // 添加得分圖片 var goal = game.add.image(apple.x, apple.y, img); var goalImg = game.cache.getImage(img); goal.width = apple.width; goal.height = goal.width / (goalImg.width / goalImg.height); goal.alpha = 0; // 添加過渡效果 var showTween = game.add.tween(goal).to({ alpha: 1, y: goal.y - 20 }, 100, Phaser.Easing.Linear.None, true, 0, 0, false); showTween.onComplete.add(function() { var hideTween = game.add.tween(goal).to({ alpha: 0, y: goal.y - 20 }, 100, Phaser.Easing.Linear.None, true, 200, 0, false); hideTween.onComplete.add(function() { goal.kill(); }); }); // 更新分數 score += point; title.text = score; // 清除蘋果 apple.kill(); // 播放音效 scoreMusic.play(); } }
示例代碼:https://jsfiddle.net/Vincent_...
大功告成游戲終于完成了它的邏輯,算是一個完整的游戲了。當然了,效果遠未達到理想,要說的話,游戲水非常深,這個系列的教程只是從零到一,引導大家接觸并上手Phaser.js。
這里可以拋出一些優化的方向,大家也可以當做Phaser的練習題目去做:
游戲中字體的更換
地面應該和小恐龍底部持平,而非屏幕底部,如何實現?
現在三種蘋果和炸彈的出現概率是隨機的,如何調整它們各自的出現概率?
現在蘋果和炸彈出現的時間間隔是固定的,如何隨著游戲進行加快節奏?
如何調整游戲難度梯度?
現在炸彈和蘋果有可能會相鄰出現,導致很難接到蘋果而不碰到炸彈,如何避免?
……
本來沒想寫這么多點的,一不小心??梢娪螒騼灮目臻g還是很大的,希望大家能繼續發掘Phaser.js的潛力,做出更多的優秀的小游戲~
Github地址:https://github.com/VincentPat...
掃描下面二維碼的話也可以用手機查看效果了:
未完待續...?Chapter 1 - 認識Phaser.js
Chapter 2 - 搭建游戲的骨架
Chapter 3 - 加載游戲資源
Chapter 4 - 游戲即將開始
如果接下來有時間整理的話,會補充一篇Phaser.js的實戰技巧和注意事項。本系列文章寫作純粹個人喜好,如有寫得不嚴謹或不正確的地方,還請多多包涵。第一次花這么長時間寫技術分享,還是用那句話勉勵自己:
如果你喜歡這幾篇文章,或者說從零到一這個系列,給我點個贊,我就心滿意足了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/91696.html
摘要:經過這一節,萬事俱備只欠東風,下一節我們就來完成這個游戲的剩余邏輯,比如接蘋果加分,接到炸彈或蘋果掉到地上游戲結束,還有加入更豐富的音效。 showImg(https://segmentfault.com/img/bVM22H?w=900&h=500); 回顧 上一節我們介紹了加載場景,并利用加載好的資源,豐富了開始界面。現在點擊屏幕后仍是一片黑暗,那么,這一節我們就來完成游戲最核心的...
摘要:由于公司項目轉型,需要創造一個小游戲平臺,需要使用一個比較成熟的前端游戲框架來快速開發小游戲。僅支持開發游戲,因為專注,所以高效。早在年的光棍節前一天晚上,這個游戲就誕生了。原型是一個之前很火的非常魔性的小游戲,叫尋找程序員。 showImg(https://segmentfault.com/img/bVMGY5?w=900&h=500); 寫在前面 實際上我從未想過我會接觸到H5小游...
閱讀 623·2023-04-26 02:08
閱讀 2654·2021-11-18 10:02
閱讀 3460·2021-11-11 16:55
閱讀 2341·2021-08-17 10:13
閱讀 2901·2019-08-30 15:53
閱讀 685·2019-08-30 15:44
閱讀 2545·2019-08-30 11:10
閱讀 1755·2019-08-29 16:57