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
Amazon Auto Links: No products found.
![Tetris #1 – HTML5 Game Programming Tutorial [javascript]](https://img.youtube.com/vi/Z3wvP27eW98/0.jpg "Tetris #1 – HTML5 Game Programming Tutorial [javascript]")
and 1st like 🙂
very paused and well explained man. thanks for sharing this
dark mode with tiny font not a great choice for a video!
Very nice!! Thanks!
At 10:01, how do you draw the paddle *without* defining the ctx.fillStyle?
That filter for marked deletion was slick.
Thank u for this awesome video
Actually, you don’t need ctx.clearRect anymore because the screen automatically updates in Code Sandbox.
In a choice between canvas and p5.js, which is more suited for making web based games and why?
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
Are you fucking kidding dude, 1 hour of tutorial for this game which I used to play in 1990
Hi thnx for tut. Can we run game developed using java script and html with out browser??
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.
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.
Python3 tutorial part2 please
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?
This tutorial is awesome in terms of game development but also with the updated Javascript features, it deserves more comments.
Groovy grails tutorial please..
Would love to see a video using Phaser 3.
thanks
Can you make scripts whit it?
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);
1st one watching
Hi there
What’s the best way to get back to the Menu screen, and restart the game after you’ve lost all lives?
I appreciate your EFFORT!!!
Increase font size can’t see anything
Name typo in video description. Right on top of the channel link.
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!