Javascript - snake collision help

[Flanelman]

Hi im currently trying to make a snake game in JavaScript which im not very good at

 

i was trying to make it so if the snake toches itself then the game will end but im having a bit of trouble.. here is the code that i am currently using:

 

for (var i = 0; i < tail.length; i++) 

        {

            if (snake.x < tail.x + snake.width && 

            snake.x + snake.width > tail.x && 

            snake.y < tail.y + snake.height && 

            snake.height + snake.y > tail.y) 

            {

                event("You have died!");

                //make a method to stop the game

            };

        };

 

i got this from a friend and my variables are called snake, and i included a tail specification in that which can be seen below:

 

var snake =

 {

x: 60,

y: 60,

size: 20,

tail: [ { x: 40, y: 40 } ],

color: "purple"

 }

 

so i was wondering if anyone could help me make the collision work for this!

 

thanks in advance

 

[Nuluvius]

Use code tags, there's even a thread stuck to the top of the page:

 

[MatthewEnderle]

So How I would do it is have each segment be a new div that is floating and if the head enters an active div then call the player lost scenario.

 

Just a quick google actually I found this website which has exactly what I said. play a quick game, lose, then inspect the code. You can see how each of the segments is a new div. The guy even posted the source code so you can look at it and derive your own if you want.

[Mr_KoKa]

Does your snake moves fluently ? or it jumps by "cell" size, if so you can just compare if position of your snake head is equal to position of one of tail part, there is no need for rectangle collision detection.

 

Also, Could you tell us how is your code not working? Cause you told us more-less what you have but not where the problem is. The code you have should work, but it is just redundant.

[Flanelman]

Does your snake moves fluently ? or it jumps by "cell" size, if so you can just compare if position of your snake head is equal to position of one of tail part, there is no need for rectangle collision detection.

 

Also, Could you tell us how is your code not working? Cause you told us more-less what you have but not where the problem is. The code you have should work, but it is just redundant.

 

oh sorry, it's just that i can go over my own body and nothign happens

 

So How I would do it is have each segment be a new div that is floating and if the head enters an active div then call the player lost scenario.

 

Just a quick google actually I found this website which has exactly what I said. play a quick game, lose, then inspect the code. You can see how each of the segments is a new div. The guy even posted the source code so you can look at it and derive your own if you want.

 

thank you i will have a look at this!

[Mr_KoKa]

oh sorry, it's just that i can go over my own body and nothign happens

 

 

thank you i will have a look at this!

I just fiddled this http://jsfiddle.net/w1yux5h2/, click on gray area and use WSAD to move purble block, when you stand on dark block it will turn orange, I used your collision checking code to check if it works, and it is. Also I use your units, and not my cells idea.

 

So if your code is not working, try to debug the code and check what are positions of your snake head and tail parts.

[vanished]

Not a full answer but I did notice this part:

for (var i = 0; i < tail.length; i++) 

If I'm not mistaken, it would be slightly more efficient to save the length to a variable before this loop and then just compare against the variable rather than checking the length every time, since it is not changing during this check (right?)

 

You don't happen to have experience with full Java, do you?

[Mr_KoKa]

Not a full answer but I did notice this part:

for (var i = 0; i < tail.length; i++) 

If I'm not mistaken, it would be slightly more efficient to save the length to a variable before this loop and then just compare against the variable rather than checking the length every time, since it is not changing during this check (right?)

 

You don't happen to have experience with full Java, do you?

 

Don't worry about caching arrays length: http://blogs.msdn.com/b/eternalcoding/archive/2015/01/07/javascript-shoud-i-have-to-cache-my-array-s-length.aspx

[vanished]

Don't worry about caching arrays length: http://blogs.msdn.com/b/eternalcoding/archive/2015/01/07/javascript-shoud-i-have-to-cache-my-array-s-length.aspx

Interesting...

[Flanelman]

is there perhaps a better way to check to see if the snake has collided with itself? also - how would i change the colour of the snake back and forth? just between maybe 2 colours.. and add a sound when the food is eaten?

thanks again!

[BrightCandle]

Typically in the game of snake you have the snake on a grid and then the snakes head is on that grid as is each of its tail segments, then its just a question of whether the snakes position(x,y) is the same as any tail segment (x,y).

 

However I am guessing with the width/height above you are trying to do this without a grid? If so then collision is a little more tricky as you have to take 2 squares and work out if they are overlapping. However for the case of snake I think you could use circles and get an almost perfect answer and have a simple solution which just takes the head and compares it to every tail segment and determines if the difference from the head to a tail segment is below the radius of a segment, that is it.

 

If you do it with squares then you can just bare in mind the basic premise is you have to check whether any of the 4 corners is inside the square of the other and also if they are perfectly matching. Try circles first and move to squares later

[Henrik_kirneH]

I would reccomend watching this video on axis alligned bounding box, if you dont know what the code you got from your friend is doing.

And have you got the controlls and the movement working?