手把手教你制作一款簡單的小游戲【web前端】

時間：2023-09-12 16:18:01 | 來源：網(wǎng)站運營

時間：2023-09-12 16:18:01 來源：網(wǎng)站運營

手把手教你制作一款簡單的小游戲【web前端】：想必大家小時候都聽說過或玩過4399小游戲（這句話好像暴露了年齡～），在當時電腦不算很普及，沒有那么多網(wǎng)游，大型單機游戲的時代，數(shù)量眾多且種類豐富的網(wǎng)頁小游戲使我們的童年增添了非常多的樂趣。

諸如黃金礦工，狂扁小朋友這些耳熟能詳?shù)男∮螒?，在當時都是由Adobe公司下的Flash動畫標準來開發(fā)的。

可在2017年時Adobe公司宣布，出于安全和可靠性的原因，將于2020年年底，也就是今年內(nèi)正式停止支持Flash。

Flash是20多年前誕生多，它曾是開發(fā)者們最受青睞的技術(shù)之一，被用于開發(fā)游戲，播放視頻在各大瀏覽器中，如今已成為時代的眼淚，取而代之的便是HTML5+JavaScript技術(shù)。

在這里向大家安利一下當今比較熱門的前端渲染引擎PixiJS（github收藏30k），它使用了HTML5+JS+WebGL封裝而成，是一個非常強大的2D渲染引擎，可以用十分高效的性能來完成當年Flash所能完成的游戲開發(fā)任務。

下面，我們便用PixiJS來制作一個簡單的網(wǎng)頁小游戲。

該游戲的玩法很簡單，控制我們的角色，躲避怪物，獲取寶箱拿到出口處便可獲得勝利。

1. 首先，我們需要制作好游戲所需的圖像素材，如下圖：




上圖中把該小游戲中的所有素材：角色，寶箱，怪物，出口都整合到了一張圖中，然后通過一個JSON數(shù)據(jù)文件（該文件內(nèi)保存了各個素材的大小和位置）來從圖片中獲取你想要的素材。




2. 在js代碼中導入上述的圖片和JSON文件。接著調(diào)用PixiJS的API，創(chuàng)建一個PixiJS應用，即我們的游戲舞臺，再執(zhí)行setup函數(shù)對游戲進行初始化




3. 在setup初始化函數(shù)中，創(chuàng)建兩個游戲場景，因為游戲分為游戲中的場景和游戲結(jié)束時的場景










然后，根據(jù)JSON文件分別提取出圖片中的素材，放置到場景一中。




4. 然后，循環(huán)創(chuàng)建多個怪物在場景一中，并隨機賦予它們初始位置和速度，干擾玩家獲取寶箱。




5. 制作血條，當玩家碰撞到怪物時便會損失一定的血量，血條為空則游戲結(jié)束，展示場景二。




6. 綁定鍵盤事件，這里給出了左方向鍵的實現(xiàn)方式，其他方向同理。




7. 做好上述準備后，便調(diào)用play函數(shù)使游戲開始，該函數(shù)將會被每秒執(zhí)行60次（這得益于webGL強大的性能），直到游戲結(jié)束。




8. 在play函數(shù)中，主要功能為：

（1）監(jiān)聽鍵盤事件，改變玩家的位置。




（2）監(jiān)聽怪物的位置變化，當怪物碰撞到墻時會直接朝著反方向移動。




（3）碰撞檢測：

①　檢測玩家是否碰撞到怪物。碰到則臨時改變透明度并減少血量，當血量小于0時則游戲結(jié)束










②　玩家是否碰撞到寶箱。當玩家碰到寶箱時，寶箱將跟隨玩家一起移動。







③　寶箱是否碰撞到出口。當寶箱碰到出口，即玩家?guī)е鴮毾涞匠隹跁r，游戲結(jié)束。




完成了上面的代碼，一款簡單的網(wǎng)頁小游戲就做好了，最終效果如下圖所示。大家是不是感覺很簡單～該游戲demo出自PixiJS的官方教程。

（https://github.com/Zainking/learningPixi#casestudy），感興趣的小伙伴們可以去pixi官網(wǎng)查看更多高級炫酷的demo。

只要發(fā)揮你的想象力，便可以制作出許多有意思的游戲~




最后別忘了關(guān)注專欄噢~下期干貨滿滿，等你來閱讀