Technical Specifications

Free HTML5 Game Tutorial for Beginners: Page 5

Overview Overview: Model-View-Controller Design Pattern (MVC) Model View View: Graphics View: HTML elements View: CSS View: JavaScript: HTML elements View: JavaScript: Canvas element Controller Summary
Technical Specification Document Image


Learn how to create technical specifications for a game. The technical specification explains how various programming components will interact with each other. Components are separate sections of an application. Sections are divided into components based on purpose. For example one component will display information to the player, and another component will save the score. Therefore the technical specification provides the application's structure.

With the MVC design pattern, a programming component refers to the model, view, or controller, separately. When necessary, components may refer to subsections of the model, view, or controller.

Level of Detail

The level of detail provided in the technical specification, depends on the purpose of the document.

For example, clients may want a document which provides a general idea of how the application will function. Clients sometimes won't understand software development details. Therefore it's helpful to omit specifics for some clients.

On the other hand, software developers may want a high level of detail, including algorithms, the database model and properties, programming interfaces, and control flow.

Algorithms detail the progression from one step to the next, to accomplish one task. Programming interfaces explain how various components will interact with each other. The interface describes inputs and outputs of a component, rather than details within the component.

Sometimes the details are unknown when the technical document is composed. If the specification is prepared for programmers, then provide available detail. Explain the issues regarding unknown details, as a starting point for developers.

From a development perspective the specification provides enough information for programmers to start writing code, and fulfill the request of the Product Requirements Document.

Ideally the technical specification will work out the more complicated issues for developers, before they prepare the code.

Overview: Model-View-Controller Design Pattern (MVC)

Perhaps the most important technical aspect of the Surface Game involves dividing the project into manageable files.

The MVC Design Pattern section provided an overview of the MVC design pattern. MVC works great for games.


The model is the part of the game which stores and loads data output, such as the score, level, and question number. The model also loads data input, such as questions, answers, and paths to image source files.

Model Input

The model input will use XML. Each XML file will represent one level. Each XML file will contain a set of questions. Each question will include three text nodes; the question, the answer, the image's source file.

Model Output

The user data, including level number, question number, and score, will be saved to local storage or cookies.

If the device the game runs on can save to local storage, then user data will save to local storage. Otherwise if the device can save to cookies, then user data will save to cookies. If both storage methods fail, then a message will display to the player, asking them to allow local storage or cookies.


The JavaScript controller will load, save, and restore model data, through a self contained JavaScript file called surface-game-model.js. File surface-game-model.js will not share variables with other JavaScript files.

Self contained files minimize errors with Dependencies in HTML5 Game Development. Self contained files are also well suited for re-use in other games and applications.


The controller will call loadXML(number) from JavaScript file surface-game-model.js.

loadXML(number) will load an XML file with a file name which contains the number provided through it's parameter list. For example loadXML(1), will load an XML file called 1.xml. File 1.xml includes input data for the game's first level.

loadXML(number) will return an XML DOM Object to the controller. The XML DOM object for each level includes questions, answers, and the path to an image file.

Local Storage

The controller will call the functions defined in the model module of the MVC design pattern. Function scoreModelGet() and scoreModelSet() retrieve and save user data. Both functions will reside in JavaScript file surface-game-model.js.


The view is the part of the game the player sees. The desktop version of the game and the phone version of the game will have separate views. For more information see the View section of the View: Product Requirements Document article.

The view includes five sections.

  1. Graphics
  2. HTML elements
  3. CSS
  4. JavaScript for HTML elements, except Canvas
  5. JavaScript for the Canvas element

1. Graphics

First, design graphical shapes as GIF files. On each graphic display the width, height, or base, as needed for the player to answer questions associated with the shape. The same GIF files will be used for both the mobile and desktop versions of the game.

2. HTML Elements in the Game's Web Pages

The Web page which runs the desktop version of the Surface Game will include the CSS and HTML to display most of the desktop and tablet view. The view is described in the Product Requirements Document.

The Web page which runs the mobile version of the Surface Game will include the CSS and HTML to display most of the mobile phone view of the game. The view is described in the Product Requirements Document.

Create separate Web pages for the mobile and desktop views. Yet declare HTML elements with the same id values. Both the desktop and mobile games will use one set of JavaScript files to access the HTML elements by id value. Reusing JavaScript files saves time during development and debugging.

The id is called an HTML attribute. The value is the name assigned to the attribute.

For example the following HTML markup declares a canvas element with the attribute id and value cv.

<canvas id="cv"></canvas>		

The following JavaScript code obtains a reference to the canvas by id value.

var cvs = document.getElementById('cv');		

3. CSS

Third, define color, location, width, and height of HTML elements with CSS.

HTML elements work with the CSS. Because the mobile and desktop views will look differently, both the mobile and desktop views have separate style sheets. However any shared features should be factored out and placed in one shared style sheet as well. Both versions of the game load two style sheets. One style sheet is shared. The other style sheet is specific to the horizontal or vertical view.

4. JavaScript for HTML elements, except Canvas

Fourth, implement the JavaScript code for manipulating HTML elements, other than canvas. The file will be called surface-game-view.js. The term implement, means to create code which puts in place the requirements expressed by the technical document.

surface-game-view.js will display color animation when a level is complete. Additionally surface-game-view.js will provide functions which surface-game-control.js uses to show information to the game player.

Function viewText() will show information to the player about the level, score, and question. Function viewImage() will display images on the game board and function viewDebug() will display error messages.

Function viewDebug() displays debugging output during the development phase. Features such as Google Chrome's Developer Tools, help find errors during development, yet sometimes it's useful to include and display other errors. It might be helpful to remove viewDebug() and all references to the function after thorough testing.

5. JavaScript for the Canvas Element

Fifth, implement the JavaScript code for manipulating the canvas element. The file will be called surface-game-canvas.js. JavaScript file surface-game-canvas.js provides most of the display interaction for the game.

File surface-game-canvas.js resizes the canvas in response to browser resize and orientation events. File surface-game-canvas.js redraws the canvas according to tap, mouse over, and drag events. surface-game-canvas.js maintains an array of digits the user has dropped onto the answer box.


The controller includes the logic of the game. The controller determines if an answer was correct, increments the score, plays audio, and calls methods in other files. Methods in other modules animate colors, reset the view, show text, and show graphics.

The controller accesses functions within the view, display, and model. The goal is to prevent the view, display or model, from accessing functions in the controller. Design a one way communcation mechanism from the controller to the model and view files. Sharing a minimum number of variables between files makes debugging easier.

Tightly Coupled Files

This game minimizes the use of tightly coupled files. Unfortunately there are a few issues requiring close interaction between files.


This article explained the basics of a technical specification. This tutorial discussed how the model-view-controller design pattern components of the game will interact.

Subsequent tutorials in this HTML5 Web development series, explain details of the various functions within components of the Surface Game.

Now there's just enough detail to start making the game! 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
Copyright © 2015 Seven Thunder Software. All Rights Reserved.