Learn game development fundamentals by building a complete brick-breaker game using vanilla JavaScript and HTML5 canvas in this comprehensive tutorial. Explore essential concepts including project setup, canvas manipulation, game loop implementation, keyboard input handling, collision detection, and level design. Progress through step-by-step instructions to create player paddles, animate balls, load bricks, and implement game mechanics such as pausing, start menus, and level completion. Access the completed project code and follow along with detailed video segments covering each aspect of game development.
Overview
Syllabus
) Introduction.
) Project Setup and Canvas.
) Drawing on the Canvas.
) Clearing the Canvas.
) Creating the Player's Paddle.
) The Game Loop.
) Handling Keyboard Input.
) Moving the Paddle.
) Stopping the Paddle.
) Drawing the Ball Image.
) Moving the Ball.
) Refactoring to the Game Class.
) Collision Detection between the Ball and Paddle.
) Loading Bricks.
) Building Levels.
) Collision Detection with Bricks.
) Pause Screen.
) A Simple Start Menu.
) Game Over.
) Completing Levels.
Taught by
freeCodeCamp.org
Related Courses
-
Unity GameDev Tutorial for Beginners: Brick Breaker Game
-
Code a 2D Game Using JavaScript, HTML, and CSS (w/ Free Game Assets) – Tutorial
-
Animated Physics Game with JavaScript - Tutorial
-
Create a Platformer Game with JavaScript - Full Tutorial
-
Python & PyGame Tutorial – Code a Duck Hunt Game
-
Code Asteroids in JavaScript (1979 Atari game) - tutorial
Related articles
Reviews
4.0 rating, based on 1 Class Central review
-
This is a very useful course to start developing games in HTML and Javascript. It covers some of the basic concepts related to game development.
