iT邦幫忙

2024 iThome 鐵人賽

DAY 11
0
自我挑戰組

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

Day-11 磚塊遊戲(6) 擊球板子的移動🏹

  • 分享至 

  • xImage
  •  

我今天新增了板子(board)移動的程式碼,以便玩家可以控制板子的左右移動來接住彈跳的球。首先,我定義了 rightPressedleftPressed 兩個布林變數,分別用來追蹤玩家是否按下右鍵或左鍵。接著,透過 keydownkeyup 事件監聽器,更新這兩個變數的值。
在繪製畫布的 draw 函數中檢查這兩個變數的狀態。如果玩家按下右鍵且板子的 X 座標小於畫布的寬度減去板子的寬度,則將板子的 X 座標向右移動。相對地,若按下左鍵且板子的 X 座標大於零,則將其向左移動。這樣一來,玩家就可以透過鍵盤控制板子的移動,進而接住彈跳的球,使遊戲變得更加互動有趣。

新增程式碼:
https://ithelp.ithome.com.tw/upload/images/20240925/201694608ZISJIFytJ.png
https://ithelp.ithome.com.tw/upload/images/20240925/201694605a6zWERh9p.png
執行結果:
https://ithelp.ithome.com.tw/upload/images/20240925/20169460pAhbD8oMEW.png
https://ithelp.ithome.com.tw/upload/images/20240925/20169460xS0WY6spgU.png
明天,我要加入程式碼使球碰到板子時會變換顏色,敬請期待!

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


上一篇
Day-10 磚塊遊戲(6) 擊球板子繪製🏏
下一篇
Day-12 磚塊遊戲(7) 擊球板子的顏色變換🎰
系列文
初階網頁學習與製作30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言