Kid.js | Create an Asteroids Game Using JavaScript

Part 3: Asteroid Field 60 Minutes

Next, we'll randomly place some asteroids. Use the random() function to generate a random x coordinate between 0 and the width of the screen, a random y coordinate between 0 and the height of the screen, and a random size between 40 and 70.

let x = random(0, width)
let y = random(0, height)
let size = random(40, 70)
let asteroid = circle(x, y, size)

Feel free to change these numbers for bigger or smaller asteroids.

For Loops

A for loop is used to repeat a block of code. We can use it here to place multiple asteroids. A for loop is broken into three parts. Code that runs before the loop starts; a condition to check if we should continue; and code that runs after each pass through the loop.

In the first part, we'll create a new variable i to keep track of the number of times the loop has run. Start it off at 0.

For the second part, we check to see if i is less than 20. If true, then the loop continues. If 20 asteroids isn't enough for you, use a bigger number here.

For the third part, increase i by 1.

Let's look at the entire game.

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('keypress', moveShip) for (let i = 0; i < 20; i = i + 1) { let x = random(0, width) let y = random(0, height) let size = random(40, 70) let asteroid = circle(x, y, size) }

Huston, we have a problem! Chances are a number of asteroids were placed immediately on top of the spaceship. We want to create a safe zone around our spaceship where no asteroids are placed, otherwise the game will be over before it begins.

Before placing each asteroid, we’ll check the distance between the asteroid and our spaceship. If it’s too close, we won’t place it. But how do we determine the distance between the asteroid and our spaceship?

Pythagorean Theorem

Early mathematicians recognized a pattern in the lengths of the three sides of a right angle triangle. The length of the hypotenuse (the side opposite the right angle) squared, is the same as the sum of the length of the other two sides squared.

Therefore, if you know the length of the two sides next to the right angle, you can figure out the length of the hypotenuse.

c² = a² + b²
c = √a² + b²

Figure 2: Length of Hypotenuse

We can find the length of a by subtracting the x coordinate of the asteroid from the x coordinate of the spaceship. Similarly we can find the length of b by subtracting the y coordinates.

Plug those into the equation above and we have our distance.

for (let i = 0; i < 20; i = i + 1) {
  let x = random(0, width)
  let y = random(0, height)
  let size = random(40, 70)
  let a = spaceship.x - x
  let b = spaceship.y - y
  let distance = Math.sqrt(a * a + b * b)
  let asteroid = circle(x, y, size)
}

Now we’ll use an if statement to only place an asteroid if the distance is greater than 200. You may need to tweak this value depending on the size of your spaceship.

for (let i = 0; i < 20; i = i + 1) {
  let x = random(0, width)
  let y = random(0, height)
  let size = random(40, 70)
  let a = spaceship.x - x
  let b = spaceship.y - y
  let distance = Math.sqrt(a * a + b * b)
  if (distance > 200) {
    let asteroid = circle(x, y, size)
  }
}

Setting It In Motion

After placing an asteroid, let’s give it a push in a random direction.

for (let i = 0; i < 20; i = i + 1) {
  let x = random(0, width)
  let y = random(0, height)
  let size = random(40, 70)
  let a = spaceship.x - x
  let b = spaceship.y - y
  let distance = Math.sqrt(a * a + b * b)
  if (distance > 200) {
    let asteroid = circle(x, y, size)
    asteroid.speed = random(1, 2)
    asteroid.direction = random(0, 360)
  }
}

Finally, let’s watch out for asteroids hitting the ship. We'll listen for a "collision" event on the spaceship. Set up an event listener, just like we did for the "keydown" event.

function crash() {
  spaceship.explode()
}

spaceship.on('collision', crash)