网格系统需要在画布上修复位置问题吗？

Question

我正在尝试创建一个简单的蛇游戏。我的问题是，大多数时候蛇遇到食物时，蛇的位置不是应该的样子。

为了更好地理解，请查看蛇（白色）与食物（绿色）相遇的屏幕截图：

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

// Drawing
function draw() { 
  requestAnimationFrame(function() { 
    draw();
  });
  // Draw the snake
  ctx.beginPath();
  ctx.rect(x, y, 20, 20);
  ctx.clearRect(0, 0, canvas.width, canvas.height); 
  ctx.fillStyle = '#ffffff'; 
  ctx.fill();
  ctx.closePath();
  
  // Draw the food
  ctx.beginPath();
  ctx.rect(food_position_x, food_position_y, 20, 20);
  ctx.fillStyle = "lightgreen";
  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;
  }
});

canvas { background-color:red }

<canvas id="canvas" width="600" height="400"></canvas>

所以我觉得我需要一个简单的网格系统但是我如何才能解决这个问题呢？

Answer 1

我无法看到您的碰撞代码。但我认为你的起源有误。你的方块的原点不在中间，它在左上角。