Chapters (20)
- 0:00Introduction
- 0:32Project Setup and Canvas
- 2:07Drawing on the Canvas
- 4:25Clearing the Canvas
- 5:45Creating the Player's Paddle
- 11:42The Game Loop
- 15:47Handling Keyboard Input
- 17:56Moving the Paddle
- 21:36Stopping the Paddle
- 23:10Drawing the Ball Image
- 26:59Moving the Ball
- 32:11Refactoring to the Game Class
- 38:54Collision Detection between the Ball and Paddle
- 43:19Loading Bricks
- 46:24Building Levels
- 51:22Collision Detection with Bricks
- 56:54Pause Screen
- 1:02:08A Simple Start Menu
- 1:06:09Game Over
- 1:10:13Completing Levels
Show the creator's full description
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
❤️ Try interactive JavaScript courses we love, right in your browser: https://scrimba.com/freeCodeCamp-JavaScript (Made possible by a grant from our friends at Scrimba)
⭐️ 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
Description and video by freeCodeCamp.org. This page is an independent companion view; the video is embedded from YouTube.