2つの位置を比較しようとすると一致しません

Question

蛇のゲームを作成しようとしています。私の問題は、ヘビが食べ物と出会ったとき、マッチがないときです。 xはfood_position_xと同じである必要があり、yはfood_position_yである必要があります。eat()のコードを確認してください。

(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ピクセル、この答えでは、調整することができます）に展開すると、より良い一致をキャッチします。

また、「Match！」が表示されないようにフラグ（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">