javascript - 让蛇捕获他的食物

Question

我正在尝试创建一个简单的贪吃蛇游戏。现在我正试图捕获食物，但蛇的位置永远不会与食物的位置相同。

(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 && x == food_position_x) {       
          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;
        }
      });
    })();

canvas { background-color: #000022 }

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

console.log() 将返回所有位置。

jsfiddle

我算错了吗？也许我必须更改变量 food_position_x 和 food_position_y。如果不是，我不知道为什么位置永远不一样。

Answer 1

你的游戏区域应该是一个宽度和高度为 10 的单元格网格。这就是你这样做的原因:绘制蛇时 Math.floor(x/10)*10。

要使 eat 功能正常工作，您只需以相同的方式绘制食物:

food_position_x = Math.floor(Math.random() * canvas.width / 10) * 10;
food_position_y = Math.floor(Math.random() * canvas.height / 10) * 10;

并将相同的内容添加到 eat 函数的 if 条件中:

if (Math.floor(y/10)*10 == food_position_y && Math.floor(x/10)* 10 == food_position_x)

(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 / 10) * 10;
          food_position_y = Math.floor(Math.random() * canvas.height / 10) * 10;
    
      function eat() {   
       //console.log('food_x:' + food_position_x + ' x:' + x + ' / food_y:' + food_position_y + ' y:' + y);
        if (Math.floor(y/10)*10 == food_position_y && Math.floor(x/10)* 10 == food_position_x) {       
          throw new Error("MATCH!"); // This is not an error. Just trying to stop the script
        }
      }
      
      // Drawing
      function draw() {
        eat();
        requestAnimationFrame(function() {      
          draw();      
        });
        // Increase the value of x and y in order to animate
        x = x + x_move;
        y = y + y_move;   
        if (x > canvas.width) x = 0;
        if (y > canvas.height) y = 0;
        if (y < 0) y = canvas.height;
        if (x < 0) x = canvas.width;
        // 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();  
      } 
      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: #000022 }

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