Method and Design Pattern
Free HTML5 Game Tutorial for Beginners: Page 2
Fundamentals of Web Development with HTML5
Learn a method and design pattern for HTML5 games.
This tutorial explains how to use the
Model-View-Controller (MVC) design pattern.
This section describes how the waterfall method and MVC design pattern provide structure
to design and develop an online game.
MVC Design Pattern
The model-view-controller (MVC)
is commonly used for Web applications.
The application's divided into three sections or
The pattern describes how modules interact with each other.
design pattern is a way to organize different parts of an application.
A software design pattern is similar to a pattern for creating a suit or pants.
The suit might come in different colors
and materials, but the pattern remains the same.
With software, the pattern divides the application into separate components, and defines how those components will communicate with each other.
For example, every game includes a portion which is visible to the player, called
Every game includes information based on how the user played the game; such as the score and level.
That information is called the
Every game includes game play or game rules, called the
business logic, or
model section maintains the data or information used for the game.
Model data which changes as the game is played, include the score, question number, and level.
Model data which doesn't change, include prepared levels of questions, answers, and images per question.
view is the part of the game the user will see and interact with.
view includes web page design, colors, text, and graphics. The
view might also
include interactive user response, such as highlights when the player selects a character.
controller manages the game.
For example, the controller decides whether or not an answer was correct, then increases
or decreases the score.
This free game design template employs one way communication from the
controller to the
model. See the controller tutorial One Way Communication
programming methodology is the plan for the process of developing a software application.
In other words, a programming methodology simply outlines the steps to produce the game.
There are many programming methodologies with names such as
rapid, prototyping, and
This course presents a waterfall method for creating an online game, with seven stages.
The waterfall method is based on a sequence of design steps, flowing downward like a waterfall. The course provides a series of steps which are easy to understand. The application is simple enough to avoid issues larger applications sometimes suffer, with the waterfall method.
- Prepare a game design overview, called the product requirements document.
- Write a game development document, called the technical specification.
- Create the model with DTD, XML, and local storage.
- Test the Web application.
- Make modifications based on test results.
An API is an Application Programming Interface.
The API for the
canvas element includes functions and properties
to work within most HTML5 compatible browsers.
Therefore API functions don't require extra work.
The more API functions you know the less code you may need to write.
The game design stages listed above can overlap in time. Often it's helpful to verify graphics and code work together with quick tests. Sometimes developers find more efficient techniques during the programming stage. New insights might work better than ideas presented in the technical specification.
model data containing levels for the game will reside in an XML file.
Create an XML File for more information.
Learn to maintain the level, score, and question number with the
Save and Restore with Local Storage tutorial.
The View Modules Overview outlines display components.
The Game Controller Overview
tutorial for an introduction to the
game engine or
Seven Thunder's free template for game design provides the fundamentals of
web development with HTML5. This article explained the
Model-View-Controller (MVC) design pattern.
This tutorial describes how the waterfall method and MVC design pattern provide structure
to design and develop an online game. This tutorial included links to
articles describing basic modules for the template.
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.