Question

我正在尝试创建一个简单的蛇游戏。现在我想抓住食物，但蛇的位置与食物的位置永远不同。

＆＃13;

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

＆＃13;

canvas { background-color: #000022 }

＆＃13;

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

＆＃13;

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;

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

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>

Answer 2

你的游戏看起来像是在大块的网格上，但它确实不是，只有在图形中。状态变量，无论多么重要，都是微不足道的小数字。

而不是像这样画蛇：

ctx.rect(Math.floor(x/10)*10, Math.floor(y/10)*10, 10, 10);

尝试这样绘制：

ctx.rect( x, y, 1, 1 );

你会看到游戏的真实状态。这就是你真正玩的东西：https://jsfiddle.net/xeyrmsLc/11/ - 这就是为什么难以获得食物的原因。

Answer 3

主要问题是x和food_position_x有很多可能性，精确控制很困难，很难准确定位在组合匹配的X上与Y匹配。你必须在同一区域周围来回移动以获得X的精确匹配或Y的精确匹配（然后你可以从那里以某个正交方向进入食物）。

但您的代码确实在基础级别工作。您可以考虑降低速度并使视觉方形位置与内部数字完全匹配（较少的视觉粒度与底层状态不匹配）。

让蛇抓住他的食物

3 个答案: