Intro to Game Development with JavaScript – Full Tutorial

An introduction to game development tutorial using vanilla JavaScript and HTML5 canvas. Build a complete brick-breaker game while learning the fundamentals of game development.

💻 Code / Completed Project: https://codesandbox.io/s/z2pqr9620m

⭐️ Course Contents ⭐️

⌨️ (00:00) Introduction
⌨️ (00:32) Project Setup and Canvas
⌨️ (02:07) Drawing on the Canvas
⌨️ (04:25) Clearing the Canvas
⌨️ (05:45) Creating the Player’s Paddle
⌨️ (11:42) The Game Loop
⌨️ (15:47) Handling Keyboard Input
⌨️ (17:56) Moving the Paddle
⌨️ (21:36) Stopping the Paddle
⌨️ (23:10) Drawing the Ball Image
⌨️ (26:59) Moving the Ball
⌨️ (32:11) Refactoring to the Game Class
⌨️ (38:54) Collision Detection between the Ball and Paddle
⌨️ (43:19) Loading Bricks
⌨️ (46:24) Building Levels
⌨️ (51:22) Collision Detection with Bricks
⌨️ (56:54) Pause Screen
⌨️ (1:02:08) A Simple Start Menu
⌨️ (1:06:09) Game Over
⌨️ (1:10:13) Completing Levels

🎥 Tutorial from Crhis Perko. Check out his YouTube channel: https://www.youtube.com/channel/UCraxnACLukXNgBnCq1zQnNg

🔗 Chris Perko’s blog: https://chrisperko.net

🐦 Chris on Twitter: https://twitter.com/chrisjperko

Comments

HONEY MASSEY says:

and 1st like 🙂

robertoandres24 says:

very paused and well explained man. thanks for sharing this

waltersumofan says:

dark mode with tiny font not a great choice for a video!

Coding Journey says:

Very nice!! Thanks!

OrangeBurrito says:

At 10:01, how do you draw the paddle *without* defining the ctx.fillStyle?

michael curtis says:

That filter for marked deletion was slick.

Abhishek Kumar says:

Thank u for this awesome video

OrangeBurrito says:

Actually, you don’t need ctx.clearRect anymore because the screen automatically updates in Code Sandbox.

Violet says:

In a choice between canvas and p5.js, which is more suited for making web based games and why?

nick woodward says:

Any chance of a link to a more in-depth description of the delta time and the animated frame? Not sure I fully get it. Nice video though

unkn0wn Rαge says:

Are you fucking kidding dude, 1 hour of tutorial for this game which I used to play in 1990

ZuhaibNasir Barcha says:

Hi thnx for tut. Can we run game developed using java script and html with out browser??

Nintai says:

min 5:08 // Hi thanks for the tutorial, in my project seems like there’s not need to clear, I don’t understand why your canvas reproduce that kind of latency and not in mine, is there any explanation for that?, Thanks.

twister says:

Excellent tutorial. I have learnt so much from this, not only about game development but JavaScript also. Coding along with a project like this is a great way to learn. Thank you for taking the time and effort to make this video, it is much appreciated.

Clarence Soriano says:

Python3 tutorial part2 please

Chris Lamothe says:

Hey Chris, I can’t seem to import Paddle….I’m doing the project locally in VS Code. I keep getting ‘Uncaught SyntaxError: Unexpected identifier app.js:1’ Any ideas?

Phạm Hữu Bằng says:

This tutorial is awesome in terms of game development but also with the updated Javascript features, it deserves more comments.

nitesh kamde says:

Groovy grails tutorial please..

Brent says:

Would love to see a video using Phaser 3.

Aciz Mütefekkir says:

thanks

God Makoto says:

Can you make scripts whit it?

avi12 says:

12:16 This is clearly not the reason.
JavaScript is a single-threaded programming language, i.e. all the code runs on that thread by default.
if you put somewhere, without a breakpoint:
while (true) {
// Code
}
The JS engine will just be stuck at this block of code, and as a result – the page will freeze (unless somewhere in the code you include a break; statement).
The reason for using requestAnimationFrame() recursively, is that this built-in function _asks_ the browser “run me when *you* can”.
It’s similar but different than setTimeout() – the difference is that setTimeout() runs after all the code around it in the same block was executed, and then the function will run after X amount of ms that you specify to it.
Same goes for setInterval(), but setInterval() is just like setTimeout() that continues until somewhere in the setInterval() code you call: clearInterval(interval_ID);

HONEY MASSEY says:

1st one watching

Ricci Rich says:

Hi there
What’s the best way to get back to the Menu screen, and restart the game after you’ve lost all lives?

Bagrat Gharagyozyan says:

I appreciate your EFFORT!!!

telebrate web designs says:

Increase font size can’t see anything

Jindon says:

Name typo in video description. Right on top of the channel link.

Chris Perko says:

Hey guys! I hope you enjoy this video. Check out my channel for other tutorials! And if you have questions, feel free to reach out to me!

 Write a comment

*

Do you like our videos?
Do you want to see more like that?

Please click below to support us on Facebook!