Geek Answers Handbook

Collision Detection in JS

I recreate an old game similar to Tron in HTML5 canvas + JS. The main difference is that the snakes do not rotate at right angles, they can move along curves (name Achtung Die Kurve).

I need to detect collisions, and I do not know how to do this. The rules are really simple, and everything I come up with or read seems futilely complicated. Collisions occur when:

  • The snake crashes into another snake's body (or its own) from head to head (I emphasize that, since in a very early experiment, the heads of my snakes crushed back to their "necks" as soon as they moved .: P)

  • A snake crashes into a wall (without internal walls).

How can I do it? I want to add any data for my objects.

+4
source share
5 answers

First of all, thank you all for your answers! I read what you posted, read a little more, took a few shots and decided to do the following:

I am going to save a map representing the game area, and each time a position is taken, add 1 to the value. Then I will check the 3 "outer" angles of the 4 corners of the snake's head (the "inner" corner collides with the rest of the body) for values != 1 .

I think that I will use an invisible canvas and alpha value so that my code is simple.

Sorry that I wrote my own answer to accept: I think it is important to keep a record of the actual solution that I am implementing, and none of the answers will detail my division completely.

0
source

You may have a 2d bit with a boolean array with a pixel size (width * height). I always fill the array with the Boolean values ​​of the walls (there may be internal walls, if you're interested) and the body of the snake.

At each iteration, check the position of the snake head in the array, if the values ​​there are true, you have a collision.

You could theoretically do this by checking the pixel values ​​on the canvas itself, but if you want to use background templates or other irreplaceable elements, this will not work for you.

+2
source

I would suggest getting the coordinates of the front of the snake’s head every time it moves (perhaps every frame).

Then use snakeHead.style.display = 'none';

temporarily hide the snake’s head (you should see it again before rendering)

Then document.elementFromPoint(x, y) to check which element is directly under the front of the snake’s head. Perhaps add a class called collidable or something to all the elements that cause collision and validation

 var class = ' '+document.elementFromPoint(x, y).className+' '; if(class.indexOf(' collidable ') > -1){ alert('Collision!'); }

Then, of course, look at the head of the snake:

snakeHead.style.display = 'whatever is was before probably inline';

Just an idea.

elementFromPoint has good browser compatibility: http://www.quirksmode.org/dom/w3c_cssom.html#documentview

Let me know how this happens :)

+1
source

Do you want a perfect pixel collision check? It’s best, probably, to process the area of ​​the game as a grid (of any resolution you need, an ideal pixel or otherwise) and save a list for each snake, indicating which grid places each snake occupies. Then save the location of the snake’s head and the vector representing its direction, and check the location + vector for all the grid spots occupied by the snakes. You can make this process efficient with hash sets if you want to optimize it.

0
source

I thought the best option would be to break the snakes into segments, store in memory and check for collisions with these segments.

0
source

More articles:


All Articles