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

Overview

This tutorial represents the last in the series. However continue following the Next Lesson buttons to see source code with comments. Learn to 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, and topics covered with the Add Sound to Games tutorial and Create an XML File tutorial.

The free game template was developed for both mobile games and desktop online games. Include the same code for each game, however the Surface Game uses separate web pages for vertical and horizontal views. Prepare the Vertical Surface Game HTML Markup for mobile phones, and Desktop Surface Game HTML Markup for desktops and tablets.

Media Queries

Both mobile and desktop versions of the game could use the same markup and code with media queries. Most Web pages at SevenThunderSoftware.com use media queries. Media queries load different style sheets based on device orientation, screen width, and other properties.

Unfortunately this tutorial was original written back in 2013 before media queries became popular. The controller processes mobile and desktop games slightly differently. However please see other Tutorial Topics for examples which work on a variety of devices. Most of the Web pages on this site have tested well with iPhone, Android, Windows Phone, and PCs.

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 desktop version 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-desktop.css and surface-game-mobile.css. File surface-game.css includes rules shared by both vertical and horizontal versions of the game.

Style sheets for the mobile version of the Surface Game are loaded with the following short listing. Substitute styles/surface-game-mobile.css with styles/surface-game-desktop.css to display the desktop or horizontal version of the game.

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

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. However JavaScript file Coord.js will be used last. Therefore list Coord.js first. Every file should download, before it's needed.

By default JavaScript files download synchronously. That means they download in the order they are listed. JavaScript can be set for asynchronous download, but the example Surface Game uses default settings.

The JavaScript Files In Order

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

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

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, or markup your own web page 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 nasaimages.org provides space related graphics to the public. USA tax dollars pay for space research, and therefore the images posted at nasaimages.org 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.

Tips

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.

Summary

This tutorial represents the last in the series. However continue following the Next Lesson buttons to see source code with comments. Learn to combine components to create your own games.

This section discussed 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 demonstrated how to combine components of 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.

The free game template was developed for both mobile games and desktop online games. Include the same code for each game, however the Surface Game uses separate web pages for vertical and horizontal views. Prepare the Vertical Surface Game HTML Markup for mobile phones, and Desktop Surface Game HTML Markup for desktops and tablets.

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.