HTML5 Canvas中的碰撞

我对Javascript并不熟悉，并且通常使用画布，所以无法使用碰撞检测与我的画布墙一起工作。HTML5 Canvas中的碰撞

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

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

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

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

我想要广场重新设置其位置，一旦它与帆布墙碰撞，那就是我遇到麻烦的地方。

来源

2015-11-01 Smurfffy

你在哪里添加了碰撞检测代码？ –

coooooooooooooooooooollliiiiiiiiiiiiiiiiiiision：https://github.com/jriecken/sat-js –

另外，你的''

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

你想把你的碰撞检测代码放在（开头）drawSnake()。

请参阅this working example。

您的代码还有其他一些问题，我觉得我应该解决（在本例中全部改变）。

<canvas>应该在<body>元件，而不是<head>
canvas未在JS定义（可以从ctx.canvas.width
变化canvas.w和canvas.h到ctx.width和ctx.height在碰撞检测码
而不是return ing从drawSnake()函数，将蛇重置为其默认坐标
画出更好的蛇

来源

2015-11-01 23:04:39

HTML5 Canvas中的碰撞

回答

相关问题