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

source

This Post Has 29 Comments

  1. Donovan Latham

    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.

  2. m falcon

    do you have a video explaining how to use babel and run this locally cause the ide you suggest freezes constantly

  3. 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 😢

  4. JackOfAllRAIDs

    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.

  5. Rugged Scythe

    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

  6. Senpai

    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

  7. Nodsaibot

    when someone starts using JAVA classes in JS i quit

  8. Amv school

    4:28… I only got a black square instead of red… And the blue square did not even appeard… Why sir?

  9. BunzGuy

    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. Adrien Ouilou

    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?

  11. NiftyG

    am i having an acid flashback or is your camera doing something funny

  12. Mikhail Glukhov

    Absolutely great tutorial!

    Step by step, in just 1 hour you get a working game – incredible!

  13. Erald Guri

    Javascript sucks, it is so sad that many people want to use it everywhere

  14. traders gambit

    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.

  15. E3-PO

    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…

  16. _Farex_

    Can you use visual Studio Code for that too?

  17. Ilhom M

    One of the best tutorials about javascript canvas game intro!

  18. Kacper Rolewski

    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

Leave a Reply