bigbadbrain logo
bbb Home
  Learn Programming by Making a Game  

SUMMARY

In this tutorial you will learn fundamental programming concepts by creating a simple game using HTML and JavaScript. The game will require the player to "shoot" a spaceship that randomly moves around.  The player "shoots" the spaceship by clicking on it with the mouse. A screenshot of the game is shown:


Score: 0/0













Spaceship and background images from http://www.gifs.net/animate and http://www.sanfords.net/Spots_free_graphics/Space_Background_Tutorial.htm

HTML is a markup language for creating web pages.  JavaScript is a programming language for making web pages interactive.  This tutorial focuses on using JavaScript to create a game.  In order to create the game we will need to use some HTML to set up the page.  This tutorial teaches the minimum amount of HTML needed to create the game.   

FUNCTIONAL SPECIFICATION

Before writing a program you should define what the program will do and its features. This list of features is sometimes called the functional specification. The functional specification for our game is as follows:

  1. A home page has a button that opens the game in a new window.
  2. The screen shows the target, a start button, and the score (hits/tries) as shown in the screen shot on the right.
  3. The target is displayed in random locations for brief time.
  4. The user shoots the target by clicking on it.
  5. The score is updated after each target is displayed.
  6. After a predetermined number of targets are displayed, the game stops.

LESSONS

The lessons guide you through the creation of the game. Each lesson provides a simple example of a new concept needed to add a feature defined in the functional specification. Then code is added to the game to add the feature.