Game Controller Overview

Free HTML5 Game Tutorial for Beginners: Page 23

Overview The Controller One Way Communication Initialize the Game Wait for the Player The Canvas Summary Source: Controller
Game Controller

Overview

This section discusses the controller portion of the Model-View-Controller design pattern. This tutorial explains how the controller manages model and view modules. The controller described in this article provides a useful template for online game design.

This example covers those aspects of the controller which haven't been discussed in other tutorials. For example, the Add Sound to Games tutorial explains how the controller plays music when the game is over. The How to Parse XML with JavaScript tutorial explains how the model loads and parses XML by level which the controller then displays. Other details of game design are covered in articles listed in the HTML5 Game Tutorial illustrated topic list.

The Controller

The game controller manages every aspect of the game. Yet code for the controller contains relatively few lines compared to other modules. Most of the work is accomplished with supporting code in files devoted to model or view functionality. The controller calls functions defined in other files, which display data, save and restore game state, and process input from the player.

The controller determines when to call functions defined within the model and view. The controller processes user interaction in response to taps and swipes from the Web page.

One Way Communication

The Surface Game model and view modules interact with the game controller in one direction. The controller calls functions defined in the model and the view. The model and view don't call functions defined within the controller.

Some implementations of the Model-View-Controller design pattern allow two way communication between each of the three components. However, code is easier to maintain when the design pattern is simplified. The Surface Game maintains one way communication for simpler code.

Initialize the Game

The body tag of each Web page which runs the game, assigns an onload function called loadGame(). The loadGame() function within surface-game-control.js, initializes the canvas, view, and model. Canvas is considered part of the view, however a separate file initializes and maintains display of the canvas element. The canvas seemed to require enough functionality to merit a separate file.

A call from the controller to loadDisplay() initializes the canvas. A call to loadViewGet() initializes functions which modify display of HTML elements in the Web page. A call to scoreModelGet() initializes the model and returns any saved user data, such as the score. A call to the model function's loadQuestions(), returns an XML DOM Object with an Array of questions.

If the user played the game before, then the controller calls methods on the view to display the previous score, level, and question number. Otherwise the first question and graphic display, for level 1, question 1.

The Canvas

The canvas module responds to taps and touch points, highlighting graphics, and moving digits to the answer box. The Surface Game Canvas: JavaScript Source Code only modifies display of the canvas. Game logic resides within the Surface Game JavaScript Source Code: Controller.

Wait for the Player

The controller maintains event listeners for the Final Answer button, Next Question button, and Reset button.

When the player taps the Final Answer button, the controller calls answersGet() from the canvas module. The controller then determines if the answer was right or wrong, plays audio, and modifies the score. The controller calls model functions to save the score.

When the player taps the Next Question button, the controller accesses model data to obtain information for the next question.

When the player taps the Reset button, the controller calls functions defined in the canvas module to clear display of answers in the answer box, and remove answer data from the Array of answers.

Summary

This section discussed the controller portion of the Model-View-Controller design pattern. This tutorial explains how the controller manages model and view modules. The controller described in this article provides a useful template for online game design.

This example covered those aspects of the controller which haven't been discussed in other tutorials. For example, the Add Sound to Games tutorial explains how the controller plays music when the game is over. The How to Parse XML with JavaScript tutorial explains how the model loads and parses XML by level, which the controller then displays. Other details of game design are covered in articles listed in the HTML5 Game Tutorial illustrated topic list.

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.