尝试比较两个位置时不匹配

Question

我正在尝试创建一个蛇游戏。我的问题是当蛇遇到食物时，没有匹配。请在我的代码中检查功能eat()，其中x需要相同food_position_x和y需要等于food_position_y。

(function() { 
 
    var canvas = document.getElementById('canvas'), 
 
     ctx = canvas.getContext('2d'), 
 
     x = 0, 
 
     y = 0, 
 
     speed = 1; 
 
     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() { 
 
    if (x == food_position_x && y == food_position_y) { 
 
     alert('Match!');  
 
    } 
 
    } 
 
    
 
    // 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; 
 
    } 
 
    }); 
 
})();

canvas { background-color: red; }

<canvas width="500" height="300" id="canvas">

我在做什么错？

Answer 1

下面的代码是一个工作解决方案。问题在于你用像素来衡量，所以确切的像素坐标不会总是匹配。如果将它扩大到一个范围（10像素，在这个答案中，但你可以调整），你会更好地捕捉到比赛。

我还添加了一个标志（matched），以便您不会继续得到“匹配！”对于蛇在可接受范围内移动的每个像素的消息。

如果需要，您可以调整范围，但该范围在标准桌面显示器上运行良好。

(function() { 
 
     var matched = false; 
 
     var canvas = document.getElementById('canvas'), 
 
      ctx = canvas.getContext('2d'), 
 
      x = 0, 
 
      y = 0, 
 
      speed = 1; 
 
      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() { 
 
     var xdiff = food_position_x - x; 
 
     var ydiff = food_position_y - y; 
 
     if ((xdiff > -6 && xdiff < 6) && (ydiff > -6 && ydiff < 6) && !matched) { 
 
      alert('Match!'); 
 
      matched = true; 
 
     } 
 
     else if (!(xdiff > -5 && xdiff < 5) && (ydiff > -5 && ydiff < 5)) { 
 
      matched = false; 
 
     } 
 
     } 
 
     
 
     // 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; 
 
     } 
 
     }); 
 
    })();

canvas { background-color: red; }

<canvas width="500" height="300" id="canvas">