javascript - 不能用於循環

我在編碼貪吃蛇遊戲，但我有一個問題。javascript - 不能用於循環

var ctx = document.getElementById('ctx').getContext('2d'); 
 
var canvas = document.getElementById('ctx'); 
 

 
var y = [240, 230, 220]; 
 
var x = [240, 240, 240]; 
 

 
var xSpeed = 0; 
 
var ySpeed = 0; 
 

 
function load() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    for (p = 0; p < x.length; p++) { 
 
     ctx.fillStyle = "black"; 
 
     ctx.fillRect(x[p], y[p], 10, 10); 
 
    } 
 
} 
 

 
function keyDown() { 
 
    var key = event.keyCode; /*getting keyCode of pressed key*/ 
 
    ctx.fillStyle = "black"; /*color of rectangle*/ 
 
    switch (key) { 
 
     case 39: //RIGHT 
 
      xSpeed = 10; 
 
      ySpeed = 0; 
 
      break; 
 
     case 37: //LEFT 
 
      xSpeed = -10; 
 
      ySpeed = 0; 
 
      break; 
 
     case 38: //UP 
 
      xSpeed = 0; 
 
      ySpeed = -10; 
 
      break; 
 
     case 40: //DOWN 
 
      xSpeed = 0; 
 
      ySpeed = 10; 
 
      break; 
 
    } 
 
} 
 

 
function update() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    if (x[0] >= 490) { 
 
     xSpeed = 0; 
 
    } else if (y[0] >= 490) { 
 
     ySpeed = 0; 
 
    } 
 

 
    //console.clear(); 
 

 
    y[0] += ySpeed; 
 
    x[0] += xSpeed; 
 

 
    for (i = x.lenght; i >= 0; i--) { 
 
     y[i] = y[i - 1]; 
 
     x[i] = x[i - 1]; 
 
     console.log(i); 
 
    } 
 

 

 
    for (i = 0; i < x.length; i++) { 
 
     ctx.fillStyle = "black"; 
 
     ctx.fillRect(x[i], y[i], 10, 10); 
 
     //console.log("y= " + y[i]); 
 
     //console.log("x= " + x[i]); 
 
    } 
 

 
    //console.log(xSpeed); 
 
    //console.log(ySpeed); 
 
} 
 

 
setInterval(update, 500);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="shortcut icon" href="#"> 
 
    <title>The Snake Game</title> 
 
</head> 
 
<style> 
 
    #ctx { 
 
     position: absolute; 
 
     /*it can be fixed too*/ 
 
     left: 0; 
 
     right: 0; 
 
     top: 0; 
 
     bottom: 0; 
 
     margin: auto; 
 
     /*this to solve "the content will not be cut when the window is smaller than the content":*/ 
 
     max-width: 100%; 
 
     max-height: 100%; 
 
     overflow: auto; 
 
    } 
 
</style> 
 

 
<body onkeydown="keyDown()" onload="load()"> 
 
    <center><canvas id="ctx" width="500" height="500" style="border:1px solid black"></canvas></center> 
 
</body> 
 
<script src="script.js"></script> 
 

 
</html>

的用於更新的內部循環功能並不洛，所以它看起來像它不工作。

for (i = x.lenght; i >= 0; i--) { 
    y[i] = y[i - 1]; 
    x[i] = x[i - 1]; 
    console.log(i); 
}

我不知道我做錯了什麼，但我認爲這只是另一個愚蠢的錯誤。請不要批評我這麼多，我只是不知名的14歲。程序員。謝謝諮詢，托馬斯;-)

來源

2017-07-22 Tomáš Hobza

似乎有一個錯字'lenght'？ –

在一個乍一看，它只是一個打字錯誤，因爲你寫x.lenght，而不是x.length。

來源

2017-07-22 16:32:17 Arrabidas92

謝謝。正如我寫的......愚蠢的錯誤。：D –

好吧，我已經改變了代碼，但現在日誌「我」正在增長，但它應該在減少。你知道爲什麼嗎？謝謝你的建議。 –

var ctx = document.getElementById('ctx').getContext('2d'); 
 
var canvas = document.getElementById('ctx'); 
 

 
var y = [240, 230, 220]; 
 
var x = [240, 240, 240]; 
 

 
var xSpeed = 0; 
 
var ySpeed = 0; 
 

 
function load() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    for (p = 0; p < x.length; p++) { 
 
     ctx.fillStyle = "black"; 
 
     ctx.fillRect(x[p], y[p], 10, 10); 
 
    } 
 
} 
 

 
function keyDown() { 
 
    var key = event.keyCode; /*getting keyCode of pressed key*/ 
 
    ctx.fillStyle = "black"; /*color of rectangle*/ 
 
    
 
    // Prevent the snake from going in the reverse direction. 
 
    switch (key) { 
 
     case 39: //RIGHT 
 
      if(xSpeed != -10) { 
 
       xSpeed = 10; 
 
       ySpeed = 0; 
 
      } 
 
      break; 
 
     case 37: //LEFT 
 
      if(xSpeed != 10) { 
 
       xSpeed = -10; 
 
       ySpeed = 0; 
 
      } 
 
      break; 
 
     case 38: //UP 
 
      if(ySpeed != 10) { 
 
       xSpeed = 0; 
 
       ySpeed = -10; 
 
      } 
 
      break; 
 
     case 40: //DOWN 
 
      if(ySpeed != -10) { 
 
       xSpeed = 0; 
 
       ySpeed = 10; 
 
      } 
 
      break; 
 
    } 
 
} 
 

 
function update() { 
 
    ctx.clearRect(0, 0, canvas.width, canvas.height); 
 
    if (x[0] >= 490) { 
 
     xSpeed = 0; 
 
    } else if (y[0] >= 490) { 
 
     ySpeed = 0; 
 
    } 
 

 
    if((xSpeed + ySpeed) != 0) { 
 
     for(var idx = x.length - 1; idx >= 1; idx--) { 
 
      y[idx] = y[idx - 1]; 
 
      x[idx] = x[idx - 1]; 
 
     } 
 
    } 
 
    
 
    y[0] += ySpeed; 
 
    x[0] += xSpeed; 
 
    
 
    for (i = 0; i < x.length; i++) { 
 
     ctx.fillStyle = "black"; 
 
     ctx.fillRect(x[i], y[i], 10, 10); 
 
    } 
 
} 
 

 
setInterval(update, 500);

<!DOCTYPE html> 
 
<html> 
 

 
<head> 
 
    <link rel="shortcut icon" href="#"> 
 
    <title>The Snake Game</title> 
 
</head> 
 
<style> 
 
    #ctx { 
 
     position: absolute; 
 
     /*it can be fixed too*/ 
 
     left: 0; 
 
     right: 0; 
 
     top: 0; 
 
     bottom: 0; 
 
     margin: auto; 
 
     /*this to solve "the content will not be cut when the window is smaller than the content":*/ 
 
     max-width: 100%; 
 
     max-height: 100%; 
 
     overflow: auto; 
 
    } 
 
</style> 
 

 
<body onkeydown="keyDown()" onload="load()"> 
 
    <center><canvas id="ctx" width="500" height="500" style="border:1px solid black"></canvas></center> 
 
</body> 
 
<script src="script.js"></script> 
 

 
</html>

我真的很喜歡你的代碼，特別是因爲它是多麼簡單！所以我在這裏添加了一個稍微改進的版本。這是我發現的問題：

擾流板

在keyDown功能，通過增加檢查以前的速度可以防止蛇從扭轉其方向的條件。
在update函數中，只有在更新「tail」元素後，才應該更新x[0]和y[0]的位置。否則，您將不會擁有x[1]和y[1]元素的新位置。
此外，您可能需要在用於更新尾部元素位置的循環周圍放置一個if條件(xSpeed + ySpeed) != 0。這有助於確保蛇在用戶與之交互之前不會混雜成單個元素。

來源

2017-07-22 17:08:30 Nisarg

javascript - 不能用於循環

回答

相關問題