JavaScript Game Development: Create Your Own Breakout Game
4.3 (901 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
26,077 students enrolled

JavaScript Game Development: Create Your Own Breakout Game

Take your JavaScript learning experience to the next level and start building interactive games.
4.3 (901 ratings)
Course Ratings are calculated from individual students’ ratings and a variety of other signals, like age of rating and reliability, to ensure that they reflect course quality fairly and accurately.
26,077 students enrolled
Created by Komar Academy
Last updated 1/2018
English
English [Auto-generated]
Current price: $11.99 Original price: $19.99 Discount: 40% off
2 days left at this price!
30-Day Money-Back Guarantee
This course includes
  • 2 hours on-demand video
  • 6 articles
  • 1 downloadable resource
  • Full lifetime access
  • Access on mobile and TV
  • Certificate of Completion
Training 5 or more people?

Get your team access to Udemy's top 3,000+ courses anytime, anywhere.

Try Udemy for Business
What you'll learn
  • Build a complete JavaScript game from scratch
  • Understand how HTML, CSS, and JavaScript work together

  • Understand how the <canvas> element works

Course content
Expand all 25 lectures 02:08:13
+ Introduction to the Canvas
3 lectures 15:53
More Practice with the Canvas
06:55
Extra Information About the Canvas
00:20
+ Creating our Breakout Game
15 lectures 01:15:35
Creating and Moving the Ball
05:57
Canvas Grid System and Draw function
04:39
Collision Detection
07:35
Updating the Collision Detection
02:11
Creating the Paddle
13:07
Game over State
05:29
Review of Arrays and Objects
00:37
A Note Before Starting the Next Lecture
00:21
Creating the Brick Field
12:00
Brick Field Collision Detection
06:41
Keeping Track of the Score
04:20
Adding Mouse Controls
05:51
Mouse Controls: Exercise Solution
00:47
Adding Player Lives
05:44
Adding the drawLives() Function
00:15
+ BONUS: Expanding Our Game
4 lectures 34:24

Learn how to add more than 1 level to our game.

Adding Levels
08:35

In this lecture we will add a pause screen, and more brick rows, and increase the ball speed between levels.

Increasing Game Difficultly and Adding Pause Screen
13:59

I'll introduce the Math.random() and Math.floor() methods and how we can use them to start our ball in a random position each time the game starts.

Randomizing Ball Start
07:53

In this lecture we will be replacing our regular ball with an image. I use this one here: http://pngimg.com/uploads/football/football_PNG52790.png (the previously mentioned image link, https://s20.postimg.org/cayyuwmal/ball.jpg, is no longer working). However, feel free to find your own image and use that instead. 

Replacing Ball with Image
03:57
Requirements
  • A computer and an internet connection is all you need. Everything you may need to download will be described in the lectures.
Description

Take a step-by-step approach to learning how to build a complete JavaScript game. In this course we will cover the basic set up of the HTML and CSS pages and then we will dive right into coding our game! Starting from creating basic shapes on our canvas element to animating a ball, and then finally keeping track of the player's lives and score. We will cover many interesting topics, including:

  • HTML canvas element
  • for loops
  • arrays
  • objects
  • creating custom functions
  • mouse controls

And much more!

There are only two things that you need to take this course: an internet connection and a computer. There is no need to download any paid software or set up complex development environments.

The course is 1.5 hours long and is structured in a step-by-step manner, from simple to more difficult concepts. We build the JavaScript game from the ground up and cover each game component one at a time - so you will never feel overwhelmed with the content.

 With the knowledge gained in this course you can move forward and build more complex JavaScript games, and use the game you created at the end of this course to add to your portfolio or just impress your friends.

The material in this course is adapted from MDN, licensed under CC-BY-SA 2.5.

I hope to hear from you soon, and look forward to having you in my course!

Who this course is for:
  • This course is for all skill levels, however, those who already have some familiarity with HTML, CSS and JavaScript may find it easier to follow along. Nevertheless, it's still strongly encouraged for beginners and novices to take this course as well, because challenging yourself is the only way to improve – at the very least, you’ll understand areas in your learning that need improvement.