HTML5 Canvas 中的碰撞

Question

I'm fairly new to Javascript and using a canvas in general and I cant get collision detection to work with my canvas walls.我对 Javascript 还很陌生，一般使用画布，我无法使用我的画布墙进行碰撞检测。

I normally have a small square painted on the canvas that I can control with the arrow keys on the keyboard but it would continue past the canvas.我通常在画布上画一个小方块，我可以用键盘上的箭头键控制它，但它会继续穿过画布。

This is the working code without my attempts of collision detection.这是没有我尝试碰撞检测的工作代码。

<!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>

This is my attempt at collision detection.这是我在碰撞检测方面的尝试。

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

Entering this code leaves me with a blank canvas and I don't understand why.输入此代码给我留下了一个空白画布，我不明白为什么。

I want the square to reset its position once it collides with the canvas wall and that's where I'm having all the trouble.我希望方块在与画布墙碰撞后重置其位置，这就是我遇到所有麻烦的地方。

Answer 1

You shouldn't put it under addEventListener .你不应该把它放在addEventListener下。 Then, the return is ending the JS script.然后， return结束 JS 脚本。

You want to put your collision detection code in (the beginning of) drawSnake() .您想将碰撞检测代码放在drawSnake() （开头drawSnake() 。

See this working example .请参阅此工作示例。

There are also a few other things wrong with your code that I feel that I should address (all changed in the example).您的代码还有一些其他问题，我觉得我应该解决（在示例中全部更改）。

<canvas> should be in the <body> element, not the <head> <canvas>应该在<body>元素中，而不是<head>
canvas is not defined in JS (you can remove it from ctx.canvas.width canvas没有在 JS 中定义（你可以从ctx.canvas.width删除它
change canvas.w and canvas.h to ctx.width and ctx.height in the collision detection code将碰撞检测代码中的canvas.w和canvas.h改为ctx.width和ctx.height
instead of return ing from the drawSnake() function, reset the snake to its default coordinates不是从drawSnake()函数return而是将蛇重置为其默认坐标
draw a better snake画一条更好的蛇

HTML5 Canvas 中的碰撞

问题描述

1 个解决方案

解决方案1
2 已采纳 2015-11-01 23:04:39

HTML5 Canvas 中的碰撞

问题描述

1 个解决方案

解决方案1 2 已采纳 2015-11-01 23:04:39

解决方案1
2 已采纳 2015-11-01 23:04:39