View Modules Overview

Free HTML5 Game Tutorial for Beginners: Page 16

Overview View Based Modules Display Information to the Player Function viewImage() Function viewText() Function viewDebug() Summary
View Icon

Overview

The model-view-controller (MVC) design pattern works well with online games. The Surface Game's prepared with the MVC Design Pattern.

The view portion of the MVC includes those parts of the game which provide visual information for the player. Visual information includes interaction and display. The view includes the HTML5 2D canvas, images, CSS, and text elements.

Other tutorials cover most of the view's functionality. This section provides an outline of those view modules, links to view based tutorials, and discusses the few remaining view related functions. The functions discussed in this tutorial include viewImage(), viewText(), and viewDebug().

View Based Modules

The Surface Game uses the following set of view based modules:

  1. surface-game-canvas.js contains the code to modify the HTML5 canvas element. The Game Design with the HTML5 Canvas tutorial provides an overview of the canvas element.
  2. JavaScript file Coord.js contains class Coord to store one display coordinate. See the Reusable Coordinates tutorial for details regarding storing, reusing, and accessing, X and Y positions on the canvas.
  3. JavaScript file coord-list.js contains the code to modify a list of Coord. Both coord-list.js and Coord.js are covered in the Reusable Coordinates tutorial.
  4. The CSS3 Linear Gradients tutorial explains how to make CSS3 linear gradients for buttons.
  5. See HTML elements and style sheets for both vertical and horizontal versions of the Surface Game. The Desktop Surface Game HTML Markup link includes markup and a style sheet for horizontal layout of the game. The Mobile Surface Game HTML Markup link includes markup and a style sheet for vertical layout of the game.
  6. The How to Create Animation with HTML5 tutorial explains color cycling code implemented in JavaScript file surface-game-view.js.
  7. The Four Sided Shape with Boundary Detection tutorial discusses implementation of the Shape4Sides class.

Display Information to the Player

JavaScript file surface-game-view.js displays text and images directly to HTML elements. This tutorial discusses functions viewImage(), viewText(), and viewDebug(), which display information for the player.

The Surface Game's controller calls function loadViewGet() to initialize the view. Function loadViewGet() is implemented in JavaScript file surface-game-view.js. First loadViewGet() obtains references to HTML elements by id. The following listing saves references to elements on the Web page. Element eDebug displays debugging output. Element eText displays questions and answers. Element eImage displays one image per question.

function loadViewGet() {
 eDebug = document.getElementById(
  'eDebug'
 );

 eText = document.getElementById(
  'eText'
 );

 eImg = document.getElementById(
  'im'
 );

...

}
	

Function viewImage()

Function viewImage() displays an image for each question. The controller calls viewImage(). The only parameter to viewImage() is a String. Parameter sIm is a path to an image file. The following short listing includes the entire viewImage() function.

function viewImage(sIm){
 
 eImg.src = sPath+sIm;

}

Function viewText()

Function viewText() displays text to the game player. The controller calls viewText().

The first parameter sT is a string containing the text to display. The second parameter b is a boolean value. When b equals true, append the new text to previously displayed text. When b equals false, overwrite any previous text with the new text.

The following listing includes the entire viewText() function. Assign text to an HTML element's innerHTML property.

function viewText(sT,b){
 
 if (b == true){
 
  eText.innerHTML += sT;

 }

 else {
 
  eText.innerHTML = sT;

 }

}

Function viewDebug()

Function viewDebug() displays errors and other data needed by developers during development. The only parameter is a string named sD. The following listing includes the entire viewDebug() function.

function viewDebug(sD){
 
 eDebug.innerHTML += sD;
 
}

Hints

Consider applying the Surface Game's view based functionality in other games. Code's designed for re-use. The Dependencies in HTML5 Game Development tutorial explains techniques to develop software modules which are easy to use in other applications.

Summary

The model-view-controller (MVC) design pattern works well with online games. The Surface Game's prepared with the MVC Design Pattern.

The view portion of the MVC includes those parts of the game which provide visual information for the player. Visual information includes interaction and display. The view includes the HTML5 2D canvas, images, CSS, and text elements.

Other tutorials cover most of the view's functionality. This section provided an outline of those view modules, links to view based tutorials, and discussed the few remaining view related functions. The functions discussed in this tutorial include viewImage(), viewText(), and viewDebug().

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.

Previous Page Next Page
Copyright © 2015 Seven Thunder Software. All Rights Reserved.