Making Asteroid Dodger with JavaScript and HTML5 Canvaswith Ted Zhu

Our Platform

We will be creating a game that can be run on any modern web browser. Our game will take advantage of two key technologies: JavaScript and the HTML5 Canvas element.

JavaScript

JavaScript is a scripting language that can be embedded inside web pages that enables us to modify the behavior of the web page, and as you'll learn in this tutorial, with this language we can encode the logic for even an entire video game!

JavaScript
Run Script

HTML5 Canvas

The HTML5 Canvas element is a rectangular display component that we can add to our web pages, and we can use JavaScript to dynamically add lines, shapes, colors, and text on to the canvas element.

An HTML Canvas Element
HTML
JavaScript
Run Script Reset
Debugging Tips

Debugging Tips

  • All JavaScript code is case-sensitive. Make sure that every letter of your code matches the casing as seen in the instructions.
  • Keep an eye out for all symbols such as parenthesis, periods, commas, quotations, and semicolons.
  • The semicolon at the end of every JavaScript statement is the easiest symbol to forget.

Note about whitespace:

For the most part, JavaScript doesn't care about whitespace (spaces, tabs, and carriage returns). In fact, it's actually encouraged for you to use as many spaces, tabs, and carriage returns as necessary to make your code easy to read. For example:

Without Whitespace
With Whitespace

Which is easier to read?

×