两个不同的循环-都是don'不起作用

2 different loops - both don't work

本文关键字：don 都是 不起作用 循环 两个      更新时间：2023-11-17

我正在开发自己的简单snake版本：）

因此，有一块画布上有一个矩形。当我点击"向上"时，矩形应该向上移动，当我按下"向下"时，它应该向下移动，以此类推。

但我不想总是停留在特定的按钮上。我希望每当按键时都能开始循环。每当按下另一个键时，循环就会停止，这将开始一个新的循环。

到目前为止，我尝试了两个不同的版本：一个带有while循环，另一个带有setTimeout（）函数。两者都不能按我希望的那样工作。While（）只是将矩形放在y轴的开头，而setTimeout（）似乎不会再次调用自己。我的错在哪里？

window.onload = function() {
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    var x_coor = 230;
    var y_coor = 230;
    ctx.fillStyle = "darkgrey";
    ctx.fillRect(0, 0, canvas.height, canvas.width);
    ctx.fillStyle = "black";
    ctx.fillRect(x_coor, y_coor, 20, 20);
    var move = {
      x_koor: 230,
      y_koor: 230,
      whichKey: function(event) {
        var taste = event.keyCode;
        if (taste == 38) { // up
          this.up();
        } else if (taste == 40) { // down
          this.down();
        } else if (taste == 37) { // left
          x_koor = this.left();
        } else if (taste == 39) { // right
          x_koor = this.right();
        }
      },
      up: function() {
        while (this.y_koor > 0) {
          this.y_koor -= 1;
          ctx.fillStyle = "darkgrey";
          ctx.fillRect(0, 0, canvas.height, canvas.width);
          ctx.fillStyle = "black";
          ctx.fillRect(this.x_koor, this.y_koor, 20, 20);
        }
      },
      down: function() {
        if (y_coor < canvas.height - 20) {
          y_coor += 1;
          x_coor = x_coor;
          ctx.fillStyle = "darkgrey";
          ctx.fillRect(0, 0, canvas.height, canvas.width);
          ctx.fillStyle = "black";
          ctx.fillRect(x_coor, y_coor, 20, 20);
          window.setTimeout(this.down, 10);
        }
      },
      // and so on...
      window.addEventListener("keydown", move.whichKey.bind(move));
    }
<canvas id="can" height="500" width="500"></canvas>

通常，我发现拥有一个主游戏循环是最容易的。在这里，我只是跟踪最后一个方向集，并在主游戏循环中处理它（在本例中为setInterval）。

我希望这能有所帮助，这正是你想要的。

window.onload = function() {
    var canvas = document.getElementById("can");
    var ctx = canvas.getContext("2d");
    var x_coor = 58;
    var y_coor = 58;
    var size = 4;
    var dirX = 0;
    var dirY = 0;
    ctx.fillStyle = "darkgrey";
    ctx.fillRect(0, 0, canvas.height, canvas.width);
    ctx.fillStyle = "black";
    ctx.fillRect(x_coor, y_coor, size, size);
    
    window.addEventListener("keydown", keyDown);
    
    function keyDown(e) {
        switch (e.keyCode) {
            case 38:
                dirX = 0;
                dirY = -1;
                break;
            case 40:
                dirX = 0;
                dirY = 1;
                break;
            case 37:
                dirX = -1;
                dirY = 0;
                break;
            case 39:
                dirX = 1;
                dirY = 0;
                break;
        }
    }
    
    setInterval(function() {
        x_coor += dirX * size;
        y_coor += dirY * size;
        coordLoop();
        ctx.fillStyle = "darkgrey";
        ctx.fillRect(0, 0, canvas.height, canvas.width);
        ctx.fillStyle = "black";
        ctx.fillRect(x_coor, y_coor, size, size);
    }, 200);
    
    function coordLoop() {
        if (x_coor > canvas.width) {
            x_coor = 0;
        }
        if (x_coor < 0) {
            x_coor = canvas.width - size;
        }
        if (y_coor > canvas.height) {
            y_coor = 0;
        }
        if (y_coor < 0) {
            y_coor = canvas.height - size;
        }
    }
}
<canvas id="can" height="120" width="120"></canvas>

相关文章：