💻 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
This Post Has 29 Comments
do you have a video explaining how to use babel and run this locally cause the ide you suggest freezes constantly
I got a problem From the start
When importing the paddle class to my index.js
It's giving me some error
Like, "Cannot use import statement Outside a module"
I've checked single code, but can't resolved this
Pls any help 😢
If you've done all the instructions in the vid, you'll find a couple of glitches. If you press Esc at startup instead of space, it'll freeze the game. Also, if you press Esc to pause and then press space, you won't be able to get out of pause.
Bro I actually want to erase myself from earth I can’t figure out the import error even though I put them in different folders or write the import code it still says error module not found
Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The provided value is not of type '(CSSImageValue or HTMLCanvasElement or HTMLImageElement or HTMLVideoElement or ImageBitmap or OffscreenCanvas or SVGImageElement or VideoFrame)'.
when someone starts using JAVA classes in JS i quit
4:28… I only got a black square instead of red… And the blue square did not even appeard… Why sir?
Great work 👍
im sorry dumb question how did u get the ball.png i tried doing it and my src just errors my page with 15 stacked frames
How the line 67 in game.js can work? the method "filter" make a copy of the array, then this copy is assigned to the original one? Usually a=a.filter(…) fail. Why here it works?
am i having an acid flashback or is your camera doing something funny
Absolutely great tutorial!
Step by step, in just 1 hour you get a working game – incredible!
ugh, this doesn't work. STOP LYING.
When I get to @9:50, the Firefox Console shows "Uncaught SyntaxError: import declarations may only appear at top level of a module" and "Uncaught SyntaxError: export declarations may only appear at top level of a module", and I can't get the paddle to show…
interesting tutorial. I learned a good amount.
45:36 everything killed itself 🙂 I give up
Can you use visual Studio Code for that too?
Thank you for passing my exam
If anyone wonders how to restart the game after you lose your lives:
You could add a new function that restores your lives and that way, you'll be able to play again:
//ADD THIS FUNCTION UNDER start() in "game.js"
this.gamestate === GAMESTATE.GAMEOVER ||
this.gamestate === GAMESTATE.MENU
this.lives = 3;
this.gamestate = GAMESTATE.MENU;
also change the start() to restart() in "input.js" under case 32