//MAKE: 4.04 EXTRA: Travel through a maze and find things


Saving your work

Please save your document as 4.04X-TravelAndFindThings-LastName.html in your Computer Programming 12 directory.

This project builds on 4.02, but is not the same file. Do not hand your project as 4.02. Each assignment should be separate.

The assignment

Add to the code objects in your maze so that:

For example: Travel and Find Things

Score: Row: Column:

Make it your own!

Create your own prizes to be encountered on top of your maze. What happens when you encounter each one? Do things speed up or down? Do you gain a life? Do you gain points? Does something else appear?

Hints and frequently asked questions

1. How do I get my character to work with rows and columns?
Create row and column properties inside the object constructor.
Then adjust this.row and this.column whenever your character moves.
For example, when you move up, you can use this.row = this.row - 1
2. How do I display the row, column, and score?
Create an object method (function) called something like showStats.
This function should display the current values of this.row and this.column.
Then call this.showStats() right after you animate your character.
3. How do I keep my character from moving where they shouldn't?
Before you animate your character, check inside of your maze array to see if the surface of the tile to move toward is allowable.
You will have adjust the row and column in order to look ahead.
Here is an example of an if statement that looks ahead to see if moving up is allowed:
if (maze.contents[ this.row - 1 ][ this.column ] == 1 ) { // allow the movement if the tile ahead is 1 (ground) }
4. How do I add the objects on top of the maze?
Reuse your object code for creating the maze and output into a new div, labelled something like "objectID". You will have to create a new array for the positions of the objects.
5. How do I adjust the placement of the object images?
When you place the images using the top: and left: coordinates, you can add an adjustment to move things up, down, or to the side.
For example: "top: " + (( row * 40) + 5 ) + "px;"
6. How do make it so that each object has it's own ID?
When you create the object images, add an ID to them that includes the row and column.
For example, an object at row 2, column 10 could have id='object2-10ID'.
Use something like " id='object" + row + "-" + column + "ID' ".
7. How do I detect if an object is present when moving through the maze?
First, make sure that each object has it's own ID, as above.
Then create a function called something like checkForObjects.
checkForObjects will look inside the objects array and see what to do.
For example: if ( objects.contents[ this.row ][ this.column ] == 2 ) { this.score = this.score + 500; }
Now add call this.checkForObjects() at the end each animation, after this.row and this.column have been adjusted, but before the scores are displayed.
8. How do I make it so that objects disappear when you encounter them?
First, make sure that each object has it's own ID, as above.
Then inside checkForObjects, animate a fade to 0 opacity and then remove the object from the array.
For example: objects.contents[ this.row ][ this.column ] = null;

Evaluation — [pdf] [pub]