Assemble the Game

Free HTML5 Game Tutorial for Beginners: Page 24

Overview List the JavaScript Assemble the Assets Style Sheets The JavaScript Files In Order Design with HTML5 Tips Summary
Rough Layout of Phone View


Learn to put the game together. You may also combine components to create your own games. This section discusses how to create your own game with the free Surface Game template. You may change the graphics, questions, design, or code. The game was engineered for quick and easy modifications.

This tutorial demonstrates how to combine components of the MVC Design Pattern. This lesson explains assembling the assets including graphics, audio and XML.

The free game template was developed for both mobile games and desktop online games. Include the same code for mobile devices and desktop computers. The Surface Game loads unique style sheets based on media queries. Prepare the Surface Game HTML Markup for mobile devices and desktops.

Flexible Box, Fluid Grid

Also consider CSS flexible boxes, responsive fluid grids, and other techniques for great Web design across a range of devices and full sized computers. This section continues with a simplified game development system. However it's helpful to know new features exist. As time moves on the Web embraces amazing, unique, and useful techniques. So never stop learning!

Assemble the Assets

Place the XML files, graphics, and audio, in the assets folder, directly under the Surface Game's folder or directory.

For example the Surface Game resides in the game-design-course folder. Place the assets folder inside the game-design-course folder.

Assets include XML files, levels.dtd, MP3 and OGG audio files, as well as graphics. The canvas element displays graphic files for digits zero through nine, named digit0.gif through digit9.gif. The example Surface Game's images include l1q1.gif, l1q2.gif, l2q1.gif, and l2q2.gif, representing questions one and two for levels one and two.

Style Sheets

Place style sheets in the styles directory. The Surface Game uses style sheets surface-game.css, surface-game-landscape.css, surface-game-portrait.css and surface-game-narrow.css. File surface-game.css includes rules shared by both vertical and horizontal versions of the game.

Load style sheets with media queries as follows.

<style type="text/css">   
 @import url(styles/surface-game.css); 

<link rel="stylesheet"  
 media="(orientation: portrait)" 

 media="(orientation: landscape)" 

 media="(max-width: 640px)" 

List the JavaScript

Within the header of each web page, list each JavaScript file ordered from the last function used, to the first. For example, the function loadGame(), within JavaScript file surface-game-control.js, executes first. Place surface-game-control.js at the bottom of the list of JavaScript files. JavaScript loads sychronously, by default. Therefore you want to load all supporting files, before calling the first function

JavaScript file Coord.js will be used last. Therefore list Coord.js first. Every file should download, before it's needed, with synchronous loading.

By default JavaScript files download synchronously. That means they download in the order listed. However, developers may download JavaScript asynchronously with the async keyword, as follows.


The JavaScript Files In Order

The following section displays the JavaScript files as they are included within the header of the game's Web page. Each JavaScript file resides in the directory named js within the game-design-course directory.

<script src="js/Coord.js">
<script  src="js/coord-list.js">
<script  src="s/Shape4Sides.js">
<script  src="s/surface-game-view.js">
<script  src="js/surface-game-model.js">
<script  src="js/surface-game-canvas.js">
<script  src="js/surface-game-control.js">

Design with the HTML5 Template

The game was designed to modify. It's simply a template starting point for similar games. Open the XML file to change questions, or graphic file references. Rewrite JavaScript source files to change game play, markup your own web page, or change styles, for a new design. The example Surface Game provides a structure for your own games.

The game was built with independent modules in most cases. For example surface-game-model.js loads XML files, and doesn't care how the XML files are structured. Therefore the XML based code in surface-game-model.js can be used with other types of XML files.

The controller expects XML files with a specific structure. However, it's a small task to add more levels, different questions, and different graphics. Or consider changing the XML file structure and those properties accessed by the controller.

Change the Graphics

Hire an artist, make your own graphics, or consider web sites which offer public domain or copyright free graphics. For example provides space related graphics to the public. USA tax dollars pay for space research, and therefore the images posted at are copyright free.

Wikimedia commons offers many graphics with a number of images free to use in your own games. Graphics include different requirements for attribution and usage. It's important to look at the copyright information.


Consider adding a few new features to this Game Tutorial for Beginners. For example add scroll event handlers. The resize event handler doesn't respond to scroll events. See the Drag a Sprite example with tutorials for details regarding event handlers.


This article explained how to assemble the game, as it is. However many options exist to create unique games from this simple template.

This section discussed how to create your own game with the free Surface Game template. Learn to combine components to create your own games. You may change the graphics, questions, design, or code. The game was engineered for quick and easy modifications.

This tutorial demonstrated how to combine components with the MVC Design Pattern. This lesson explained assembling the assets including graphics, and topics covered with the Add Sound to Games tutorial and Create an XML File tutorial.

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.

Page 24

Game Tutorial for Beginners was prepared a few years ago. HTML5, CSS3, and JavaScript have improved over time, yet this free course continues to include useful features and long standing software development techniques. Enjoy more projects with free Web & game development tutorials.


free tutorials, learn web design, learn web programming, read books online free, free ebooks, free books online,free books to read, online books, learn web development, STEM, CSS 3, HTML 5, Web developer, learn to code, learn programming, interactive web design, interactive website design,

Copyright © 2015 Seven Thunder Software. All Rights Reserved.