Snake Game

This is a deep dive into how I recreated the classic snake game using JavaScript, HTML, and CSS. The goal of this app is to recreate the classic snake game, but I also wanted to give it a refreshed and modern look.

I usually start off my projects with a quick wireframe of how the app will be displayed on the webpage, the goal of the app, and a couple test cases. Before I began writing code I wrote down on paper the rules of the game and how the user will interact with the game.

The Rules of The Game:

1. The game ends when the snake touches the outside border of the game area or the snake touches itself.
2. When the game ends, the game play stops and a message is showed to the user saying “Game Over”.
3. The snake grows 1 unit in length each time an apple is eaten.
4. The apple should be randomly placed in a new location after the snake eats it.
5. The user can control the direction of the snake by using the arrow keys.
6. The game will show how many apples have been eaten.

This is always on of my favorite steps of creating a new app because it provides the clarity needed start writing out code. This ensures that my code is simple and lean.

The next step was to get familiar with the canvas element and learn how to draw different shapes and how to simulate movement using setInterval(). After getting use to the canvas syntax I took the rules of the game and broke them down into small task. I kept working on the little task and each time I ran into an issue I would search for solutions online or look for different ways to accomplish the same task.

The key takeaways from this project were array manipulations and how proper project planning impacts the overall process of creating an app.