iT邦幫忙

2024 iThome 鐵人賽

DAY 20
0
自我挑戰組

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

Day-20 磚塊遊戲(15) 重新開始?🔮

  • 分享至 

  • xImage
  •  

在這次的遊戲更新中,我新增了一些功能,讓玩家可以重玩遊戲,並改善了遊戲結束時的體驗。首先,我加入了一個 reStart 函數,當玩家贏得比賽或輸掉所有生命時,這個函數會重設遊戲狀態,將球、板子、磚塊、分數與生命值恢復到初始值,讓遊戲可以重新開始。
https://ithelp.ithome.com.tw/upload/images/20241004/20169460QcKJVFv8XF.png
(reStart function)

另外,透過新增 showMessage 函數,遊戲結束時會顯示一個彈窗,詢問玩家是否要重玩遊戲。當所有磚塊被打破或所有生命耗盡時,遊戲會顯示相應的訊息,例如「Congrats! You win~」或「Game over, you lose」,並提供重新開始的選項。此外,我也修改了遊戲結束時的延遲機制,確保畫面流暢過渡到結束階段,防止遊戲畫面突然中斷。這些改動讓整個遊戲流程更具體驗感,增加了互動性。
https://ithelp.ithome.com.tw/upload/images/20241004/20169460NMNjNHrzsu.png
(showMessage function)
https://ithelp.ithome.com.tw/upload/images/20241004/20169460OmFfAtUroC.png
https://ithelp.ithome.com.tw/upload/images/20241004/201694605tYlXsO3pA.png
(顯示訊息)

執行結果:
https://ithelp.ithome.com.tw/upload/images/20241004/20169460yzDqOcpbgM.png
https://ithelp.ithome.com.tw/upload/images/20241004/20169460e9KuOt29Av.png
(不論遊戲成功或失敗,彈窗都會跳出要不要重新開始)
https://ithelp.ithome.com.tw/upload/images/20241004/201694603tIf71mcJL.png
(點選重新開始後,板子、球、分數、磚塊與生命皆重設為初值)

今天的程式碼:
https://github.com/HUIYUK/iron-race/blob/main/day%2020.html


上一篇
Day-19 磚塊遊戲(14) 獲勝👑
下一篇
Day-21 磚塊遊戲(16) 遊戲存檔📦
系列文
初階網頁學習與製作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言