[classic snake] Rising gaps between squares in the tail

[lucosmo]

Hi. I've started creating my first phaser game - classic snake. Snake eats items, after every single item it's tail is one square longer, also speed of snake increases. Undesirable effect is rising gaps between squares in snake's tail.

I control moves of snake and increase speed like this:

if (cursors.left.isDown&&last!="right"){//  Move to the leftplayer.body.velocity.x -= (150+speed*15); //when item is eaten, speed increases +1player.body.velocity.y=0;last="left";}

 creation of tail:

function snakeBody(player){ //player is head of snakevar x=player.x;var y=player.y;snakePath.push(new Phaser.Point(x,y)); //snakePath is array of points(x,y) of snakes head (player) positionssnakeSection[speed]=game.add.sprite(x, y, 'square'); //speed is number of squares in tail, and speed of snakesnakePath.pop();game.physics.arcade.enable(snakeSection[speed]);snakeSection[speed].body.collideWorldBounds = false;}

then updating squares' positions:

for (var i = 0; i < j; i++) //j=speed also tells how long (how many squares) is tail{snakeSection[i].x = snakePath[((i+1)*6)].x; //snakeSection is growing array of sprites (of squares of tail)snakeSection[i].y = snakePath[((i+1)*6)].y; //snakePath is array of points(x,y) of snakes head (player) positions}

I was trying to play with index of snakePath but didn't fix it. Maybe my approach of creating body of snake is wrong. Waiting for advice, solutions from more experienced phaser users. Whole script is 240+ lines, you can look at it on github: https://github.com/lucosmo/snake/

 

Snake consists of 10 squares and looks like this:

 

[InsaneHero]

The classic snake games always move a whole body unit at a time.  This makes them easy to program because to add a new tail segment you simply don't erase the last square when it moves forward one (and add it onto the list).  To make them go faster simply reduce the amount of time before the next whole body unit movement of the head.

 

It looks like you're trying to get it to move smoothly, so you need to do some more clever stuff to make the gaps correct.  When you add a new segment onto a smoothly moving snake it needs to go at the position where the previous tail was before that tail moved forwards one whole body unit in distance.  If your snake body units are say 16x16 pixels, and the speed is 3 pixels, the old tail was never at 16 pixels away from where it is now (16 / 3 doesn't go)... so then you have to do even more clever stuff to interpolate the position of the new tail unit.  It gets messy quite quickly!

 

I'd recommend doing the classic snake game first, and that will give you a ton more insight into why your smooth one isn't working right.  It's not particularly hard but there's more to a 'smooth moving' snake game than you might at first realise!

[spencerTL]

I created a smooth flowing snake game once for flash. It used inverse Kinematics. I can' t be more helpful with that as I barely understood it at the time and much less so now. It is well used technique in different games though so there is plenty of stuff albeit in other coding languages. Eg http://code.tutsplus.com/tutorials/create-a-mechanical-snake-with-inverse-kinematics--active-9205

[lewster32]

Using physics is gonna make this harder than it needs to be - this is a prime candidate for grid-based movement with interpolation (probably tweening) to make the movement smooth.