Help regarding a Javascript Game

[Abdul M]

hey,

 

I made a snake game using Javascript and jquery, I succesfully made it but the problem is when I played it on mobile touch devices, it kind off lags specially when the snake eats the food, the game stops for a second and then a new food is created, below is the link of the CodePen with the game.

 

Link: http://codepen.io/crazyboy24/pen/fChtL/

 

Any help will be great.

[tsphillips]

The slowdown could be slow memory allocation / deallocation.  Take a look at this page to see how dramatically slower mobile devices can be:

http://jsperf.com/push-pop-vs-unshift-shift/3

 

One way to avoid memory management slowdowns is to allocate the biggest array you need at the beginning of the game and manually track the bounds (like start and end for a queue).  Things like pop, unshift, etc. are convenient, but will implicitly invoke a memory manager you have little control over.

 

Tom

[Abdul M]

I am kinda noob in Javascript, can you be more specific, like where can I apply that and how, maybe like an example or showing some edit in the code which I should do.

 

Thanks

[tsphillips]

Here is an example using a static array.

var snake_buffer = new Array(40);for (var i = 0; i < 40; i++){    snake_buffer[i] = { x: 0, y: 0 };} // for ivar head = 0;var tail = 0;// Grow the snake (buffer) by increasing head.// Do not let head exceed the array size.// To shrink the snake (buffer) you can decrease head// or increase tail.// For a "snake eats food" game, this should be sufficient.// For a more complex game where the snake grows and shrinks// a lot, a circular buffer (or ring buffer) would be more// appropriate.  To implement a circular buffer you need to// track the start and the length, and then have more// complex logic to iterate through elements of the buffer.drawSnake(){    for (var i = tail ; i <= head; i++)    {        // Draw a snake element using        // snake_buffer[i].x, snake_buffer[i].y    } // for i} // drawSnake()

If you want to try the static array method, I recommend rebuilding the game in small chunks to make sure you are comfortable with each change you make.  For example, just get a one-element, non-eating snake working.  Then try to make the snake grow when pressing space bar.  Then make the snake grow when eating a block.  Etc.

 

Tom

[Abdul M]

What I was thinking, I noticed that the game used to hang for a second when it needed to create a new food, so solution could be like create 2 food and display one when the snake's head meets the other food and vice versa and so on.

 

Is this right or wrong?

[tsphillips]

Though I'm not certain the slowdown is the dynamic memory allocation, I would advise against using push(), pop(), shift(), or unshift() in Javascript arcade-style games.

 

You should experiment with different ideas and see what works best -- there is rarely a clearly right or wrong answer when making a game.

 

Tom

[JUL]

http://www.html5gamedevs.com/topic/5271-sprite-recyclingpooling-worth-it/

[Abdul M]

I am not getting any idea, that's why I posted here, so that you experts could help me.

 

I wanted to try that creating two food method, like create two food items and display one when the snake's head meets/eats the other food and vice-versa so that at least the problem could be narrowed down, so any idea how could I apply that ?