iT邦幫忙

2024 iThome 鐵人賽

DAY 8
0
自我挑戰組

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

Day-8 磚塊遊戲(3) 球的反彈🥏

  • 分享至 

  • xImage
  •  

由於在昨天的程式碼中,只要球一跑出canvas外就會不見了。所以我今天要加一段程式碼讓他可以反彈回來,使得遊戲能夠繼續進行。在今天的過程中要使用邊界檢查的方式來判斷球有沒有碰觸到canvas邊緣。

方法:

每當物體移動時,檢查物體的邊界(球的邊界半徑)是否超出畫布的邊界。
當球體的邊界與畫布邊界重疊或超出時,視為碰撞。
這裡我們通過判斷球的中心點加上半徑是否超過了畫布的邊界來實現邊界檢查,進而完成今天的目標。

整體程式碼:https://ithelp.ithome.com.tw/upload/images/20240922/20169460EoJgSPs2Ai.png
https://ithelp.ithome.com.tw/upload/images/20240922/20169460KaZ0LHgjzb.png
https://ithelp.ithome.com.tw/upload/images/20240922/20169460ENaSmwHRVQ.png

執行結果:
https://ithelp.ithome.com.tw/upload/images/20240922/20169460LFbZJOe57h.pnghttps://ithelp.ithome.com.tw/upload/images/20240922/201694601tFCJSZQ8F.pnghttps://ithelp.ithome.com.tw/upload/images/20240922/20169460h3HngxlyKy.png
(由於無法放入整段影片,以截圖的方式來顯示球會在畫面中移動、反彈)

這就是我今天的成果~明天,我想要細微的調整球碰撞到邊界時的角度與方向,讓遊戲變得更加精緻和精確,提升使用品質!

參考資料:
https://developer.mozilla.org/zh-TW/docs/Games/Tutorials/2D_Breakout_game_pure_JavaScript/Bounce_off_the_walls


上一篇
Day-7 磚塊遊戲(2) 球的移動🎭
下一篇
Day-9 磚塊遊戲(4) 碰撞顏色變換🎨
系列文
初階網頁學習與製作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言