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
source
I'm probably just really stupid but whenever I tried adding the ball.png I got an InvalidStateError reading: Failed to execute 'drawImage' on 'CanvasRenderingContext2D': The HTMLImageElement provided is in the 'broken' state. I am new to javascript so I have no clue what that means.
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.
33:50
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)'.
Help
when someone starts using JAVA classes in JS i quit
2:04
4:28… I only got a black square instead of red… And the blue square did not even appeard… Why sir?
Great work 👍
10:03
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.
Javascript sucks, it is so sad that many people want to use it everywhere
I'm learning solidity blockchain programming I know it is javascript base but you can use python as well still trying to understand all that but I'm trying to figure out how to get smart contracts to pull data from a video game variable thus creating the blockchain on one side and the game on the other side and just linking them together to adjust the data of the variables between them.
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
Transition Font?
Can you use visual Studio Code for that too?
One of the best tutorials about javascript canvas game intro!
18:44
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"
restart() {
if (
this.gamestate === GAMESTATE.GAMEOVER ||
this.gamestate === GAMESTATE.MENU
) {
this.lives = 3;
this.gamestate = GAMESTATE.MENU;
this.start();
}
}
also change the start() to restart() in "input.js" under case 32
😍😍😍😍