iT邦幫忙

2024 iThome 鐵人賽

DAY 18
0
自我挑戰組

初階網頁學習與製作系列 第 18

Day-18 磚塊遊戲(13) 生命系統🧰

  • 分享至 

  • xImage
  •  

今天我在磚塊遊戲中新增了生命系統。這個系統可以讓玩家在球碰到畫布底部而沒有碰到下方的板子時,失去一條生命。在程式碼中,我定義了一個 lives 變數來追蹤剩餘生命數,初始值設為 3。當球跌落到畫布底部且未碰到板子時, lives 變數減 1,並檢查是否仍然有生命可用。如果有生命,則將球和板子重置到起始位置;如果生命數用完,則結束遊戲並顯示 「GAME OVER」 的訊息。
我繪製畫面時新增了一個 drawLives 函數,用於顯示目前的生命數。這樣玩家就能清楚了解自己還剩多少次機會進行遊戲。此外,我在遊戲過程中加入了更新生命數的邏輯,讓整個遊戲變得更具挑戰性和互動性。這些新增功能使得遊戲更具吸引力,並提高了玩家的遊戲體驗,讓玩家需要更加專注以保護自己的生命。

新增程式碼:
https://ithelp.ithome.com.tw/upload/images/20241002/201694609G4Wmyam4l.png
https://ithelp.ithome.com.tw/upload/images/20241002/20169460fai6q379vt.png

執行結果:
https://ithelp.ithome.com.tw/upload/images/20241002/20169460AFZzfmLqea.png
(生命值為三,但板子並沒有接到球)
https://ithelp.ithome.com.tw/upload/images/20241002/20169460ywXiJaFZrM.png
(生命值-1,板子、球歸中)

可以點開下列網址自己玩玩看~~:
https://github.com/HUIYUK/day-18/blob/main/cjc116%20(2).html

參考資料:
https://developer.mozilla.org/en-US/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Finishing_up


上一篇
Day-17 磚塊遊戲(12) 移動速度的改變🛶
下一篇
Day-19 磚塊遊戲(14) 獲勝👑
系列文
初階網頁學習與製作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言