Gamedev: How to move in Snake without being tied to a grid

For over a year I worked on an HTML5 game project as a hobby that I haven’t released (yet?).  It’s called Chain of Heroes, and it’s like Snake meets Diablo.  I’m not here to talk about my game though, I want to talk about how the snake moves.  You probably have already heard of the game Snake, it looks like this:

One of the things I don’t like about traditional Snake is that movement is tied to a grid.  That means that every time the snake moves, it moves by one width / height of a body segment.  e.g. in this picture, the snake moves the distance of a green circle.  Instead of that, I wanted it to be possible to move by fractions of a body segment so that movement appeared much more fluid.  It was very difficult for me to figure out how to do this and I didn’t get it right on the first attempt.  In this article, I’m going to explain how I pulled it off.

Continue reading