HTML5 Simple Game Programming Preparation

Files used in this video:

wordStory.html

Files used in this video:

input.html

Files used in this video:

greet.html

greetName.html

greetOutput.html

Learn to build the form for the word story game. While you already know all the HTML code you need for this game, the code won't look good on its own. Add a floating CSS layout to make the page look great.

Code used in this lecture:

WordStory.html

WordStory.css

Form.css (Use this in your own forms to add a floating layout.)

Put together all you've learned to build the word story. Tie together HTML, CSS, and JavaScript code. Files used in this video:

wordStory.html

wordStory.css

wordStory.js

Learn how JavaScript works with data, and a surprising error you can get when you trust the computer too much. Prevent this type of error by converting data to the format you need.

Programs used in this video:

TypeConv.html

Computers seem to make decisions when programmers use a concept called a condition. Learn how to build your own conditions in several variations of the if statement.

Examples used in this video:

if.html

ifElse.html

ifElseIf.html

nestedIf.html

switch.html

Note if you're using the "HTML5 Game Programming for Dummies" book, these examples were actually taken from another book with a bit more detail (HTML5 / CSS3 All in One for Dummies) I didn't have as many examples on the HTML5 Gaming page, so I borrowed from another book for clarity.

Often you'll need the computer to do something a certain number of times (Each alien in your game might need to drop a bomb, for example.) Programming languages have a structure called a "for loop" for exactly this situation. Look at a number of for loops to see how the computer can count efficiently.

File viewed in this video:

forLoops.html

The while loop is a more flexible alternative to the for loop. Learn how to build a well-behaved while loop. You'll also learn how to build a loop that can exit in multiple ways, and how to watch your code run line-by-line to detect logic errors.

Files used in this video:

while.html

logicError.html

You've been using simple functions, but now you learn how to make them work well with the rest of the program. Add parameters to input values into functions, and use return values to have functions produce a value.

Files used in this video:

param.html

If functions are used to put together multiple instruction, you might wonder if there's a way to group data as well. Of course, there is such a concept, and in programming this is the array. Learn to build arrays in a couple of ways. Learn how for loops are the natural companion to for loops, and how to access and modify data in an array.

Files used in this video:

basicArrays.html

antsArray.html

With all the basic programming concepts covered, you're ready to build a basic text-based game. Take a look at the game, then learn about how to plan a game to make the programming as easy as possible.

Files used in this video:

numGuess.html

highLow.png

Games often include random behavior. Computer programs use random number generation for practically all random numbers. Learn how to build a random number within any range of values.

Files used in this video:

rand100.html

Take all the concepts you've learned up to now and build a complete text-based game! This game features HTML, CSS, JavaScript, conditions, functions... pretty much everything we've done so far.

Files described in this video:

numGuess.html

numGuess.css

numGuess.js

HTML5 doesn't directly support game programming, but there are a number of libraries which add support for the main aspects of gaming. Learn about the simpleGame library, designed specifically to be easy to learn and use while building great games. Look at a simple animation which demonstrates the basic use of this engine.

Files used in this video:

redBall.html

Please be sure to run this (and all files in this course) directly, as the performance in the videos tends to be more jerky than in real life.

Overview of the simpleGame engine. Learn how to find the latest version of the engine, how to download it for use in your own games, and see the main features of the engine.

Files used in this video:

book main page Main page for this course's companion book

simpleGame.js Version of the simpleGame library used in this course

simpleGame Documentation Official documentation of the simpleGame library

template Save a copy of this code for a convenient starting place for your games

The most obvious difference between a game and an animation is user interactivity.

Learn how to check for keyboard input, how the keyboard array works, and how to set up an image for use in game animation.

Files used in this video:

car.html

car.png car image used in game. Note images should face to right and have a transparent background.

Learn how to use a special online tool to build experimental games even if you don't have anything installed on your computer. Play around with the simpleGame engine any time you can get to a web browser.

Files used in this video:

simpleGamePractice.html