Javascript Game Development Create Your Own Breakout Game

Take your JavaScript learning experience to the next level and start building interactive games.

Last updated 2022-01-10 | 4.5

- Build a complete JavaScript game from scratch
- Understand how HTML
- CSS
- and JavaScript work together
- Understand how the element works

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

* 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.

Course content

4 sections • 26 lectures

Set up and Basic Shape Creation Preview 08:38

More Practice with the Canvas Preview 06:55

Extra Information About the Canvas Preview 00:18

Creating and Moving the Ball Preview 05:57

Canvas Grid System and Draw function Preview 04:39

Collision Detection Preview 07:35

Updating the Collision Detection Preview 02:11

Creating the Paddle Preview 13:07

Game over State Preview 05:29

Review of Arrays and Objects Preview 00:34

A Note Before Starting the Next Lecture Preview 00:21

Creating the Brick Field Preview 12:00

Brick Field Collision Detection Preview 06:41

Keeping Track of the Score Preview 04:20

Adding Mouse Controls Preview 05:51

Mouse Controls: Exercise Solution Preview 00:43

Adding Player Lives Preview 05:44

Adding the drawLives() Function Preview 00:14

Adding Levels Preview 08:35

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

Increasing Game Difficultly and Adding Pause Screen Preview 13:59

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

Randomizing Ball Start Preview 07:53

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.

Update: New URL for Ball Image Preview 00:13

Replacing Ball with Image Preview 03:57

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.