Product Requirements Document

Free HTML5 Game Tutorial for Beginners: Page 3

Overview Surface Game Overview Who What When Where Why How Summary
Product Requirements Document Icon

Product Requirements Document Overview

The Product Requirements Document (PRD), describes what the game should look like and how the game should play. However, leave out technical details for the technical specification document.

A game's PRD explains the vision of the game designer. The PRD provides the information necessary for artists and developers to begin the next stage of game development.

Ideally a PRD answers who, what, when, where, why, and how, the game will play. Some companies focus more on different aspects of the PRD, depending on their goals.

There are more aspects to a PRD, especially for software applications with many features. This PRD provides just enough information to define a simple game called the Surface Game.

Surface Game Overview

Surface Game is a drag and drop game for mobile phones. The Surface Game is a tap and drop game for tablets and desktop computers. The goal of the game is to answer questions about the area of graphical shapes.


The Surface Game has two purposes, with a real target and a target for teaching purposes.

A target market represents the group of people who you hope will play the game. For example some games may target children, and other games will target college students. Some games may target those with powerful computers, and other games may target those with iPhones.

The teaching target of the Surface Game is people who want to learn game development. Therefore the game's simplified for learning.

The game's real target market is students who'd like to improve math skills. Determining surface area can be taught from grade school, through high school, and entry level college courses. Therefore the game will play on mobile devices with HTML5, so students can play on their phones, even if they don't have Flash. Most mobile phones aren't Flash enabled.

This game uses tap and drop or drag and drop to help users enjoy interaction. People feel connected to objects on the screen when they can interact with them using touch. Hopefully those who try the game enjoy it, even if they don't have a high score.

What: Game Play

The game board will display draggable digits and symbols. The following digits will display:


This game includes levels in order to show how to add levels to a game. For simplicity sake there are just 2 levels with 2 questions each.

Each level will display a set of 2 mathematically defined graphical shapes. Each graphic will include labels with appropriate dimensions, such as height, width, or base.

Each level will ask 2 questions and display 2 graphics. The questions will ask about the area of the shape on display.

For example with a rectangle, the following question will display. What is the area of the rectangle? The user will drag and drop the answer onto a white answer box.

When the player has their final answer, then they tap the Final Answer button.

Each right answer makes the score increase by 25 points. The score does not decrease for wrong answers. Answering all questions correctly provides a score of 100.

After every question and when loading the game, the user will see their level, score, and the current question.

When a level is over, text on the game page will cycle through different bright light colors.

When both levels are over, the player will see their total score. The player will have the option to play again.

If the user leaves the page before finishing the game, then save their score, level, and question number. When the user resumes the game, restore their score, level, and question number.


When the player touches any graphic which can move interactively, a tap sound will play. When the right answer has been entered, then a short happy sound will play. When the wrong answer has been entered, then the tap sound will play. When a level is over, music will play.

When: Anytime

The Surface Game is quick and easy. User's can play the game anytime they're online.

Where: Anywhere

The Surface Game can play on mobile phones, tablets, and desktop computers. Therefore the Surface Game can be played anywhere there's an Internet connection.

Why: Fun and Education

Games are just like math, or math is just like games. Follow the rules, have fun, and play to win. That's similar to the slogan at Seven Thunder Software's math games Web site

How: HTML5

Use the HTML5 set of technologies including JavaScript, CSS3, and HTML markup. The Technical Specifications tutorial provides more details regarding how to program the Surface Game.

The graphics were created with Photoshop. However a simple paint or vector software application will work.


This tutorial explained the basics of a Product Requirements Document (PRD).

This section focused on how the game should play. This article also briefly answered who, what, when, where, and why. Some game PRDs focus more on who, in order to carefully define a target market.

See the Product Requirements View document for rough layouts and view descriptions.

The PRD provided the vision of the game with just enough detail for the next level of game development.

For the next tutorial, tap the image icon containing text which says Next Lesson, or the right pointing arrow at the bottom of the page.

Previous Page Next Page
Game Tutorial for Beginners was prepared for the Web in 2012. HTML5, CSS3, and JavaScript have improved over time. Game Tutorial for Beginners doesn't include state of the art technology, yet still contains many useful features and ideas.
Copyright © 2015 Seven Thunder Software. All Rights Reserved.