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
hey, for some reason, the ctx in draw(ctx) was not syncing up with the main ctx with the value "of canvas.getContext("2d");". Am I doing something wrong here?
Beginner js hein?
vs said keyCode is deprecated. What's that mean???
😍😍😍😍
Thank you for passing my exam
18:44
One of the best tutorials about javascript canvas game intro!
Can you use visual Studio Code for that too?
Transition Font?
45:36 everything killed itself 🙂 I give up
interesting tutorial. I learned a good amount.
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…
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.
Javascript sucks, it is so sad that many people want to use it everywhere
ugh, this doesn't work. STOP LYING.
Absolutely great tutorial!
Step by step, in just 1 hour you get a working game – incredible!
am i having an acid flashback or is your camera doing something funny
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?
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
10:03
Great work 👍