Question

我对Javascript很新，并且通常使用画布，我无法使用碰撞检测来处理我的画布墙。

我通常在画布上画了一个小方块，我可以用键盘上的箭头键控制它，但它会继续通过画布。

这是没有尝试碰撞检测的工作代码。

<!DOCTYPE html>
<html>
  <head>
      <canvas id = "gameCanvas" width="400" height="400" style = "border:1px solid #000000;"></canvas>
    <style type="text/css"></style>
  </head>
  <body>
    <script type="text/javascript">
       var c = document.getElementById("gameCanvas");
       var ctx = c.getContext("2d");
       ctx.fillStyle = "rgb(255, 0, 0)";

       var snake = {
           x: 5
           , y: 5
        };


       function drawSnake() {
           ctx.clearRect(0,0, ctx.canvas.width, ctx.canvas.height);
           ctx.fillRect(snake.x ,snake.y,20,20);
       }

       window.addEventListener("keydown", function(event) { 
           if (event.keyCode == 39)
             snake.x += 5;
           else if (event.keyCode == 37)
             snake.x -= 5;
           else if (event.keyCode == 38)
             snake.y -= 5;
           else if (event.keyCode == 40)
             snake.y += 5;
           drawSnake();
        });

        drawSnake();
    </script>
  </body>
</html>

这是我在碰撞检测方面的尝试。

//Wall Collision
    if(snake.x >= canvas.w || snake.x <= -1 || snake.y >= canvas.h || snake.y <= -1) {                  
        return;
    }

输入此代码会留下一个空白画布，我不明白为什么。

我希望广场在与画布墙碰撞时重置其位置，这就是我遇到麻烦的地方。

Answer 1

你不应该把它放在addEventListener之下。然后，return结束了JS脚本。

您希望将碰撞检测代码放在drawSnake()的开头。

请参阅this working example。

您的代码还有一些其他问题，我觉得我应该解决（在示例中都已更改）。

<canvas>应位于<body>元素中，而不是<head>
canvas（您可以将其从ctx.canvas.width
在碰撞检测代码中将canvas.w和canvas.h更改为ctx.width和ctx.height
而不是return函数的drawSnake()，将蛇重置为其默认坐标
画一条更好的蛇

HTML5画布中的碰撞

1 个答案: