In my last post, I got most of the Killer Robots game laid out. I did the following:
- Decided on a story line
- Got the artwork
- Created the first screen, the classroom
- Wrote a function to get the robots to move and another function to get the robots to turn into a fireball when the player clicked on them.
- Created sound functions to play background music when the game starts, make an exploding sound when a robot is destroyed, a louder explosion at the end if they lose the game and applause if they win.
Design and development really goes back and forth
I made it sound above like I was more organized than was really true. The truth is that I thought I had all the artwork and then I thought,
Wait a minute! What happens when you destroy a robot? It should look different. It can’t just be the same image of a robot. You need to know somehow that you destroyed it.
Next steps …
The gameOver function
When you are designing a game you need to ask yourself four questions:
- How do you know if you have won ?
- What happens when you win?
- How do you know if you have lost?
- What happens when you lose?
In my game, there are going to be two rooms. First, you are in the classroom where 10 robots appear and one of them is a killer robot. If you destroy that, you go to the next room where there are 20 robots and two of them are killers. Once you have destroyed all three robots, you win.
I decided that the easiest way to know if you won was just create a variable kills that contained the number of robots destroyed. If that variable equals three, then, hurray, you win.
When the game starts, I initialize that variable:
let kills = 0 ;
This line goes at the beginning, when I start the game.
All this happens in the detectHit function
You destroy a robot by clicking on it. The detectHit functions, as the name implies, detects whether a robot was hit or not. When you destroy a robot the clicked robot should turn into a fireball, a small explosion sound should play, after a second, the fireball should be removed from the screen. The number of kills should increment by one.
kills++ ;
In that same function, it should check whether there were 1, 2 or 3 robots killed. If it’s only 1 that means they killed the robot in the classroom. It should turn into a fireball, a small explosion sound should play and then the game should fade into the next scene.
If it’s 3 robots, then the gameOver function should execute.
Go to the gameOver function
What happens next? Well, I thought it would be funny if the game ends and you go back to the classroom and the teacher is lecturing on prevalence like nothing ever happened. So … if it’s three and they win the game, there is applause and then you are back in the class.
How do you know if you lost?
On the first screen, I have the robot move every second. If it it has moved 30 times, that is 30 seconds, and if the player hasn’t destroyed it yet, they lose. So, I need a variable to count how many times the robot has moved. That goes at the very beginning of the game.
let iterations = 0 ;
Every time the robot moves, I add one to iterations
iterations++;
This happens in the moveRobot function. It also checks if the number of iterations has reached 30. If so, the game is over so the gameOver function is executed.
if (iterations < 30 ){
timer = setTimeout("moveRobot()",1000);
}
else {
gameOver() ;
}
If the game is over and the number of kills is less than 3, a big explosion sound plays, the screen turns red with a dark red and black explosion over it. Then the player is sent back to the classroom (in the game).
You think you are done at this point and you are almost right
There are a lot of minor points you’ll have to clean up. For example, if you are playing on a mobile device and the player taps multiple times in a row, the default is “zoom in on the image”. Do you want to zoom in on the robots if the player taps multiple time on a non-killer robot?
Wait! How does this game even start?
Have I forgotten to add a start button?
Maybe.
In real life, programming is a lot of going back and fixing the things you forgot the first time and that’s perfectly okay.
HEY! I’m teaching a game design class for students in grades 6-9 and you can still sign up here!
The class for September are full but there are still a couple of spots available for the October session.
game over