Question

亲爱的，我已经开始学习编程并选择Snake作为第一个项目。由于我找不到适合初学者的教程，我在youtube上观看了“thenewboston”的pygame snake教程。我试图用JS复制他的步骤，最后我遇到了以下问题。我可以向左和向右移动，但是一旦我盯着向左移动并向右按下，就会出现一个错误：它试图向右和向右移动。我完全不知道，当我按下后，如何告诉JS不要继续向左移动。

希望你能解释我的问题并提出解决方案。谢谢！

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

lead_x = 100;
lead_y = 100;

function draw_it() {
  // background
  ctx.fillStyle = "white"
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // snake head
  ctx.fillStyle = "green"
  ctx.fillRect(lead_x, lead_y, 20 , 20)
}

draw_it();

document.onkeydown = function(event) {
  if (event.keyCode == 37) {
    setInterval(function() {
      lead_x -= 10;
      draw_it();
    }, 100);
   } else if (event.keyCode == 39) {
    setInterval(function() {
      lead_x += 10;
      draw_it();
    }, 100);
}

Answer 1

最大的问题是你正在使用setInterval，这将不断重复其中的代码。

console.log('It just keeps going...');
setInterval(function() {
  console.log('and going...');
}, 1000);

相反，我建议使用setTimeout或requestAnimationFrame来控制游戏的“心跳”，然后只需在用户按下方向时修改数字。

var canvas = document.querySelector('canvas');
var ctx = canvas.getContext('2d');

var leadX = 160;
var leadY = 120;

var speed = 10;
var xDirection = 1; // Start out going right

function update() {
  // Update the players position
  
  // If xDirection === 1, move to the right
  // if xDirection === -1, move to the left
  leadX += xDirection * speed;
}

function draw() {
  // Clear the screen and draw the player
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillStyle = '#000';
  ctx.fillRect(leadX, leadY, 10, 10);
}

function heartBeat() {
  update();
  draw();
  
  // Call `heartBeat` again in 100ms
  setTimeout(heartBeat, 100);
}
heartBeat();

document.onkeydown = function(event) {
  if (event.keyCode === 37) {
    // Go to the left
    xDirection = -1;
  } else if (event.keyCode === 39) {
    // Go to the right
    xDirection = 1;
  }
};

html, body {
  background: #222;
}
canvas {
  display: block;
  margin: 4px auto;
  background: #FFF;
}

<canvas width="320" height="240"></canvas>

Answer 2

设置intervar保持运行无限，你必须在创建新的时间之前杀死以前的计时器或者只使用这样的单个间隔：

var canvas = document.getElementById('canvas');
var ctx = canvas.getContext("2d");

lead_x = 100;
lead_y = 100;

function draw_it() {
  // background
  ctx.fillStyle = "white";
  ctx.fillRect(0, 0, canvas.width, canvas.height);

  // snake head
  ctx.fillStyle = "green";
  ctx.fillRect(lead_x, lead_y, 20 , 20);
}

draw_it();

var left_turn = false;
var right_turn = false;

document.onkeydown = function(event) {
    if (event.keyCode == 37) {
        left_turn = true;
        right_turn = false;
    } else if (event.keyCode == 39) {
        right_turn = true;
        right_turn = false;
    }
}


setInterval(function() {
    if (left_turn) {
        lead_x -= 10;
        draw_it();
    } else if (right_turn) {
        lead_x += 10;
        draw_it();
    }
}, 100);

Answer 3

您只需要确保当按下左键时，右键功能停止重复，当按下右键时，左键功能停止重复：

document.onkeydown = function(event) {

    if (event.keyCode == 37) {
        clearInterval(goRight);

        var goLeft = setInterval(function() {
            lead_x -= 10;
            draw_it();
        }, 100);
    } 

    else if (event.keyCode == 39) {
        clearInterval(goLeft);

        var goRight = setInterval(function() {
            lead_x += 10;
            draw_it();
        }, 100);
    }
}

JS中的蛇建立了左右运动

3 个答案: