Gem Dungeon - Web Science

CSCI 470
Web Science
Spring 2015

Schedule | Assignments | Resources | Course syllabus | Moodle

Gem Dungeon

You will be building an online game in which players roam a dungeon collecting gems. This week we will be building a single-player verison of the game. You will learn to use the HTML5 Canvas element and the Web Audio API.

Overview.

The login page of the game allows users to create a player with a given name, choose their player's image, and choose a dungeon to play in. The player is then assigned a random position in the dungeon. The player navigates through the dungeon by pressing the arrow keys. The player can type short messages that appear temporarily below the player. The player tries to collect gems that have been randomly placed around the dungeon. You should implement your web page using HTML5, JavaScript, and the <canvas> element.

Files. The file dungeon.zip has the images and audio files for the assignment. It also contains a completed version of the login page and a partially completed version of the game page.

We have provided you with a set of dungeon?.txt files that define dungeons of different sizes. Here is a small example:

13 10
8
W W W W W W W W W W W W W
W - W - - - - - - D - - W
W - W - W W W - W W - - W
W - W - D - D - W W - - W
W - - - W W W - W W W S W
W W W - W W W D W W - - W
W W W - W - - - - D - - W
W W W - S - - - - W - - W
W - - - W W W W W W - - W
W W W W W W W W W W W W W

The first line has two integers which specify the width and height (respectively) of the dungeon in tiles. The second line is a integer specifying how many gems are located in the dungeon. The rest of the file defines the layout of the dungeon. The "W" character denote walls, the "D" character denotes doors, the dash "-" character denotes passageways, and "S" denotes a secret passageway. Secret passageways look like a wall but you can walk through them nonetheless. The provided PHP function getDungeonJSON($filename) can be used to create a JavaScript array containing data about the dungeon.

Requirements:

Initial setup:
- The player's initial position is set at a random open passageway in the dungeon.
- The specified number of gems in the dungeon file should be placed randomly in open passageways (not on doors or secret passageways). Gems cannot be in the same location as the player or another gem.
- For efficiency, each audio or image should only be retrieved once when the page loads.
- The dungeon should only appear after all image and audio assets have successfully loaded. While the HTTP request/response required to load assets happens very quickly when using a nearby server, this would not be the case in the "real world".
Visual details:
- Canvas should have a visible border and be sized to hold 15 x 15 tiles with each tile being 32 x 32 pixels.
- The player's chosen image should appear in the center of the 15 x 15 tile grid.
- Tile positions outside the bounds of the dungeon should appear as blackness.
- The player's name should always appear in text above the player's image.
- The player's current gem total (even if 0) should appear below the player's image.
- Feel free to improve or expand the image assets.
Movement:
- The player can move up, down, left or right by using the arrow keys. The keys are active anywhere on the web page except when the message text field has focus.
- The player can move freely through passages (denoted by "-" in the 2D array), doors (denoted by "D"), and secret passages (denoted by "S").
- You can assume all dungeons have walls around their edges.
- The player cannot move through walls (except for secret passages).
- When a player hits a gem, it should increase the players score by one point and the gem should disappear.
Messages:
- Players can display a message by typing it into a text field that appears below the canvas.
- The message is displayed on the canvas only once the user hits enter in the text field.
- The text field should be cleared once the message is displayed.
- The message should appear over the center of a player's image for approximately 5 seconds before disappearing.
- If a new message is submitted before a previous one disappears, the new message overwrites the old message. The new message should be shown for approximately 5 seconds before disappearing.
Sound effects:
- If a player hits a wall, play the wall.wav audio effect.
- If a player goes through a door, play the door.wav audio effect.
- If a player successfully walks in a passage or secret passage, play the walk.wav audio effect.
- If a player collects a gem, play the gem.wav audio effect.
- You should use the Web Audio API to play audio effects. While the HTML5 audio tag is simpler, the latency is too high to be used for game sound effects. Here is a Virtual Farm Yard that demonstrates the use of the Web Audio API as well as drawing on a canvas.
- Feel free to improve or expand the audio assets.

Submission. I will be testing your program on the URL given in the header of your source code. I will be using the Firefox browser. You also need to submit your source file(s) to the Moodle dropbox. The Moodle timestamp is the completion time for the assignment.

Page last updated: March 23, 2015