Asteroids Session 2 of 3
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.
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.
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)