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

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个像素，在这个答案中，但你可以调整它），你将更好地捕捉到匹配。

我还添加了一个标记（select 1 from dual;），以便您不会继续获得＃34;匹配！＆＃34;蛇在可接受范围内移动的每个像素的消息。

您可以根据需要调整范围，但该范围适用于标准桌面显示器。

＆＃13;

＆＃13;

matched

＆＃13;

    (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;
        }
      });
    })();

＆＃13;

    canvas { background-color: red; }

＆＃13;

＆＃13;

＆＃13;