I made a snake game using Canvas API

Hey, everyone! This year I completed the JavaScript and the Python certifications on FCC and then I decided to try a few simple projects and one of them is this snake game (Here is the source code).

The website also has a couple other simple games like tic-tac-toe and hangman, with more to be added as I make them (I know the website looks really basic, one day I’ll focus on making it look better, I just wanted a place to keep the games).

I’m sure to anyone more experienced the game might look really simple and the code is possibly not ideal (I have a bad habit of moving on to do something else instead of refactoring), but I learned a lot making these games:

  • Working with the Canvas API
  • Resizing the website for mobile
  • Different types of event listeners
  • Implemented the minimax algorithm for tic-tac-toe
  • Async functions to fetch words for the hangman game
  • Adding sounds to the games

All these things along with CSS selectors and working with JavaScript are things that I first saw on freeCodeCamp and that experience was great, but this was my first time applying them in something from scratch. Lots of frustration were involved in these as sometimes I felt completely clueless and had to resort to some googling and trying to understand what was happening, but somehow in the end it worked.

There is a lot to be improved in the website itself and in the games too, there are more things to be made and things to be learned in the topics I mentioned, like Canvas, and more things to work with, like using other APIs or maybe even WebGL.

Anyway, it’s not much but I just wanted to share what I’ve learned and in case someone reading this is just starting to learn: Exactly 1 year ago I knew ZERO, so that was an improvement!

2 Likes

Congrats on getting the certs @wendel.t.c :tada:

The games look great :+1:

1 Like

Hey @wendel.t.c !

Welcome back to the forum!

Congrats! that is a huge accomplishment :partying_face:

Building your own projects is super satisfying. It comes with a lot of challenges as you mentioned, but it is really rewarding when you get things working.

Honestly, I wouldn’t worry to much about jumping straight into refactoring after each project.

There is nothing wrong with building something and learning a ton from it and then revisiting it later to make it better.

The best way to get better at coding is to build tons of stuff. Treat the first version as a rough draft and then revisit it later on to see ways to make it better.

The more you code and learn about different approaches and patterns the stronger your projects and code will be :+1:

1 Like

Amazing! Googling things and working through the raw code of something like a game is absolutely perfect for mastering the algorithmic and logical side of programming. That’s exactly what I struggle with, so it’s great to see someone tackling it early.

I have only one completely unnecessary improvement suggestion for your game: the canvas element can render a little blurry on high resolution displays. This is a universal issue with the HTML canvas element. The most popular solution is to do a little math and scale the canvas up and then down using the device’s DPR (device pixel ratio). Here’s a quick explanation and code snippet for that:

1 Like

That’s awesome, congrats on finishing both the JavaScript and Python certs! :tada: The snake game looks fun, and I really like how you’ve also added tic‑tac‑toe and hangman. It’s cool that you’re experimenting with the Canvas API and even tried out minimax for tic‑tac‑toe — that’s impressive. Don’t worry too much about refactoring right away; the important thing is that you’re building and learning. Keep going, I’m excited to see what other games you add next!

1 Like

Welcome back to the forum @wendel.t.c

The games you made are really fun.

Don’t worry about factoring games right away. Move onto the next project so you get to learn new skills and practice them. Then, when you have a moment and fresh eyes, write down the areas you want to improve. Pick one or two and release the project as a new version, with a version number:

1.0.0 for the first version.

  • For minor changes, increase the last number by one.
  • For a bigger change, increase the middle number by one.
  • For a major change or new feature, increase the first number by one.

With version control, you can make changes to a project and store versions in different releases.

As you learn more things apply your knowledge to past projects to help give them a tweak or polish.

Happy coding

1 Like

Oh thanks for that suggestion, I’ll keep that in mind when making my next canvas project

1 Like