NeoCade Devlog #3: Snake game implementation

Since the pong game was working really well, i moved on to implementing the Snake game. Here is a breakdown of how I built it:

Moving

Instead of trying to move a single object (like i did with pong), I made the snake an Array of coordinates. To make this array of coordinates move, I didn’t move every coordinate. Instead, I calculated where the new “Head” of the snake should be based on the the input given by the user (arrow up, down and so on). I used unshift() to add that new head to the front of the array, and used pop() to delete the last block of the tail. So essentially, instead of moving, its just that new blocks spawn at the from and ones at the very end get deleted.

Eating and growing

If the new head coordinates match the apple’s coordinates, I simply skip the pop() function for that frame. This means the last block of the snake is not deleted which mean it effectively just grew by one block.

Overall this wasn’t too hard but i originally made a mistake of having the logic and the ui of the snake game in the smae index.html and main.js file as for hte pong game which led to like a couple of mistakes that took a while to fix cus i got confused. So, i just added a nwe snake.html and snake.js file and connected all of them together. I also spent a bit of time trying to style the snake game to look good but this is the best i could do for now (see attached pic)