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中的碰撞

回答

相關問題