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

Original source


22 responses to “Intro to Game Development with JavaScript – Full Tutorial”

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

  2. 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.

  3. 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.
    solution:
    in the collision detection file you have to add the ball size to the leftsideofobject comparison instead of the right. (line 13&14)

  4. 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 Reply