Web Science - CSCI 470

CSCI 470
Web Science
Spring 2012

Assignment #6 - Gem collector, single-player
Due: start of class, Wed 3/7.
This assignment should be done individually.

You will be building the beginning of a multi-player online game. This week, we will just build a single-player local version of the game. You will learn to use the new Canvas element that has been added to HTML5.

Overview.

The web page allows users to create an Avatar with a given name. The player can then click at different points in the canvas and the player's Avatar will walk to that point. Gems randomly appear and the player scores points for different colors of gems. The player can type short messages that appear temporarily below the player's Avatar. You should implement your web page using HTML5, JavaScript, and the <canvas> element.

Files. The file gem.zip has the images of the gems and five different Avatars.

Requirements:

Canvas should have a visible border and be 800 x 400 pixels.
Players can choose via a combo box between at least 5 different avatars. You may use the supplied images, or supply your own.
Player should be able to specify an optional name. If present the name appears in text above the avatar's image.
A new avatar is created when the user clicks somewhere in the canvas. The avatar's is initially centered at the mouse position of the click.
A delete button deletes the player's current avatar.
Newly created avatars start with 0 points.
Clicking on a new location should provide a visual indicator (e.g. a red cross) of the player's target location
The avatar should walk to the target location in a reasonable and aesthetically pleasing manner. Upon arriving at the target location the avatar should appear motionless.
Players can make their Avatar display a message by typing it into a text field. The message should appear below the avatar's image for 5 seconds and then disappear.
Player should score 1 point for grabbing a blue gem, 2 points for green, 5 points for yellow.
The player's score appears above the Avatar, after the name (if present).
When an avatar is present, every second there is a 50% chance of a new gem appearing. No gems appear when no avatar is on the canvas.
New gems are randomly placed on the screen but must appear entirely within the canvas.
At most ten random gems should appear in the game.
New gems are never created such that they immediately intersect the avatar's current location.
The avatar image, name, score, and message should appear on top of any nearby gems.
Intersection of the avatar and a gem can assume both are circles with radius equal to the maximum of the respective image's width and height.
It should be easy to modify the number of avatars, avatar image files, and avatar names by changing the JavaScript code in one place.
It should be easy to modify the number of gems, gem image files, and gem points values by changing the JavaScript code in one place.

Submission. I will be testing your program on the URL you send me via email. I will be using the Chrome browser. You also need to submit your source file(s) to the Moodle dropbox. The Moodle timestamp is the completion time for the assignment.