Javascript bullet功能/射彈，2D遊戲

Question

我正在嘗試修改這段代碼，以便我的播放器能夠拍攝。我被困在玩家實際沒有拍攝任何東西的地方（在空間點擊時沒有創建圖像，雖然沒有列出任何錯誤），導彈只需要在畫布上向上行進。我寧願如果這個問題的任何答案也給了某種形式的學習，因爲我有興趣真正理解如何正確實施這個，只是需要某種快速修復。

Answer 1

當setInterval調用moveBullet時，this的值將不是子彈，它將是window。嘗試使用功能結合子彈如下：

setInterval(bullets[bullets.length - 1].moveBullet.bind(bullets[bullets.length - 1]), 25); 

看到This link獲取更多信息。

編輯：更新與修正更多：

你應該表現出你的瀏覽器（F12在大多數瀏覽器）的控制檯。這將列出您遇到的一些錯誤。

• drawBullet使用x和y未定義。改爲使用spaceShip.x和spaceShip.y。
• newBullet使用angle，這是沒有定義的任何地方
• newBullet試圖使用movebullet函數。它應該是moveBullet
• drawImage需要一個圖像，畫布或視頻元素 - 它不需要URL。

編輯（2）：更多修復程序 還有幾個問題需要解決。

• 一個是你還沒有改變對ctx.drawImage的調用來傳遞圖片元素而不是URL。
• 另一個是你的移動函數將x和y值乘以速度。這意味着一旦子彈移動，它就會離開屏幕。
• 第三個問題是render函數更新整個背景，這意味着即使它被繪製，子彈也會立即被覆蓋。您應該將實際的子彈圖移動到渲染功能。

我已經用這些修復程序中的一些更新了原始的JSFiddle，足以讓它繪製（沒有擦除）。你可以找到它here。我也將它改爲每空間按一個子彈（幫助調試）。

此刻，我只是讓它停止繪製背景，以便您可以看到子彈，但您應該看看將子彈繪圖（不移動）移動到渲染功能。