Overview Game Design and Development

Free HTML5 Game Tutorial for Beginners: Page 1

Overview Software Technologies New Insights Summary
Desktop Game Screen Shot

Learn software development with HTML5.

Free tutorial teaches how to make a game from start to finish.


Enjoy the first article in this free Web game development series. The series includes the code to create your own configurable game. Follow the examples then modify features to implement unique games based on your own ideas. Learn software development with HTML5 to reach the world online.

Follow this set of free tutorials which provide an introduction to game design using HTML5 and CSS3. The tutorials create a simple game. The course provides examples and explanations for developing a game which runs on Android, iPhone, and desktop computers.

The course includes how to select a programming methodology and design pattern. Tutorials discuss preparing the product requirements document and writing the technical specifications. Articles explain how to design the model, view, and controller with HTML5, CSS3, XML, DTD, and JavaScript.

The course covers creating the model with XML and JavaScript, then saving and restoring model data with local storage. Tutorials discuss designing and implementing the view. The course explains how to develop the game controller with JavaScript, then put it all together for a complete game.

Software Applications To Make a Game with HTML5

This game development series doesn't promote any library or software applications, other than free and open source software with JavaScript, HTML5, and CSS3.

This particular game was developed with the free Eclipse download. Go to the eclipse.org downloads directory. Consider using either Eclipse for JavaScript or Eclipse for PHP Developers. Eclipse provides a great tool for implementing JavaScript, XML, CSS, and HTML.

Google's free Chrome browser includes Developer Tools for debugging JavaScript, creating breakpoints, and watch expressions.

Download the Chrome browser. To open the Developer tools feature, go to the customization icon in the upper right hand corner. Select Tools | Developer tools.

The simple graphics were created with Photoshop. However many free and low cost graphics applications work great. Ideally choose graphics software which suits the goals of the game. The Surface Game only requires a simple image editing program.


The programming languages and markup include HTML5, CSS3, and JavaScript for the view. The model is designed with DTD, XML and JavaScript with Local Storage. The controller is implemented with JavaScript alone.


This article is the first in the Web game development series. The series includes a set of tutorials to explain game design, and game development with HTML5. Articles include how to make mobile and desktop versions of the game.

This course demonstrates how to make a simple game from start to finish. The tutorials provide examples and explanations for developing a game to run on mobile devices and desktop computers with HTML5.

The articles include selecting a programming methodology and design pattern. The tutorials discuss preparing the product requirements document and writing the technical specifications. The course explains how to design the view with HTML5, CSS3, JavaScript for the canvas element, and JavaScript which modifies other HTML elements. Lessons cover modifying the model with local storage, and creating the model with DTD, XML and JavaScript. Toward the end the Assemble the Game article explains how to put it all together. JavaScript and style sheets are fully included.

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. At any time select the middle graphic, labeled Game Topics!. The Game Topics! graphic at the bottom of each page links to an illustrated list of topics for the free Game Tutorial for Beginners. Have fun and love learning!

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