2015-11-01 3 views
2

Я довольно новичок в Javascript и использую холст вообще, и я не могу получить обнаружение столкновения для работы с моими полотнами.Столкновения в холсте HTML5

У меня обычно есть небольшой квадрат, нарисованный на холсте, который я могу контролировать с помощью клавиш со стрелками на клавиатуре, но он будет продолжать проходить сквозь холст.

Это рабочий код без моих попыток обнаружения столкновения.

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

Ввод этого кода оставляет меня с пустым холстом, и я не понимаю, почему.

Я хочу, чтобы квадрат сбросил свое положение, когда он сталкивается с холст-стенкой, и именно там у меня все проблемы.

+0

В каком месте был добавлен код обнаружения столкновения? –

+1

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

+1

Кроме того, ваш '' должны находиться в '' , не '' –

ответ

2

Нельзя ставить его под addEventListener. Затем return заканчивает сценарий JS.

Вы хотите ввести код обнаружения столкновения (начало) drawSnake().

См. this working example.


Есть еще несколько вещей, которые не соответствуют вашему коду, который, как я чувствую, должен быть адресован (все изменения приведены в примере).

  • <canvas> должен быть в <body> элементе, а не <head>
  • canvas не определен в JS (вы можете удалить его из ctx.canvas.width
  • изменений canvas.w и canvas.h к ctx.width и ctx.height в коде
  • обнаружения столкновений
  • вместо return от функции drawSnake(), сбросить змею до ее координат по умолчанию
  • draw a better snake