Overview


Expect this unit to take about 30 minutes to 2 hours, depending on how comfortable you are already with HTML and JavaScript. There's no demo for this Unit.

HTML5 gives us a lot of cool potential with online features and reaching an enourmously broad market (billions of people!), but being a relatively young and undersupported platform we don't have as many tools and features (audio, 3D visual, etc) as native game developers.

While this class isn't meant to teach you HTML, CSS or even JavaScript, it's important that we cover some of the basics so it sets the tone of web-related skills going forward.

Depending on your familiarity with web technologies, expect to spend about 30 minutes to 2 hours getting your project steps for this Unit completed.


Lesson 1: Breakdown of an HTML5 page


Since our game is running on a webpage (is a wepage!) we need to cover a few very simple basics about structuring a webpage.

There are a whole host of other, more robust, resources out there for building web-pages. Hopefully this section will be enough of a primer to get you comfortable with creating your own very basic page for a game project. There are three major components for the type of web application we are building:


Lesson 2: JavaScript primer


"The world's most misunderstood programming language" - Doug Crockford

"JavaScript became the world's biggest programming language, completely independent of its merits" - Doug Crockford

JavaScript has a lot of really cool, awesome stuff but also a whole lot of really awful, dangerous stuff.

If you are new to the language, the best thing I can recommend to you is this book - JavaScript: The Good Parts

You could also sit through this fantastic hour long talk by the author instead http://www.youtube.com/watch?v=hQVTIJBZook. It is totally worth it, there's very few better resources for navigating the funky weirdness of JavaScript!

Be aware of Bad Stuff

Be aware of Cool Stuff


Lesson 3: Project setup and Development environment


Required 3rd Party JS libraries

Most games rely on a 3rd party library for one thing or another. Examples in games are usually things like physics, or animation, libraries. For web pages that are supposed to run on multiple different browsers, there are a few very common libraries that help ease our lives. We will be using the following libraries: you can download each of these libraries as a JavaScript file and include them in your game engine.

The documentation for each of these libraries are pretty good (a common advantage web developers have over game developers, where good code documentation is usually hard to come by). I will try my best to explain features as we need them. For now, we will start with Modernizr and demonstrate how to load multiple files.

Example of using Modernizr.js to load multiple JavaScript files

// Create an array to store the list of files to load
var EngineFiles = [

	// Required third-party libraries
	"js_libraries/jquery-1.8.3.min.js",
	"js_libraries/underscore-min.js",

	// Other engine files to go here
];

// A named function that will run immediately.
(function loadFiles( )
{
	// We'll use these variables to track progress
	var numResourcesLoaded = 0;
	var totalResources = EngineFiles.length;

	// Check the documentation to see the format of this function
	// Basically it takes an array of objects, each object supplying a list
	// of files to load and callback functions.
	Modernizr.load([
		{
			load: EngineFiles,

			callback: function( url, result, key )
			{
				console.log( "Engine File loaded: ", url );
				++numResourcesLoaded;
			},

			complete: function()
			{
				console.log( "All Engine Files loaded!");
			}
		}
	]);
})();

Running and debugging JavaScript in Chrome

For this class, I recommend using Chrome as your development browser, because it has a fantastic set of Developer Tools.

Documentation for Chrome Developer Tools (DevTools)

Important DevTools features:

Web hosting

While you can load your html in a browser directly from your hard drive, you are actually limited in features compared to running it on a web server. An example is that you are not allowed to make AJAX calls (requesting assets from the server)

We can use a tool called "mongoose", which is a light-weight application that creates a web server on your local machine. We can point it to our project directory to have it host our game

Download mongoose on Google Code

Optional: Using an Integrated Development Environment

At the very least you are going to need a good text editor.

I use Sublime Text 2, which has a relatively good support for project/file management. It has fantastic plug in support which means you can use JSLint.

A popular solution with my students is called WebStorm. It has a free 30-day trial, and a very inexpensive student license.


Homework: Getting started with a web page


  1. Create a new directory for your project
  2. Create a subdirectory for 3rd party libraries, and download the following libraries to put there:
    • Download modernizr.js - You can grab a custom build, which allows you to select which features you need and keep your file size down, but for now the latest development version 2.6.2 will be sufficient.
    • Download jquery.js - I'll be using Version 1.10.2. You can avoid downloading it by linking to a CDN instead of your own file, but for development it might be helpful to have a copy with your code.
    • Download underscore.js - I'll be using version 1.4.4
  3. Create your HTML Web Page
    • Create index.html and give it the following elements:
      • a head, title, and body tags
      • in the body create a div with an id
      • Put a script tag at the end of the body to load modernizr.js
  4. Create your JavaScript Application
    • Create a file called main.js
    • Using the modernizr library, write a function that loads both the jquery and underscore libraries you downloaded.
    • Output some text to the console.
  5. In index.html, add a script tag at the end of the body (after loading modernizr.js) to load main.js
  6. OPTIONAL: Add a CSS file to give your page special formatting.
  7. You should be able to load this page in your web browser directly.
  8. Run mongoose.exe and load your page in the web browser though a url such as http://localhost:8080/ (8080 is mongoose default port, your web hosting solution may vary).