HTML5 Canvas and JavaScript Game Tutorial

When I first started learning web development, I was able to get text and images displaying in a browser, but when it came to developing interactive games, I was frustrated, baffled, and felt like I really wasn't made out to be a web developer. It seemed like game developers could easily whip up a fully functional game in a few files worth of code, but me, I was just an imposter.

I always attributed it to game developers being born with an innate ability to grasp mathematics and complex functions used throughout their day-to-day programming, but now I know, that's just not the case.

Through much trial and error, I eventually started putting the pieces of the game development puzzle together. I spent MONTHS studying and analyzing other developers canvas pieces, while also taking Khan Academy math courses to truly understand how math and programming work in tandem together to produce a fully functional game. I realized that game development wasn't that hard—it's just that no creators have pieced the puzzle together and presented it in a consumable manner that's easy for beginners.

This course covers everything I've learned during those months worth of learning throughout my eight years of experience. Rather than having you struggle to find the right resources and put all of the pieces together correctly (like I had to do), I've compiled everything into a few hours worth of concise, straight to the point videos, that'll get you started with all of the basics required to program your very own video game.

00:00 Project setup
09:32 Create a player
17:43 Shoot projectiles
23:18 Whiteboard projectile math
25:47 Projectile creation continues
37:58 Create enemies
51:28 Detect collision on enemy / projectile hit
57:45 Detect collision on enemy / player hit
1:00:54 Colorize game
1:11:06 Shrink enemies on hit
1:18:00 Create particle explosion on hit
1:29:20 Add score
1:38:05 Add game over UI
1:51:57 Add restart button

[ssshenkie]

If anyone is curious about what happend at 38:07.

It's good to realize the difference between requestAnimationFrame and setInterval

If you go to another tab your game pauses, because requestAnimationFrame only works if tab is active .

setInterval is active regardless if you have the tab open or not. So it's gonna keep push enemies into the array of enemies every second. And that's why at 38:07 the screen was full of enemies.


How you could avoid this: Your animate() function is called already as quick as possible by requestAnimationFrame().

Make a global variable called frames = 0.
In animate() just do frames++ to count up the frames
In spawnEnemies you just have to do some easy math to see when a second passed.
Usally browsers run at 60FPS. so each 60 frames = 1 sec.

If (frames % 60 === 0) { spawnEnemies() }

[ivancastillo]

This tutorial is the first in a short list of digestible content to show developers how to code a game with just Canvas, step-by-step. I remember a few years ago trying to find something like this on YouTube, and there was none to be found. So thank you for being a pioneer

[biicho]

Thank you for the amazing tutorial and code along experience!
If someone wants to have the shrink animation without importing an external library, it is pretty easy:
1. You define a property "targetRadius" in your enemy's constructor
2. In the update method of Enemy, you check if targetRadius is bigger than radius and if so you shrink it by a constant value (for example: shrinkSpeed = 0.8) and you pay attention that if the substraction gets you a smaller radius than targetRadius, you set it with radius:
if (this.targetRadius < this.radius) {
this.radius =
this.radius - this.shrinkSpeed < this.targetRadius
? this.targetRadius
: this.radius - this.shrinkSpeed;
}
3. In your game loop, instead of of using the library you just substract the value to enemy.targetRadius

[jeesjans]

i’m 5 minutes in and I already love how detailed you explain everything

[Frankslaboratory]

That's a long one, just watched the intro, will save it for the weekend and code along. Thank you for sharing this Chris, I know it's a lot of hard work to produce content like this.

[jan-zumwalt]

Great Job!!! Chris I am a retired programmer and spent several years in the training department (25yrs ago!). I can honestly say you do a better job then I did. I think everyone would appreciate more advanced JS GRAPHICS. I don't do much coding any more but still try to stay up to date watching good tutorials - I wish you had more :)

[Notreal]

This was not only a very good Game Tutorial, it was also an excellent programming tutorial in general. Thank you for your time and dedication. I really appreciate it.

[paulbrace]

Great tutorial. I have 3 retro games I wrote in C# and this give me the information I need to migrate to run in a browser. Couple of suggestions:
1) store the ID of the spawn setInterval and call clearInterval(id) when detect game over or multiple instances of the interval will run and more and more enemies will be created per second on each restart of the game.
2) Move setting the canvas.width and height and player x and y inside the init() function to adapt to changes in browser window size when restart game.

Many thanks for the tutorial.

[maskman]

This game is fucking awesome, and the background music is amazing, this is definitely the best html canvas game tutorial !!!

[loudallo]

Chris, I watch these videos and feel inspired. Thank you for providing me with quality content. Don't listen to haters my dude.

[pattonjapes]

Since this came out on my birthday, I'll consider it a present. Thank you Chris you shouldn't have!

[KevinBFG]

First off, thank you Chris for such a wonderful series of tutorials, they are all magnificent.
Now, addressing a little issue. After you restart the game, the "spawnEnemies" interval remains set, therefore, executing it again will add an extra "spawner" each time, incrementing each time the amount of enemies per period. The possible fixes for this are simple:
One would be to simply execute "spawnEnemies()" once and only once, outside of any recurrent block. Another solution takes into account that "window.setInterval()" returns an Id, which we can save in a variable at the top, say for example, "let spawnerId". Once we hit a game over, inside of the startGameBtn's event listener, we clear this old interval via "window.clearInterval(spawnerId)", and then we add the new one. Hope this helps anyone who falls into the same issue.
Again, a most humble thank you for your efforts which are tremendously appreciated!

[Canilho]

I started making canvas experiences in 2010, and I've seen many videos/tutorials since.
This video is one of the best tuts I've seen out there.

Your code is very clean, and in my opinion, your commentary is also very good and joyful to listen to.
Keep up the great work.

[reinieltredes]

Finally! After years of waiting! Thank you so much! I have learned the HTML canvas from you sir! And earned money using the things that you have taught.
Thank you so much! Your canvas tutorials are great!

I'm waiting for the tutorial of Collision Detections for other shape.

[quirkymarshmallow]

I signed up for your newsletter. I am really impressed by your high quality course approach. I am looking forward to buying the rest of the course when it's ready. Thank you for your effort.

[matthewpalermo]

I love the way you omit the html, head and body tags. I consider myself an intermediate front-end hobbyist and I completely missed that part of html5 until now. Mind blown.

[iwontreplybacklol]

As Ive progressed in my code learning, my thought is that this video should be shown to any new coder as required material. It introduces and explains with direct results key concepts not only for JavaScript, but all object oriented coding. As a new coder, being able to see direct results not only instills understanding but also confidence. This video is better than all of the tutorials Ive ever taken on JavaScript. 100% pure gold.

[merlinanadar]

This tutorial was by far the best I have seen, I loved the game and it was super simple. The camera and the lighting shows me how your course would be. IDK why people give credits to big entities when it is people like you who make true content. I wish I could enroll for the course but my family is not in the state buying the entire course, my sister and father had COVID-19 since 2020 and haven't recovered. I would be grateful if I could learn to make world class games from you. Anyways I LOVED your course and when I shared it with my friends on insta, They absolutely loved it. Lots of <3 from India

[m.e.]

man i was mind blown by the fade effect at 1:06:00, thanks for the great tutorial

[ndfcffcdd]

Dude the accomplishment I felt after finishing the tutorial is amazing, dude u made this possible for me to learn gamedev on js, thank you