Do It Yourself – Website Tutorials

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