Kid.js | Create an Asteroids Game Using JavaScript

In this lesson, we’ll recreate the classic game of Asteroids using JavaScript. We’ll learn about functions and events, and demonstrate a real world use for trigonometry—video games!

This lesson uses the Kid.js JavaScript framework. To get started with Kid.js, create an account on kidjs.app or import the framework into your own project.

Part 1: The Spaceship 40 Minutes

Our first task will be to design the spaceship.

Functions

We program a computer by giving it a series of commands, also known as functions. To run a command or function in JavaScript, type the name of the function followed by parentheses.

Many functions need parameters. For example, if you were to command someone to walk, you may also need to tell them how many steps or which direction. The parameters go inside of the parentheses.

Let's use the triangle() function to create the body of our spaceship. The parameters for the triangle function are (in order) the x coordinate, y coordinate, width and height.

triangle(400, 200, 40, 80)

Play around with different numbers and see the results.

Variables

Variables are used to keep track of things. Think of a variable as a box with a label you can put things in. There are many things we may need to keep track of in an app, such as the high score or health.

Variables are also useful for assigning names to things. Let's give our triangle a name. This will allow us to reference it later. We use the let keyword to create a variable and the equals operator to assign it a value.

let body = triangle(400, 200, 40, 80)

Properties

Properties describe something. You have properties, such as your age and height. Objects in JavaScript have properties too. The color property for example.

We can set the color of the spaceship by assigning a new value to the color property.

let body = triangle(400, 200, 40, 80) body.color = 'silver'

We can also change the angle of the shape. While designing our spaceship, we're going to point the nose of the spaceship to the right. We'll do this because it corresponds to the angle zero and will simplify our code later on. Don't worry, we'll reposition the spaceship later.

let body = triangle(400, 200, 40, 80) body.color = 'silver' body.angle = 90

Now add some wings, setting their color and angle properties to align with the spaceship body.

let body = triangle(400, 200, 40, 80) body.color = 'silver' body.angle = 90 let leftWing = triangle(380, 170, 20, 60) leftWing.color = 'silver' leftWing.angle = -10 let rightWing = triangle(380, 230, 20, 60) rightWing.color = 'silver' rightWing.angle = 190

This is perhaps the most boring looking spaceship in history, and I'm sure you can do better. Spend some time making the spaceship your own. Explore the different shape commands. Add a cockpit, or afterburner. Remember that each piece of your spaceship must have an unique variable name.

Grouping Shapes

When finished designing your spaceship, group all the shapes that make up your craft into a single object using the group() command. Pass the shapes as parameters.

let spaceship = group(body, leftwing, right)

With the shapes grouped together, we can reposition the entire spaceship in the center of the screen, and point it upwards.

let spaceship = group(body, leftWing, rightWing)
spaceship.x = width / 2
spaceship.y = height / 2
spaceship.angle = -90

Part 2: Movement 20 minutes

With our spaceship complete, the next task is to make it move.

Events

Events are "things" that happen while our app is running, like a mouse click, or key press. We can write code that runs when that event occurs.

We’re going to create our own command or function that will run when a key is pressed. A function that runs when an event occurs is called an Event Handler.

The event handler for a keyboard event is passed a parameter that contains which key was pressed. In the event handler we use an if statement to check if the key pressed is the left arrow. If it is, we'll change the ship’s angle, rotating it slightly counterclockwise.

function moveShip(key) {
  if (key == 'ArrowLeft') {
    spaceship.rotate(-1)
  }
}

on('keydown', moveShip)

We'll rotate in the other direction for the right arrow key.

function moveShip(key) {
  if (key == 'ArrowLeft') {
    spaceship.rotate(-1)
  }
  if (key == 'ArrowRight') {
    spaceship.rotate(1)
  }
}

on('keydown', moveShip)

And move the ship forward if the up arrow is pressed.

function moveShip(key) {
  if (key == 'ArrowLeft') {
    spaceship.rotate(-1)
  }
  if (key == 'ArrowRight') {
    spaceship.rotate(1)
  }
  if (key == 'ArrowUp') {
    spaceship.forward(1)
  }
}

on('keydown', moveShip)

Let's take a look at the complete project so far.

let body = triangle(300, 300, 40, 80) body.color = 'silver' body.angle = 90 let leftWing = triangle(280, 270, 20, 60) leftWing.color = 'silver' leftWing.angle = -10 let rightWing = triangle(280, 330, 20, 60) rightWing.color = 'silver' rightWing.angle = 190 let spaceship = group(body, leftWing, rightWing) spaceship.x = width / 2 spaceship.y = height / 2 spaceship.angle = -90 function moveShip(key) { if (key == 'ArrowLeft') { spaceship.rotate(-1) } if (key == 'ArrowRight') { spaceship.rotate(1) } if (key == 'ArrowUp') { spaceship.forward(1) } } on('keydown', moveShip)