Method and Design Pattern

Free HTML5 Game Tutorial for Beginners: Page 2

Waterfall Method MVC Design Pattern Technologies Summary
Model View Controller Diagram

Fundamentals of Web Development with HTML5

Learn a method and design pattern for HTML5 games. This tutorial explains how to use the waterfall method and 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) design pattern is commonly used for Web applications. The application's divided into three sections or modules. The pattern describes how modules interact with each other.

A software 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 the view. Every game includes information based on how the user played the game; such as the score and level. That information is called the model. Every game includes game play or game rules, called the controller, business logic, or engine.

The 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.

The view is the part of the game the user will see and interact with. The 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.

The 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 view and model. See the controller tutorial One Way Communication section for details.

Waterfall Method

A 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 incremental. 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.

  1. Prepare a game design overview, called the product requirements document.
  2. Write a game development document, called the technical specification.
  3. Create the model with DTD, XML, and local storage.
  4. Design the view with HTML, CSS, Photoshop, JavaScript to modify HTML elements, and the JavaScript API for the canvas element.
  5. Implement the programming with JavaScript.
  6. Test the Web application.
  7. Make modifications based on test results.

An API is an Application Programming Interface. The API for the canvas element includes functions and properties already prepared 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.


The model data containing levels for the game will reside in an XML file. See the Create an XML File tutorial, 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.

See the The Game Controller Overview tutorial for an introduction to the game engine or business logic.


Seven Thunder's free template for game design provides the fundamentals of web development with HTML5. This article explained the waterfall method and 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.

Page 2

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.