Dismiss Notice
Join Physics Forums Today!
The friendliest, high quality science and math community on the planet! Everyone who loves science is here!

JavaScript Performance leak in my program (JavaScript)

  1. Dec 13, 2014 #1
    Any ideas much appreciated.

    Repro steps:
    • Open this: http://jaminweb.com/projs/snakegame.php [Broken]
    • Change the speed to Fast
    • Go get a couple pieces of food, lengthening your snake a few blocks
    • Notice how it's already moving slower

    https://github.com/jamkin/snake-game/blob/master/projs/snakegame.php [Broken]
    Last edited by a moderator: May 7, 2017
  2. jcsd
  3. Dec 13, 2014 #2


    Staff: Mentor

    If the speed is slow does the game still slow down?

    If you start the game and don't touch anything or mouse over it does it still slow down?

    Have you used the browser debugger to see what's going on?

    Can you characterize the slow down, does it smoothly slow down or slow and then speed up...?

    You're either not releasing some memory or your list of snake segments list is growing and it's taking longer to process or you're making and releasing so many objects that garbage collection cant keep up.
  4. Dec 13, 2014 #3


    Staff: Mentor

    One other point, I'm using an iPad and there's no arrow keys to press so you might need to consider tablets in your design.
  5. Dec 14, 2014 #4


    User Avatar
    Gold Member

    Neat game.

    I was able to get to 130 at FAST before I saw it slow down. Not sure any normal humans could get much higher before their finger tendons burst into flame.

    It may not be a memory leak per se, it may simply be that repositioning 13 snake segments in less than 100ms (the delay on FAST setting) exceeds JS's ability.

    Not sure what ends a game other than hitting a wall. Sometimes games just seemed to end for no reason when I was nowhere near a wall. If I had to guess, can a game end if the snake drives into itself?

    On my laptop, I often lost games by accidentally scrolling the play area off-screen. It would be helpful if the whole page fit on-screen during play. But this is a tidy-up thing. you've got bigger fish to fry.
    Last edited: Dec 14, 2014
  6. Dec 14, 2014 #5


    User Avatar
    Gold Member

    Try this for debugging.

    Make the snake auto-navigate, so that it never hits a wall (easy to do, in your hitWall function, just change endGame to changeDirection).
    Oh, and give it, like 10 segments to start off.

    Now let it run continuously. You'll be able tell if the slowdown is reproducible.
    Start increasing the speed. (reducing the delay toward zero).
  7. Dec 14, 2014 #6
    Are you sure the slow isn't because of Leibowitz hypothesis ?
  8. Dec 14, 2014 #7
    As the snake grows, it does progressively more on each cycle of motion: it check whether the head hits its body, looping through all the body segments, and it moves every segment. I suspect it is the second operation that affects performance most significantly. You could measure its raw performance to be sure.

    I should also remark that this second operation can be much simplified. You do not need to move all the segments. You only need to take the last segment and move it to the new location of the head. Things get a bit more complicated when the snake hits the food, because then it needs to grow; I leave figuring this out as an exercise.

    You could also eliminate the "hit body" loop. Then the performance of motion will be wholly independent of the snake's length.
  9. Dec 14, 2014 #8
    Oh, my gosh .... How did I not think of that?

    I have it working. Is there an obvious way of improving the algorithm?

    Isn't it essential to have a function to determine whether the snake's head hit its body? That's supposed to end the game.
  10. Dec 14, 2014 #9
    That seems strange based on my previous experience with JS. I've made made very computationally expensive programs that worked lightning. The repositioning of 13 snake segments is only 100-200 operations or so.

    Yes, according to the rules of the Snake arcade game, the snake cannot run into itself.

    Interestingly, I just tried out someone else's implementation and there's slows down as well: http://patorjk.com/games/snake/
  11. Dec 14, 2014 #10
    A function, yes.

    A loop, not necessarily.
  12. Dec 14, 2014 #11
    When the food gets placed in a new position (at a random place on the grid .... Later I'm going to optimize this by keeping a list of coordinates that the snake is not on, so that I can I add the food at a random one of those coordinates), I need to check whether that new position is on the snake, which requires looping through all its links -- no?
  13. Dec 14, 2014 #12
    As I said, not necessarily. You need a data structure that gives you a yes/no answer without looping.
  14. Dec 14, 2014 #13
    I like the front end quite a bit.
Share this great discussion with others via Reddit, Google+, Twitter, or Facebook