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 - 不能用于循环

回答

相关问题