Grid based snake game featuring dynamic directional sprites and difficulty settings

The Process

After making Disarray, my first JavaScript puzzle game, I was excited to make more nostalgia-inspired games. I instantly thought of the classic game I grew up playing, Snake. I first thought of building this using only vanilla JavaScript, which I knew would not be a problem for me, but I couldn't bring myself away from the React ecosystem. It added such an elegant and modern factor to the game. So, I decided to use both while emphasizing vanilla JavaScript for-loops and array manipulation methods rather than React hook state setters.

I began by forming the logic to create a game tick and draw the grid. Next, I randomly assigned the “food” and rendered the snake to the grid. This was fairly straight forward due to the amount of brainstorming and planning I did before writing any code. At first, the snake was merely a color-filled grid tile followed by other color-filled grid tiles acting as its tail. I knew this was not the end result, so I started planning how to implement sprites into my game. This was the most difficult code I've had to write while working with game-style code. But man, it was so fun and rewarding. It involved writing a function to check the snake’s head position and which direction it was facing on the grid. Another function checked the tail pieces’ previous and subsequent position and direction in order to render the correct sprite for a specific piece. The complexity of rendering corner pieces revealed to be pretty difficult. While I spend time finishing this feature, the game may look unfinished but continues to serve as a reminder of how far my skills have come.

Take Aways

  • Improved skills in writing iterative functions with vanilla JavaScript
  • Learned a lot about game loops and what goes on behind the scenes
  • Realization of my adept abilities writing complex JavaScript without using references

Technology stack

  • React
  • JavaScript
  • SASS