Bonus Games

We all learn better with hands-on examples. The bonus games provided on this page serve as additional examples to help guide, inspire, and educate. These games run the gamut from basic to sophisticated—they’re marked with a level from 1 to 3 to help you decide which ones to tackle first.

Bonus games are primarily designed as a teaching tool rather than as ready-to-go commercial games. They are functional examples of creating 2D games using bitmap graphics, so you can easily change and update them. The latest version of Google Chrome is recommended as the development platform. All code and art game is included. Consider them as springboards for your own unique creations. Refer to comments in the code.

All scripts and graphics are provided under the Creative Commons 4.0 Sharealike license (some games may require additional third-party open source libraries; they are provided with their own licence). You're encouraged to take these examples, change them, improve them, and republish your own versions!

The examples are provided in two basic flavors: single lesson and multiple lesson. The multiple lesson scripts build upon themselves, starting with a basic foundation, then adding functionality to build a more complete game. They are recommended when first learning to code, as you can start with the simple lesson(s), and move up as you learn.

Each listing below includes:

  • The coding level, from 1 to 3. If you’re just starting out, concentrate on the lower levels first.
  • Support for mouse, keyboard, or touchscreen.
  • Short description of the game. For more detail see the readme.txt file that’s included with each game.
  • Listing of key coding points that the example demonstrates.
  • Basic instructions for playing the game.

Downloading

All code is provided in zip archive file format for easy downloading. Each zip may contain one or more constituent files inside it. To use these files, the archive must be unzipped to a new folder. Modern operating systems, including Windows and Macintosh OS X, provide their own built-in means for unzipping archive files. Refer to the online help for your operating system for the exact details. Be sure to unzip the files to a folder where you have full user access rights. Otherwise you may not be able to save the files or make changes to them.

List of Games

Single Lesson Games

These games are provided in a single version, without individual lessons. All are commented and come with a readme.txt file that describes how the games work. Supported interfaces, such as mouse, keyboard, or touchscreen, are noted.

Color Puzzle

Level: 1
Supported Interface: mouse, touchscreen

Description: Color Puzzle displays a set of six colored squares. The colors are randomized across the spectrum, though coding in the game restricts the colors to a more narrow subset of hues. You can modify the spectral spread -- the entire rainbow of colors, or just finely differentiated hues of the same color -- by editing the code. The goal of the game is to click on each color, and move that color to the blank squares above, in spectrum order.

Demonstrates: Click (or tap) events; using a third-party JavaScript library (rainbowvis.js, included) for generating the color hues; data storage in arrays; array element comparison; working with and manipulating CSS RGB color values.

To play: Click on a color square in the bottom row. Then click on an empty square in the top row to move the color to that square.


Ghoul’s Blackjack

Level: 2
Supported Interface: mouse, touchscreen

Description: Ghoul’s Blackjack is a simplified blackjack card game, where the user plays against the dealer. The dealer (computer) uses conditional tests that follow general “Vegas blackjack” rules: deal to 17, stand on 17 or above. The game keeps score as the cards are dealt. Numbered cards take their numeric value; face cards are 10, and aces are either 1 or 11, depending on the overall score. The player closest to 21, without going over, wins.

Demonstrates: using CSS to derive all 52 cards from a single graphic (using object-position style property); use of array to hold a deck of cards; shuffling of array elements; card scoring; external font (font displayed without installing it to the computer); full graphic play board background.

To play: Begin a new game by clicking the New Game button. Click Hit Me to deal another card, or Stand to call the game. The player’s score is shown, but the dealer’s score (plus dealer’s hole card) are hidden until the game comes to an end. To limit coding complexity, each game plays no more than 12 cards. More advanced blackjack rules such as splits and so-called "natural" blackjack (ace and face card in first two cards dealt) are not implemented.


Kaylee Saves the World

Level: 3
Supported Interface: mouse only

Description: In Kaylee Saves the World, the player must fight off an army of invading green Martians. These aliens pop out from behind cards and other objects, then as quickly return to hiding. When visible, use the mouse to aim the ray gun; click to fire the gun. If an alien is hit, a “sizzle” sound effect is heard, and the Martian dissolves in mid-air.

Demonstrates: introductory splash screen (providing additional time for game assets to load); sprite sheets; coordination of the mouse position with the frames of the ray gun sprite sheet; complex CSS transitions that depict the aliens “dissolving” when struck by a death ray; sound effects; time delay between firing and the ray hitting its target (simulating distance, based on elevation of mouse pointer); object collision detection (alien and ray gun blast); graphic overlays; CSS animation; and much more.

To play: From the initial splash screen click the Play button. The Martian ship lands, and play begins. Aim and fire at aliens as they appear. Scoring is based on the number of aliens that have been disintegrated, against the number of aliens that have appeared.


Kitteh in Space

Level: 3
Supported Interface: mouse only, keyboard

Description: Kitteh in Space is a “side scroller” arcade game, where a black-and-white tuxedo LOLcat flies a space ship and tries to navigate through a cluttered asteroid belt. The object of the game is to avoid getting hit by the rocks, paint cans, and paint brushes that might damage Kitteh’s new space ship. If struck by these objects, the body of the ship changes color. To reverse the damage, allow the ship to be struck by a water balloon. At the end of play, the ship should be blemish-free and showroom silver.

Demonstrates: Uses a wide graphic for the scrolling background; background is animated in a kind of “player roll,” with a repeat once every 130 seconds; CSS animation when an object explodes against Kitteh’s space ship; background sound effects (ship hover); synchronized sound effects of object collisions; collision object detection; overlapped graphics; objects that follow SVG paths; animation via requestAnimationFrame method; randomized selection of SVG paths (1 of 10); randomized selection of objects (1 of 18); user-defined objects; control of element visibility; score display; pause/unpause of game; timed play; initial splash screen; pop-up help screen.

To play: At the splash screen click the “U Clik to Plai” button (Kitteh can’t spell.) Destroy obstacles by shooting at them (click the mouse to fire a laser cannon). Or move the mouse up and down to steer the ship around obstacles. If a rock, paint can, or paint brush strikes the ship, it will cause damage that can only be undone by subsequently colliding with a water balloon. There are four damage levels; each level changes the appearance of the ship. Each strike of a water balloon undoes one damage level.


Ogre!

Level: 2
Supported Interface: mouse, touchscreen

Description: Ogre is a simple arcade game where the goal is to lob a rock at the ogre before it walks across the play field. 

Demonstrates: CSS sprite sheet animation (ogre walking), object following over an SVG path; animation via both timer and requestAnimationFrame methods; randomized selection of SVG paths (1 of 5); totalizing and score display; collision object detection.

To play: Click anywhere on the game board to hurl a rock at the oncoming ogre. The game randomly selects a rock path, and rock speed. Only one rock may be thrown at a time. If the rock strikes the ogre, the player scores a hit. If the ogre gets too close for a rock to hit it, that ogre disappears and is replaced by another that begins its journey across the game board. The game ends after five ogres have been dispatched.


Pipeworks

Level: 3
Supported Interface: mouse only

Description: Pipeworks is a timed puzzle game. The goal is to connect one or more water spigots on the left side of the pipe room, to one or more drains on the right side. The player can choose from among four types of pipe to construct the pathways. At the start of the game, the number and placement of spigots and drains, as well as the position of interfering walls, is set at random.

Demonstrates: JavaScript drag-and-drop interface using the mouse (as such, this game is not playable on a touch screen); random number generation; image transform manipulation (picture rotation); division of game area into discrete play squares; logic for placing a game piece into a play square (but only if it matches certain criteria); timed play.

To play: Drag a pipe piece from a "pipe well" on the right wall into the play board. The pipe must connect from another another pipe. As needed, click the arrow button beside the pipe well to rotate the pipe into the proper orientation before dragging. If you make a mistake, you can undo the pipe drop. Undo is limited to the last turn only.


Pirate’s Cove Word Guess

Level: 2
Supported Interface: mouse, touchscreen

Description: Pirate’s Cove Work Guess is a “hangman” style game without the hanging. The players must guess the letters of the word. With each correct guess, the toon pirate puts on another piece of his costume, and his smile grows. With each wrong guess, the pirate loses pieces of his costume that have been ppreviously added, and his face turns into a frown.

Demonstrates: Initial splash screen; random word selection from a list of prepared words; sound effects; overlay graphics to build a complex scene; hide and show images; stored user settings with the localStorage object; manipulation of strings into arrays; comparison of arrays by element; popup options screen.

To play: Click or tap on the Click to Play button at the initial splash screen. Guess at the hidden word by clicking on a letter. Right and wrong answers result in a corresponding sound effect. The game is not timed, but there is a limit on the number of guesses. Player loses when there are no more guesses remaining.  

Pirate’s Cove supports user-settable options. Click on the Options button to set the word length and sound effects. The selected values are stored using the localStorage object, and reused in subsequent plays of the game.


Space Depot Hunt

Level: 2
Supported Interface: mouse, touchscreen

Description: Space Depot Hunt is a combination crossword puzzle riddle and hidden object game. The goal of the game is to match one-sentence riddles with objects strewn about a cluttered space depot. The player is awarded points with each correct answer; points are removed for each incorrect answer. Riddles come from popular culture, especially science fiction.

Demonstrates: Slide out panel using CSS transitions; animated opening (partial splash screen); synchronized sound effects; data storage and retrieval from hidden text; random number generation and shuffling of arrays; “hot spots” using invisible DIV elements; timed play.

To play: On game load, instructions appear beside a “host” robot; click on the robot to begin. Open the slide out panel by clicking on the arrow along the top. Select a riddle, then click on the corresponding object in the space depot. Sound effects indicate if the selection is correct or incorrect. The game ends when all of the riddles have been correctly matched.


Build-As-You-Learn Games

The build-as-you-learn example games are provided in multiple lessons: Each lesson is a separate “stage” of development of the game. This helps to better visualize how scripts are constructed by starting out with the basic pieces, and adding functionality. These games tend to be more basic than the single lesson bonus examples. They’re a good way to immerse yourself in JavaScript game coding.

15 of 16 Tile Puzzle

Level: 1
Supported Interface: mouse, touchscreen

Click on the tiles to move them into the proper order. There are two lessons of the game, one that uses numbered tiles, and another that uses picture tiles.

  • 15of16-Lesson1 – Game play with numbered buttons. No graphics are used.
  • 15of16-Lesson2 – Same as above, but with an image displayed as the scrambled puzzle. The game selects a picture at random from four preset images. You can substitute your own images.

Planet Pizza

Level: 2
Supported Interface: mouse, touchscreen

Land the space shape safely on the moon and deliver a pizza to the hungry aluminum miners.

  • planet-pizza-1 – Basic game play: click on the controls in the lower left to position the lander near the foreground ridge. If you go too far, the ship crashes. CSS transitions are used to move the ship by discrete steps.
  • planet-pizza-2 – As above, but with CSS transitions to fade in the foreground control graphics.
  • planet-pizza-3 – Full lesson with game timer and animated exhaust plume under the space ship.

The Ruins of Ramic

Level: 3
Supported Interface: mouse, touchscreen

Click on any two cards to match them up. You score with each match.

  • ruins-of-ramic-lesson-1 – Basic shell of game only. Clicking on a card displays an alert box, showing the JavaScript ID name of the card that was clicked.
  • ruins-of-ramic-lesson-2 – Basic play: initial splash screen; New Game button starts; clicking on cards “turns them over” to display face. Click on any card to turn displayed cards back over. When any two cards match, those cards are hidden.
  • ruins-of-ramic-lesson-3 – As above, but using the addEventListener method to listen for click events (rather than using the onclick attribute with each card).
  • ruins-of-ramic-lesson-4 – As above, but now with self-timed splash screen that fades out when other page elements are loaded. Separate popup help screen is activated by clicking the Help button.  CSS transition added to transform rotate the card when it’s clicked. Unmatched cards automatically turn back over after short delay.
  • ruins-of-ramic-lesson-5 – Full lesson with all features, with added sound effects for card match. CSS transform rotation transition when dealing out the cards.

Tic-Tac-Toe

Level: 1
Supported Interface: mouse, touchscreen

Classic tic-tac-toe game, played between two human players. There are five lessons of the game, each one building off the other.

  • TicTacToe-Lesson1 – Rudimentary game example with click events for placing X and O in a 3x3 HTML table grid. No scoring.
  • TicTacToe-Lesson2 – Enhanced lesson version of the basic game, with styles used to format the table. Game keeps track of score, and announces if X or O is the winner.
  • TicTacToe-Lesson3 – As above, but with INPUT buttons. The HTML table is not used; placement of the buttons is dependent on style properties.
  • TicTacToe-Lesson4 – As above, but with New Game feature. Clicking this button demonstrates resetting all game variables to their initial values.
  • TicTacToe-Lesson5 – As above, but the HTML5 canvas feature added to show vertical, horizontal, or diagonal lines of the winner.


Sharker

Level: 2
Supported Interface: keyboard, touchscreen

Help Sharker reach the other side of the road so he can eat the annoying people there. Oh, and watch out for passing cars! The graphics are designed with an intentional "8-bit" pixelization look.

  • sharker-Lesson1 – Basic layout of the game board and primary pieces: road: one car, and shark. Red lines are used to visually mark the roads the cars will travel over.
  • sharker-Lesson2 – As above, but with CSS transitions added to animate additional cars on the road.
  • sharker-Lesson3 – As above, but with animated shark swimming. Click the up/down/left/right keyboard arrow keys to move the shark over the game board. Graphics added of humans on the other side of the highway.
  • sharker-Lesson4 – Full version with all animation. Added collision detection: shark spins and returns to the bottom if hit by a car. U/D/L/R sharks teeth buttons along the top right are hot spots that replicate keyboard control. Help button displays a pop-up help screen.

Zombie Girl Dressup

Level: 1
Supported Interface: mouse, touchscreen

Help Jessica, recently zombiefied after a freak accident at the mall, get dressed for a date. Click on articles of clothing to add and remove them.

  • ZombieGirl-Lesson1 – Basic game lesson with simple buttons to show or hide clothes, hair, and shoes. Demonstrates how graphic images may be overlaid by the browser to create a composite.
  • ZombieGirl-Lesson2 – Refined version of above, with stylized buttons, and internal logic to prevent overlaying two of the same kind of clothing articles (two tops, for example). CSS animation added to create bobbing “Zombie Girl Dressup” game title in upper left.
  • ZombieGirl-Lesson3 – As above, with slide out panel to select clothing. Click on a tab to open the panel, then click on an article of clothing. Close the panel by clicking the Close tab.