View: Product Requirements Document
Free HTML5 Game Tutorial for Beginners: Page 4
Desktop and Mobile Web Development with HTML5
Free Online Game Development Course: Design with HTML5
The View portion of the Product Requirements Document (PRD), describes what the game should look like.
See the Product Requirements Introduction for an overview of the game, game play, audio, and target audience.
A game's PRD describes the vision of the game designer. The PRD will provide the details necessary for artists and developers to begin the next stage of game development. Developers will read the technical specification and artists can begin creating graphics.
Surface Game will have bright graphics on a dark blue background.
When the player drags a digit, the digit will display a blue highlight. The highlight provides important user feedback. Otherwise it may be unclear to the player which digit they selected.
When the player drops a digit on the answer box, the digit will highlight with a red border.
When a level is complete then the text of the score area animates with color. Just the text and not the background will change colors. The user can see when they have completed a level.
Horizontal and Vertical Views
This tutorial series was originally written in 2013 before media queries became common. The game was designed using much of the same source code yet different HTML layouts. Most of the Web pages at SevenThunderSoftware.com use media queries now. Media queries load different style sheets based on device orientation, screen width, and other properties. Designers can display the same Web page on different devices with media queries. They are highly recommended.
Most Web pages at SevenThunderSoftware.com test well with a range of devices including Android, iPhone, Windows Phone, and PCs. Please see Tutorial Topics for examples which work fine on a range of devices with media queries.
Surface Game uses slightly different source code
for desktop and mobile devices. The HTML markup is slightly different too.
Players can drag digits across the screen on mobile phones.
Players tap and drop digits on desktop computers.
This product requirements view specification includes separate horizontal and vertical
layouts for computers and mobile devices respectively.
Hopefully separate view specifications provide some insight into the needs of mobile versus desktop game players.
Desktop and Tablet View
Desktop computers have screens which are wider than they are tall. Desktop computers should display game elements horizontally. A simple layout of the horizontal view follows.
Tablets can be rotated either horizontally or vertically. However tablets often have higher screen resolution and games may be played horizontally. Therefore the desktop and tablet view will display horizontally.
A horizontal display means there is much more space from left to right than from top to bottom. In that case arrange the game board to look nice with a horizontal orientation.
The left side of the Web page will display three rows. The first row will contain five draggable bright digits. The second row will have the answer box. The third row will display the rest of the draggable digits.
To the right players see the output for each question, including a graphic and some text. The text will include the current question, score, level, and question number.
Under the three rows and output text, see three buttons.
The buttons labels will display
Final Answer and
The graphic colors should blend with the color scheme for the digits, answer box, and text. Therefore the images that display to the right should have a similar look and feel as the digits, and other game elements. The goal is to make a nice looking game, where everything appears to belong together.
Phone View Layout follows.
Some mobile phones can't rotate between horizontal and vertical views. Some players prefer to use mobile phones in the vertical orientation. Games on phones may be played vertically, even with phones which respond to rotation. Therefore layout a vertical view for mobile phones.
With the model, view, controller design pattern, it's easy to swap out the view. Design the game such that nothing needs to change in the model or controller, to make this game usable for phones, as well as desktops and tablets. The dimensions and colors of most elements can be modified in the view alone.
The digits will display in two rows. The size of the graphics need to be large enough for easy selection with one finger, on a mobile phone.
Display three rows; a row of digits, the answer box, and another row of digits, just as planned for the desktop view.
Just under the three rows
display three buttons. The
Next Question buttons, will maintain the same functionality
as the desktop view.
The text for each question will display under the buttons, and the graphic will display under the text. If the phone is rotated horizontally, or the screen doesn't have enough vertical space, the player might see just the question, not the graphic. The player might need to scroll down to see the graphic.
next question text will describe the shape and include
dimensions for the shape, as well.
Some players might be able to
answer the questions without seeing the graphic.
Ideally the entire vertical view will display on standard screen sizes for phones. Hopefully the player can see the question and related graphic without scrolling.
Phone View Layout is a little rough. In the
end font sizes for the buttons were increased for easier viewing.
This article described what the game should look like and displayed rough layouts of the mobile and desktop views.
This tutorial provided the vision of the game with just enough detail for the next level of game development. See the technical specification article for the next step.
Have fun and love learning!
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.