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

*

Human Verification: In order to verify that you are a human and not a spam bot, please enter the answer into the following box below based on the instructions contained in the graphic.


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

Please click below to support us on Facebook!

Send this to a friend

▷ Other ReviewsVehicles▷ Show Cars▷ Motorbikes▷ Scooters▷ Bicycles▷ Rims & Tires▷ Luxury BoatsFashion▷ Sunglasses▷ Luxury Watches▷ Luxury Purses▷ Jeans Wear▷ High Heels▷ Kinis Swimwear▷ Perfumes▷ Jewellery▷ Cosmetics▷ Shaving Helpers▷ Fashion HatsFooding▷ Chef Club▷ Fooding Helpers▷ Coktails & LiquorsSports▷ Sport Shoes▷ Fitness & Detox▷ Golf Gear▷ Racquets▷ Hiking & Trek Gear▷ Diving Equipment▷ Ski Gear▷ Snowboards▷ Surf Boards▷ Rollers & SkatesEntertainment▷ DIY Guides▷ Zik Instruments▷ Published Books▷ Music Albums▷ Cine Movies▷ Trading Helpers▷ Make Money▷ Fishing Equipment▷ Paintball Supplies▷ Trading Card Games▷ Telescopes▷ Knives▷ VapesHigh Tech▷ Flat Screens▷ Tech Devices▷ Camera Lenses▷ Audio HiFi▷ Printers▷ USB Devices▷ PC Hardware▷ Network Gear▷ Cloud Servers▷ Software Helpers▷ Programmer Helpers▷ Mobile Apps▷ Hearing AidsHome▷ Home Furniture▷ Home Appliances▷ Tools Workshop▷ Beddings▷ Floor Layings▷ Barbecues▷ Aquarium Gear▷ Safe Boxes▷ Office Supplies▷ Security Locks▷ Cleaning ProductsKids▷ Baby Strollers▷ Child Car Seats▷ Remote ControlledTravel▷ Luggages & Bags▷ Airlines Seats▷ Hotel Rooms▷ Fun Trips▷ Cruise Ships▷ Mexico Tours