• Monday , 6 July 2020

Intro to Game Development with JavaScript – Full Tutorial

Code Canyon

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

Original source

3d Ocean

Related Posts


  1. Chris Perko
    November 12, 2019 at 18:43

    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!

  2. fortnite PLAYUR
    November 12, 2019 at 18:43

    I had a error that said "Cannot read property 'getContext' of null

  3. Grinsekotze
    November 12, 2019 at 18:43

    There's a mistake at 13:20. That should obviously be this.position.x += 5 * deltaTime;

  4. Eddie
    November 12, 2019 at 18:43

    When I try to load the black box, I get this message in my console:
    GET file:///C:/Users/13159/Documents/FreeCodeRPG/src/rpg.js net::ERR_FILE_NOT_FOUND

  5. thuận võ
    November 12, 2019 at 18:43

    OOP so great, I always code javascript don't have ruled. It makes my code so messy

  6. maxrod98
    November 12, 2019 at 18:43

    For the ones having difficulty displaying the paddle. use
    <script type ="module" src = "index.js"></script>
    import Paddle from "/paddle.js";
    instead of the codes provided in the video.

  7. luuk roeper
    November 12, 2019 at 18:43

    I have an error with
    import Paddle from '/src/paddle'

  8. Cosmin Croitoriu
    November 12, 2019 at 18:43

    Why there's no paddle in my local but appears with the same exact code in codesandbox?

  9. Nox Populi
    November 12, 2019 at 18:43

    why cant i import

  10. Balaporte Jean
    November 12, 2019 at 18:43

    thx bro
    it helps a lot
    Jesus loves you
    Believe in him and repent

  11. Rebel Kline
    November 12, 2019 at 18:43

    "Uncaught SyntaxError: Cannot use import statement outside a module" – any idea how to resolve this error?

  12. Ron C.
    November 12, 2019 at 18:43

    My version is not responding to the collision on the sides of the object. So when the ball hits the left/right side of either paddle or bricks the ball is not bouncing. Has this happened to someone else too? any idea what could be causing it? I am comparing my code with the one on the video and looks similar to mine.

  13. Close the console to fix the error
    November 12, 2019 at 18:43

    Guys if you want your paddle to move by mouse then just input this instead all of that code for left and right arrow key:

    cvs.addEventListener('mousemove', (event) => {

    paddle.position.x = event.offsetX;


  14. Hakim m
    November 12, 2019 at 18:43

    Question: Why does having the if statements at 22:54 make the paddle not stutter?

  15. Rian Tegally
    November 12, 2019 at 18:43

    Why the timestamp in the function at 15:42 ? it is only a parameter, but never set equal to anything

  16. Broke WebDeveloper
    November 12, 2019 at 18:43

    Also The Paddle's Not Coming To Center.

  17. Broke WebDeveloper
    November 12, 2019 at 18:43

    Also instead of doing var use let it is better at assigning variables.

  18. Randy Keller
    November 12, 2019 at 18:43

    Once I started doing the import export of the class Paddle, it wouldn't show the paddle on the screen. Not sure what to do

  19. Gergö Birgés
    November 12, 2019 at 18:43

    Hi there, really awesome tutorial.
    Actually I found a bug:
    the ball can enter the blocks from the sides making weird zigzagging an destroying a lot of blocks.
    in the collision detection file you have to add the ball size to the leftsideofobject comparison instead of the right. (line 13&14)

  20. Danial Nawab
    November 12, 2019 at 18:43

    I keep having this "Cannot set property 'innerHTML' of null". Any help

  21. Krakor
    November 12, 2019 at 18:43

    Thanks for this great turorial, very cool

  22. Brandon Gonzalez
    November 12, 2019 at 18:43

    The alerts while testing the input handler (the ones that say "move right" and "move left") keep coming nonstop after I press ok, even though I removed the alert line. Its like theres "ghost code" still executing. Any suggestions on how to fix this?

Leave A Comment

You must be logged in to post a comment.