Intro to Game Development with JavaScript - Full Tutorial

Channel:
United States freeCodeCamp.org
Subscribers:
10,700,000
Published on ● Video Link: https://www.youtube.com/watch?v=3EMxBkqC4z0


Duration: 1:16:15
526,584 views
11,063

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



Other Videos By freeCodeCamp.org


2018-10-26How to stream on YouTube using OBS - in-depth OBS tutorial
2018-10-25Let’s Build a Tinder-Like Swipe Carousel
2018-10-23Gatsby - Full Tutorial for Beginners
2018-10-19Create a Kanban Board
2018-10-18Tweet Visualization and Sentiment Analysis in Python - Full Tutorial
2018-10-17Intro to Computer Networks - Crash Course
2018-10-16Protected Routes in React using React Router
2018-10-15Building React Components (P5D101) - Live Coding with Jesse
2018-10-15HTML and CSS Tutorial - Create a Website for Beginners
2018-10-12The History of JavaScript: a timeline of programming language evolution over the past 20 years
2018-10-11Intro to Game Development with JavaScript - Full Tutorial
2018-10-10CSS Coffee Cup: CSS Tutorial (Day 30 of CSS3 in 30 Days)
2018-10-09Blurry Effect: CSS Tutorial (Day 29 of CSS3 in 30 Days)
2018-10-09JavaScript Classes Tutorial
2018-10-08Optimizing CSS: CSS Tutorial (Day 28 of CSS3 in 30 Days)
2018-10-08Creating a Progressive Web App Manifest (P5D100) - Live Coding with Jesse
2018-10-07CSS Only Dropdown Menu: CSS Tutorial (Day 27 of CSS3 in 30 Days)
2018-10-063d Layer Effect: CSS Tutorial (Day 26 of CSS3 in 30 Days)
2018-10-05Sliding Panels: CSS Tutorial (Day 25 of CSS3 in 30 Days)
2018-10-05GraphQL Server Intermediate Tutorial - Boilerplate with Typescript, PostgreSQL, and Redis
2018-10-04@supports Rule: CSS Tutorial (Day 24 of CSS3 in 30 Days)


Tags:
game development
intro to game development
game development tutorial
game development course
game dev
gamedeve
game development in javascript
javascript games
make javascript games
javascript tutorial
game development for beginners
javascript course
javascript tutorial for beginners
html
html canvas
brick breaker
brick breaker game