Game design step by step


You know what this game needs? Killer robots.

I actually said this to myself as I was working on our latest game, Empiric Empire, which teaches about frequency distributions, prevalence, incidence and case fatality. Fun stuff. As the Time Travel Academy was explaining the difference between incidence and prevalence, I thought,

This is dragging on too long. Students will need a break. What about that idea the game design class this summer had about an attack of killer robots?

Here are the steps I took in designing and coding a game that takes all of two minutes.

The game takes two minutes, that is. The coding and design part took me a couple of days.

First, decide on the story line

Since the players are in a classroom in the Time Travel Academy I thought it would fit with the story if some robots escaped from a lab and one out of ten were infected. After they destroy the robot that is in their classroom, they escape into the hall where there are twice as many robots, same prevalence, and defeat the killer robots there. Then, they return to the class where the instructor acts as if this is nothing out of the ordinary and continues on with the lecture.

Second, get the artwork

No one is searching for a walking robot on teachers pay teachers

I had background images for the classroom and the hallway of the academy, as well as characters for two students and an instructor. I even had a robot. What about when they destroy the robot, though? What happens then? I decided to have it burst into flames, so, I needed a fireball image. If they destroy the robots they go back to class. What if they lose, though? I thought the whole classroom should explode, so, I need an explosion graphic.

explosion in killer robots game
Explosion when you lose the game

Step three, lay out the first screen

Here is where your first step of coding comes in. This game is going to run on phones and tablets which can be of all different sizes. People would probably like a game to take up all or almost all of the screen.

Here is a tip – create three variables:

  • Game area
  • Width
  • Length

The game area, that is, the size of the screen that the robots can move around, will be computed based on the width and length of the screen on the device.

Once I have the area laid out, with an image of the classroom behind it, I want to add some robots. Since I am teaching about prevalence, say, that 100 out of 1,000 are infected with Killer Robot Disease, I decide to start with 9 normal robots. If I’m going to keep adding robots, I want a loop to do it, so I wrote that.

Step Four, handle the robots

It would be a pretty stupid game if the robot didn’t move and you just tapped on it to destroy it. I want to make the robot move randomly. If you know how, it’s not terribly hard to write a function to do that.

When you tap on the robot something should happen. At first, I write a function to make it turn into a fireball. So, now what? Does it keep moving around as a ball of fire or does it burn up and disappear? I went for the disappearing after a second or so. Also, the first screen only has one killer robot so once you destroy it you should find yourself out in the hallway, so have to add changing the background to this function.

I think there should be some sounds when the robot is destroyed but I haven’t written any sound functions yet. Damn! I’ll make a note to myself in the comments and get to that later.

In the next screen, I have two robots, so I need to randomly place TWO robots. Probably the best way to do this would be with one function that handled both but I couldn’t get that working and I was running out of time, so I wrote two functions to move around two robots.

Step Five Add some sounds

I found some sort of electronic background music to play while the game was happening. I also thought there should be an explosion sound when you destroy a robot, a bigger explosion sound if you lose the game and the whole room blows up and applause if you win the game. Most web browsers do not allow sounds to play automatically. If you have ever opened a web page to some really loud, annoying ad, you are probably all on board with that, but this feature means I need to do a little coding to get the background music to play when the game starts.

What’s next?

All righty, then. I’ve worked 12 hours today and I had to take my youngest daughter to have her wisdom teeth taken out. I’d post a picture but she looks very sad. Anyway … here is what is left:

  • A function to begin the game
  • A function to end the game that does one thing if they lose and another if they win
  • Adding the sound functions into the functions that detect if the robot was destroyed or nott
  • Taking into account the fact that mobile devices are different. They use tap instead of click and if you tap twice they zoom in which may not be what you want

I’ll get to that in my next post.

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.

Leave a comment

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.