JavaScript鴨子狩獵bug

-2

我想創建一個使用JavaScript的鴨子狩獵遊戲。下面的代碼應該將鴨子圖像從左側移動到畫布的右側。似乎沒有任何語法錯誤，但在測試代碼時沒有任何反應。我將不勝感激任何幫助。JavaScript鴨子狩獵bug

var canvas = document.createElement("canvas"); 
 
var ctx = canvas.getContext("2d"); 
 
var time = Math.round(Math.random()*100); 
 
var ducs = []; 
 
canvas.width = 500; 
 
canvas.height = 500; 
 
document.body.appendChild(canvas); 
 

 

 
// Background image 
 
var bgReady = false; 
 
var bgImage = new Image(); 
 
bgImage.onload = function() { 
 
\t bgReady = true; 
 
}; 
 
bgImage.src = "images/DHbackground.jpg"; 
 

 
// Duck image 
 
var duckReady = false; 
 
var duckImage = new Image(); 
 
duckImage.onload = function() { 
 
\t duckReady = true; 
 
}; 
 
duckImage.src = "images/duck.png"; 
 

 
// Handle mouse and keyboard controls 
 
var mouseDown = { 
 
\t x: 0, 
 
\t y: 0, 
 
}; 
 

 
function getClickPosition(e) { 
 
    mouseDown.x = e.clientX; 
 
    mouseDown.y = e.clientY; 
 
}; 
 

 
canvas.addEventListener("click", getClickPosition, false); 
 

 
var reset = function(){ 
 
// To do: resets the game 
 
    }; 
 

 
// Draw everything 
 
var render = function() { 
 
\t if (bgReady) { 
 
\t \t ctx.drawImage(bgImage, 0, 0); 
 
\t } 
 
\t time = time-1; 
 
\t if (time < 0){ 
 
\t \t var duck = { 
 
    \t \t cur_X: 0, 
 
    \t \t cur_Y: Math.round(Math.random()*500), 
 
    \t \t final_X: 500, 
 
    \t \t final_Y: Math.round(Math.random()*500), 
 
\t \t }; 
 
\t \t time = Math.round(Math.random()*100); 
 
\t \t ducs.push(duck); 
 
\t \t for (var i = 0; i < ducs.Lenght; i++){ 
 
\t \t \t ctx.drawImage(duckImage, ducs[i].cur_X, ducs[i].cur_Y); 
 
\t \t \t console.log(ducs[i].cur_X); 
 
\t \t } 
 
\t } 
 

 
\t // Score 
 
\t ctx.fillStyle = "rgb(250, 250, 250)"; 
 
\t ctx.font = "24px Helvetica"; 
 
\t ctx.textAlign = "left"; 
 
\t ctx.textBaseline = "top"; 
 
\t ctx.fillText("Ducks killed: " + 3, 10, 10); 
 
}; 
 

 
var update = function (modifier) { 
 
\t for (var i = 0; i < ducs.Lenght; i++){ 
 
\t \t ducs[i].cur_X = ducs[i].cur_X + Math.floor(((ducs[i].final_X - ducs[i].cur_X)/500)+1); 
 
\t \t ducs[i].cur_Y = ducs[i].cur_Y + Math.floor(((ducs[i].final_Y - ducs[i].cur_Y)/500)+1); 
 
\t \t if (ducs[i].cur_X > 500){ 
 
\t \t \t ducs.splice(i, 1); 
 
\t \t } 
 
\t } 
 
}; 
 
\t 
 

 

 
// The main game loop 
 
var main = function() { 
 
\t var now = Date.now(); 
 
\t var delta = now - then; 
 

 
\t render(); 
 
\t update(delta/1000); 
 

 
\t then = now; 
 

 
\t // Request to do this again ASAP 
 
\t requestAnimationFrame(main); 
 
}; 
 

 
// Cross-browser support for requestAnimationFrame 
 
var w = window; 
 
requestAnimationFrame = w.requestAnimationFrame || w.webkitRequestAnimationFrame || w.msRequestAnimationFrame || w.mozRequestAnimationFrame; 
 

 
var then = Date.now(); 
 
reset(); 
 
main();

<!DOCTYPE html> 
 
<html> 
 
\t <head> 
 
    \t <meta charset="utf-8" /> 
 
    \t <title>Duck Hunt Pandy</title> 
 
\t </head> 
 
\t <body> 
 
\t \t <script src="js/game.js"> </script> 
 
\t </body> 
 
</html>

來源

2016-12-28 Michal Pándy

你應該設計你的回調，而不是本質上的投票在開始他們的狀態變化。 – alex

你能縮小一點嗎？閱讀關於製作[MCVE]的信息。 –

我發現了一個錯字：

var update = function (modifier) { for (var i = 0; i < ducs.Lenght; i++){

長度拼寫錯誤

來源

2016-12-28 19:52:31

第一個問題。你拼錯了長度。

for (var i = 0; i < ducs.length; i++){

其次是你需要確保在每次循環運行時畫鴨子。

if (time < 0){ 
    var duck = { 
     cur_X: 0, 
     cur_Y: Math.round(Math.random()*500), 
     final_X: 500, 
     final_Y: Math.round(Math.random()*400), 
    }; 
    time = Math.round(Math.random()*100); 
    ducs.push(duck);   
} 

for (var i = 0; i < ducs.length; i++){ 
    ctx.drawImage(duckImage, ducs[i].cur_X, ducs[i].cur_Y); 
    console.log(ducs[i].cur_X); 
}

第三個就是你需要時，他們到達終點去除鴨（你檢查500，但他們的飛行最終爲400）。

var duck = { 
    cur_X: 0, 
    cur_Y: Math.round(Math.random()*500), 
    final_X: 500, 
    final_Y: Math.round(Math.random()*400), 
}; 

if (ducs[i].cur_X > 500){ 
    ducs.splice(i, 1); 
}

https://jsfiddle.net/ygh6mfpw/6/

編輯：修正了鴨運動

來源

2016-12-28 19:56:49 Jonneh

你有什麼想法如何減慢它？我嘗試過使用： setTimeout（main（），4000）; 但它不工作。 –

@MichalPándy仔細觀察，問題實際上是你剛剛添加鴨時才畫鴨。 https://jsfiddle.net/ygh6mfpw/5/ – Jonneh

JavaScript鴨子狩獵bug

回答

相關問題