Question

我正在编写Snake Game，但我有一个问题。

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循环不是loggin，所以它看起来不起作用。

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

我不知道我做错了什么，但我认为这只是另一个愚蠢的错误。请不要批评我这么多，我只是14点钟。程序员。谢谢你的建议，托马斯; - ）

Answer 1

第一眼看来，这只是一个打字错误，因为你写了x.lenght而不是x.length。

Answer 2

＆＃13;

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);

＆＃13;

<!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>

＆＃13;

我真的很喜欢你的代码，特别是它的简单程度！所以我在这里添加了一个稍微改进的版本。这些是我注意到的问题：

扰流板

在keyDown函数中，通过添加检查先前速度的条件，可以防止蛇逆转方向。
在update函数中，您应该在更新＆＃34; tail＆＃34;之后更新x[0]和y[0]的位置。元素。否则，您将无法获得x[1]和y[1]元素的新位置。
此外，您可能需要在更新尾部元素位置的循环周围放置(xSpeed + ySpeed) != 0的if条件。这将有助于确保蛇在用户与之交互之前不会混杂成单个元素。

javascript - 不适用于循环

2 个答案: