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.