Snake!

The title Snake is centered at the top. Below it shows a score of 7 and a gray button saying Game in Progress. A toggle is below with directions of how to play. The game board has a purple border and shows a small green food dot, with a pink snake line heading towards it.

Purpose: Why This?

The first practice exercise covered in Wes Bos' beginner JavaScript course is a working Etch-a-Sketch using the HTML canvas element. It was a fun exercise and also sparked an idea - I could use the canvas element to create the game Snake! Part of me had always wanted to make that game but had felt it was far above my skill level. This exercise showed me a way forward that would let me create a game I'd always wanted to make. And I was able to build it fairly quickly!

Built With:

HTML

CSS

JS

Highlights: My Favorite Bits

  • The coolest thing to me about this game is that it uses all browser-based technology. With an HTML canvas element, some browser-based JavaScript, and some CSS stylings, you can play a game! Finding creative ways to interact with a page in a browser window is always so fun to me.
  • Getting my first interactions worked out was another great highlight. I decided to use two canvas elements - one for the food and one for the snake. It took some trial and error (and math) to get the coordinates figured out and detect intersections, but once they were working and a food piece moved when the snake's head touched it - it was so thrilling!
The title Snake is centered at the top. Below it shows a score of 57 and a gray button saying Game in Progress. A toggle is below with directions of how to play. The game board has a purple border and shows a small green food dot, with a long light blue snake line heading towards it. - The title Snake is centered at the top. Below it shows a score of 64, the text "Game over! Hit your body", and a blue button saying Start New Game. A toggle is below with directions of how to play. The game board has a purple border and shows a small green food dot, with a red snake line crossing over it.

Challenges: Struggles While Building

  • I wanted to make a button that would clear the screen and reset all the points so a player could start a new game. However, when I first implemented this, the arrow keys were no longer registering in the canvas - instead, it moved the full window itself. When the player clicked the button, it took the keyboard focus away from the canvas and placed it on the whole page. Once I realized this, it was a quick fix to reset the focus when a new game was ready to start.
  • Mapping was the other big challenge I faced in this. I haven't worked with coordinates and intersections much, so this was a great experience. Figuring out if two items are in the same location and remembering to keep coordinates updated when a move is detected took a little work! But it was a great way to discover edge cases and experiment.

Takeaway: Lessons Learned

I was thrilled when this game first worked, and I still occasionally play it. It's a soothing way to spend a few minutes, and I can't help but try to get a higher score. Plus, I got to put the knowledge I was learning into active practice and have something new and fun to share!

During the building process, the biggest takeaways for me were:

  • Interacting with a web page can change the focus of the keyboard - it's an important thing to remember as a developer.
  • Another reminder that managing state is important, especially in a game where multiple things need to change on each press of a key. Tracking when two items intersect with each other, moving coordinates to new places, and updating the UI all rely on consistent, matching data.

A few things I'd like to improve in this project:

  • I want to make this a bit more like the original phone game and have the snake move continuously in the last pressed direction once the game starts. It would make it more challenging than it currently is. Plus, part of the fun of the game is that you can sometimes lose control!
  • Some of the sizes of items could stand to be adjusted as well. Currently, it can feel like it's taking a bit too long to go from one side of the game board to the other. Whether that means adjusting the amount the snake moves, the sizing of the snake and food, or reducing the size of the canvas, there's some room for improvement here.
← Back to All Projects