Question

我正在使用我自己的简单蛇版：）

所以有一个画布上面有一个矩形。当我点击＆＃39; up＆＃39;这个矩形应该向上移动，当我点击“向下”时它应该向下等等。

但我不想总是留在特定按钮上。我想要在按下键时启动循环。每当按下另一个键时，循环应该停止 - 这将开始一个新循环。

直到现在我尝试了两个不同的版本：一个带有while循环，另一个带有setTimeout（）函数。两者都不能按照我的要求工作。 while（）只是将矩形放在y轴的开头，而setTimeout（）似乎没有再次调用自身。哪里是我的错？

＆＃13;

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

＆＃13;

<canvas id="can" height="500" width="500"></canvas>

＆＃13;

Answer 1

通常情况下，我发现最简单的一个主游戏循环。在这里，我只是跟踪最后一个方向集，并在主游戏循环中处理它（在这种情况下，是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>

2个不同的循环 - 都不起作用

1 个答案: