How to Plan Your HTML5 Game - dummies

By Andy Harris

The first part of HTML5 game creation is planning. It’s pretty hard to program a game in the best of circumstances, and it’s nearly impossible if you don’t know exactly what you’re trying to accomplish.

For that reason, the first thing you need to do when you build a game is to turn off the computer. Get out paper and pencil, and come up with a plan for your game. The plan should be detailed enough that you know how you’re going to code everything. Here’s what your diagram needs to include:

  • Setting and theme: What does the game look like? What is the overall theme? What is the general style?

  • Environment: Are there any special environmental rules? For example, is the player always moving forward in an endless scrolling world? Is gravity a feature of the game (for example, do things fall)?

  • Avatar: What is the role of the player in the game? Does the player control a particular sprite, or is the player an omniscient presence (as in most puzzle games)?

  • Player control: How does the player control things? Is it mouse-based? Keyboard? Touch screen? Are there limitations to motion?

  • Goals: What is the player trying to do? Touch something? Avoid something? Gather things? Shoot something? Go somewhere?

  • Obstacles: What is preventing the user from accomplishing this? Are there things the player should avoid?

  • Artificial intelligence: If there are sprites on the screen that are not controlled by the player, how do they behave? Do they move? How? What happens when they leave the screen?

  • Collision management: What happens when things crash into each other?

  • Scorekeeping: Will the game have a scorekeeping mechanism? This can include points, but it can also incorporate a set number of lives or a time limit.

  • Game end state: What causes the game to end? What will happen when the game ends? How do you motivate the user to play again?


Even this very simple game has a number of details. If you think about the details in the design phase, programming the game becomes much easier to accomplish. Here are the highlights of this game’s design:

  • The player is a hungry frog. There doesn’t seem to be a kissing princess involved, but somehow, you’re a frog. Live with it.

  • Control the frog with the keyboard. The frog is controlled with the arrow keys. Turn left and right to, well, turn left and right.

  • The forest is filled with flies. There are tasty flies running around, acting like flies. You know what to do.

  • Gain points by eating flies. Run into a fly to eat it.

  • Eat the most flies in a set time to win. The main obstacle is time. After a short time period, the game will end and you can no longer control the frog.