Dependencies in HTML5 Game Development

Free HTML5 Game Tutorial for Beginners: Page 6

Overview Advantages to Uncoupled Files Issues with Tightly Coupled Files HTML5 Concerns Surface Game Decisions Summary
Dependencies Chart


This article describes software dependencies within tightly coupled and uncoupled modules. This tutorial discusses the advantages to uncoupled files and the disadvantages to tightly coupled files.

This section discusses specific issues with HTML5 view based files. This tutorial explaines how to solve some MVC design problems before it's time to Assemble the Game.

Tightly Coupled Files

When files depend upon functions, variables, or data, from other files, then they become dependent or tightly coupled. Tightly coupled files are difficult to use separately. They are not self contained. Uncoupled files do not depend on other files, for functions, variables, or data.

Advantages to Uncoupled Files

The more self contained a file's data, the better suited the file is for re-use with other games and applications. A self contained file does not require data or functions from another user defined file.

Uncoupling one file from another includes factoring out shared variables, data, and functions. Every function within an uncoupled file, requires only those variables declared and defined within that file. Therefore external files simply call a function declared within an uncoupled file.

Uncoupled files allow plug and play style components. Plug and play components can be re-used in multiple games and applications with minimum modification.

Issues with Tightly Coupled Files

Tightly coupled files share access to the same variables, data, or functions. Therefore tightly coupled files depend on other files to run properly.

Access of multiple copies of the same variable, means updates require changing the value of the variable in multiple places. Multiple updates take time. Updates to one variable across more than one file, introduces the possibility the developer might overlook updating the variable in some places.

Additionally hidden side effects may occur, if multiple files share a variable. For example assume file A shares variable v with file B. Errors can happen if file A modifies variable v, and file B doesn't expect the modification.

How to Use an Uncoupled File

Functions within an uncoupled JavaScript file can be called from JavaScript in other files. Download the uncoupled file for your Web page before downloading the calling file. Then call the uncoupled file's functions from the calling file.

With default synchronous downloads, the first JavaScript file listed in a Web page will be downloaded first. The last JavaScript file listed in a Web page will be downloaded last. For example in the markup below uncoupled-file.js, will download before calling-file.js. Therefore calling-file.js can call functions defined within uncoupled-file.js.



HTML5 Concerns with the View

Unfortunately HTML5 games quite easily include three sections to the view component. JavaScript files usually need to access variable id values declared within Web page HTML files. The following list includes four potential view related files.

  1. The game's Web page declares a canvas element. A JavaScript file accesses and modifies the canvas element. The feature rich canvas element gets modified often in most HTML5 games. Therefore a separate JavaScript file for the canvas element can reduce game complexity, especially if that file is uncoupled from other files.
  2. A second JavaScript file accesses and modifies other elements of the game's Web page such as img, div, or span elements. The HTML must declare corresponding id attributes and values for each JavaScript file which needs access. In this case, the JavaScript and HTML markup are coupled, however, JavaScript may use other HTML Web pages with the same id set.
  3. A third file is the Web page itself with HTML and CSS defining significant portions of the view.
  4. Sometimes reusable CSS declarations reside in more files.

For example assume view.js needs to access an HTML img element. The img element needs an id attribute with a value of imAnswer. The Web page which includes view.js must have an img element with id='imgAnswer'. Therefore the HTML Web page and view.js are coupled. The following few of short listings demonstrate requirements for both files.

The HTML file requires the following img tag.

<img id="imgAnswer" />

The JavaScript file would access the img tag by the id value.

im = document.getElementById(

It would be great to combine all view code into one file. View based code controls what the user will see. Unfortunately often so much happens within the canvas element that it seems best to create separate JavaScript source files. The Surface Game uses one JavaScript file for the canvas and another JavaScript file for other HTML elements. Often a smaller file is easier to manage and potentially re-use with other applications and games.

One method to avoid coupling HTML Web pages with JavaScript files involves creating HTML elements within the JavaScript itself. Carefully defined view modules can minimize dependencies as well.

Surface Game Decisions

The model files are uncoupled and independent including surface-game-model.js, 1.xml, 2.xml and levels.dtd.

View portions of the game use some supporting files such as coord-list.js, Coord.js, and Shape4Sided.js, which are uncoupled as well. They can be used by other applications and games. However view based JavaScript does depend on coord-list.js, Coord.js, and Shape4Sided.js. Therefore coord-list.js, Coord.js, and Shape4Sided.js don't require access to other files. Yet surface-game-canvas.js does require coord-list.js, Coord.js, and Shape4Sided.js.

The two JavaScript view based files are surface-game-view.js and surface-game-canvas.js. The surface-game-canvas.js file modifies only the HTML canvas element. The surface-game-view.js file modifies non-canvas HTML elements, such as div and img elements. Therefore JavaScript files, surface-game-view.js and surface-game-canvas.js, require specific HTML attribute-value pairs to function.

Each JavaScript view based file, depends upon id attributes and values declared within a corresponding Web page. Therefore the view based JavaScript files must be coupled with Web pages which declare the same id attributes and values. However, the view based JavaScript files can be coupled with any Web page which declares those attributes and values.

Simply stated, surface-game-view.js can be coupled with any Web page declaring HTML id attributes and values it requires. Function loadViewGet() accesses and saves references to HTML elements by id. JavaScript file surface-game-canvas.js can be coupled with any Web page which declares a canvas element with the id value cv.

To run the Surface Game, every prepared JavaScript file is required. However, readers can re-use uncoupled files as they wish.

The JavaScript files are downloaded in reverse order of dependence, when loaded synchronously. For example if surface-game-canvas.js calls functions in surface-game-view.js, then download surface-game-view.js first.


This article described software dependencies within tightly coupled and uncoupled modules. This tutorial discussed the advantages to uncoupled files and the disadvantages to tightly coupled files.

This section discussed specific issues with HTML5 view based files. This tutorial explained how to solve some MVC design problems before it's time to Assemble 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.

Page 6

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.