Question

在我的蛇游戏中，我试图捕捉矩形（食物）的 y坐标。

现在看看这个功能：

function eat() { 
    console.log('food_x:' + food_position_x + ' x:' + x + ' / food_y:' + food_position_y + ' y:' + y);
    if (y == food_position_y) {       
        throw new Error("MATCH!"); // This is not an error. Just trying to stop the script
    }
}

很简单，是吗？

现在关于这个故事的奇怪之处在于：y并不总是等于food_position_y！

您可能需要查看完整的脚本：

(function() {
  var canvas = document.getElementById('canvas'),
      ctx = canvas.getContext('2d'),
      x = 0,
      y = 0,
      speed = 2; 
      x_move = speed,
      y_move = 0,                          
      food_position_x = Math.floor(Math.random() * canvas.width);
      food_position_y = Math.floor(Math.random() * canvas.height);

  function eat() { 
    console.log('food_x:' + food_position_x + ' x:' + x + ' / food_y:' + food_position_y + ' y:' + y);
    if (y == food_position_y) {       
      throw new Error("MATCH!"); // This is not an error. Just trying to stop the script
    }
  }

  // Drawing
  function draw() {
    eat();
    requestAnimationFrame(function() {      
      draw();      
    });    
    // Draw the snake
    ctx.beginPath();
    ctx.rect(Math.floor(x/10)*10, Math.floor(y/10)*10, 10, 10);
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    ctx.fillStyle = '#ffffff'; 
    ctx.fill();
    ctx.closePath();

    // Draw the food
    ctx.beginPath(); 
    ctx.rect(Math.floor(food_position_x/10)*10, Math.floor(food_position_y/10)*10, 10, 10);
    ctx.fillStyle = "blue";
    ctx.fill();
    ctx.closePath();

    // Increase the value of x and y in order to animate
    x = x + x_move;
    y = y + y_move;       
  } 
  draw();

  // Key Pressing
  document.addEventListener('keydown', function(event) {
    switch(event.keyCode) {
      case 40: // Moving down
        if (x_move != 0 && y_move != -1) {
          x_move = 0;
          y_move = speed;
        }
      break;
      case 39: // Moving right
        if (x_move != -1 && y_move != 0) {
          x_move = speed;
          y_move = 0; 
        }
      break;
      case 38: // Moving top
        if (x_move != 0 && y_move != 1) {
          x_move = 0;
          y_move = -speed; 
        }
      break;
      case 37: // Moving left
        if (x_move != 1 && y_move != 0) {
          x_move = -speed;
          y_move = 0; 
        }
      break;
    }
  });
})();

我的意思是＆＃34; y并不总是等于food_position_y＆＃34;？

请继续让自己给它留下印象。尝试多次运行this script。

目前，不要担心x。只是尝试抓住食物，你会注意到，有时你会得到一个＆＃34;错误＆＃34; （这很好！）游戏停止了，但有时当蛇甚至与食物处于同一高度时，你不会得到这个奇特的错误并且游戏继续进行。

问题：为什么？

Answer 1

正如4castle解释的那样，

它的移动量取决于速度。速度设置为2.如果＆＃34;蛇的＃坐标为＃34;是一个奇数，那么它每次都会增加2，并且永远不会达到＆＃34;食物的相同y坐标。（如果食物是均匀的）。一种看待这种情况的方法是将速度切换为1.这当然会使你的蛇以半速移动，所以在你看到你的程序工作后 - 切换回速度= 2并调整食物的时间 - 坐标变量也是一个奇数。

Answer 2

仔细查看控制台输出，因为它显示了罪魁祸首：

food_x：31 x：34 / food_y： 97 y： 98
food_x：31 x：34 / food_y： 97 y： 96

你的蛇从来没有和食物一样处于同一个位置。每次调用eat()函数。但是，你的情况并非总是如此。

此问题的解决方案是检查y 是否等于（在speed的容差范围内）food_position_y：

if (Math.abs(y - food_position_y) <= Math.abs(speed)) {
    throw;
}

功能有时只起作用。怎么会这样？

2 个答案: