Web Science - CSCI 470

CSCI 470
Web Science
Spring 2013

Schedule | Assignments | Resources | Course syllabus | Moodle

Assignment #6 - Dungeon Online, single-player version
Due: 10PM, Thurs 3/7.

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 login page of the game allows users to create an Avatar with a given name, choose their avatar's image, and choose a dungeon to play in. The player is then assigned a random position in the dungeon and the player can navigate through the dungeon using their arrow keys. 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 dungeon.zip has the images 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
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 W W
W W W - W W W D W W - - W
W W W - W - - - - D - - W
W W W - W - - - - W - - W
W - - - W W W W W W - - W
W W W W W W W W W W W W W

The two integers specify the width and height (respectively) of the dungeon in tiles. The "W" character denote walls, the "D" character denotes doors, and the "" character denotes passageways. The provided PHP function convertArray($filename) can be used to create a 2D JavaScript array containing data from a dungeon file.

Requirements:

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 avatar should appear in the center of the 15 x 15 tile grid. At least the provided boy and girl avatar images should be supported. Feel free to add additional avatar images if you like.
On the login page, player's specify an optional name. If present the name appears in text above the avatar's image.
The players initial position is some random open passage or doorway somewhere in the dungeon.
Players can make their Avatar display a message by typing it into a text field.
- The message is displayed once the user hits enter in the text field.
- The text field should be cleared once the message is displayed.
- The message should appear below the avatar's image for 5 seconds and then disappear.
- If a new message is submitted before a previous one disappears, the new message overwrites the old message and the new message should appear for 5 seconds before disappearing.
The avatar is move up, down, left or right by using the arrow keys. The keys are active anywhere on the web page except for when the message text field has focus.
The player can move freely through passages (denoted by "-" in the 2D array) and doors (denoted by "D" in the 2D array). You can assume all dungeons have walls around their edges. The player cannot move through walls.
Tile positions outside the bounds of the dungeon should appear as blackness.
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. You can use the HTML5 <audio> tag to help do this.

Submission. I will be testing your program on the URL you send me via email. 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: February 16, 2014