Javascript - funktioniert nicht für Schleife

Ich bin Snake-Spiel Codierung, aber ich habe ein Problem.Javascript - funktioniert nicht für Schleife

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>

Die für Innere Aktualisierungsschleife wird nicht funktionieren loggin, so dass es aussieht wie es nicht funktioniert.

Ich weiß nicht, was ich falsch gemacht habe, aber ich denke, es ist nur ein weiterer dummer Fehler. Bitte kritisiere mich nicht so sehr, ich bin nur nooby 14 y.o. Programmierer. Dank in Beratung, Tomas ;-)

Quelle

2017-07-22 Tomáš Hobza

Es scheint einen Tippfehler zu geben, 'length'? –

Auf einem ersten Blick ist es nur ein Tippfehler, weil Sie x.lenght statt x.length schrieben.

Quelle

2017-07-22 16:32:17 Arrabidas92

Danke. Wie ich geschrieben habe ... dummer Fehler. : D –

Ok, ich habe den Code geändert, aber jetzt die Protokollierung "i" wächst, aber es sollte reduzieren. Weißt du, warum? Danke in Beratung. –

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>

Ich mochte Ihren Code wirklich, vor allem dafür, wie einfach es ist! Also habe ich hier eine etwas verbesserte Version hinzugefügt. Dies sind die Fragen, die ich bemerkte:

Spoiler

In der keyDown Funktion, durch die Bedingung Hinzufügen vorherige Geschwindigkeit zu überprüfen, können Sie die Schlange verhindern, dass seine Richtung umkehrt.
In update Funktion sollten Sie den Speicherort von x[0] und y[0] nur aktualisieren, nachdem die "Tail" -Elemente aktualisiert wurden. Andernfalls hätten Sie nicht den neuen Standort für das Element x[1] und y[1].
Sie müssen möglicherweise auch eine if-Bedingung für (xSpeed + ySpeed) != 0 um die Schleife setzen, die die Position der Tail-Elemente aktualisiert. Dies würde dazu beitragen sicherzustellen, dass die Schlange nicht in ein einzelnes Element verwürfelt wird, bevor der Benutzer mit ihr interagiert.

Quelle

2017-07-22 17:08:30 Nisarg

Javascript - funktioniert nicht für Schleife

Antwort

Verwandte Themen