HTML5 Canvas and JavaScript Game Tutorial
Chris Courses Chris Courses
160K subscribers
657,126 views
0

 Published On Sep 21, 2020

Start the full game course at: https://chriscourses.com/game-course

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

show more

Share/Embed