Resources

• //OUTPUT: Animation callbacks

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:

• The current row and column of your character is displayed
• Your character can only move on top of certain tiles of your maze
• You add a layer of objects on top of the maze
• Your character will be affected when they encounter these objects (add score, speed up, slow down, die, extra life, whatever...)
• You display something else about your character (lives, score, speed, ...)

For example: Travel and Find Things

Click to create the playing field!

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]

• ___/10 INIT: including
  1. add this.column and this.row to your character to track their movements through the maze
  2. create a new array of arrays for the prizes
  3. create an object for the prizes with properties and methods
  4. access properties within the prize object using this.
• ___/10 PROCESS: including
  1. use nested loops to generate a layer of prizes on top of the maze
  2. use if statements to determine which image to show in the layer of prizes
  3. use if statements to determine if it is possible to move right and left before animating in that direction
  4. use if statements to determine if it is possible to move up and down before animating in that direction
• ___/10 OUTPUT: including
  1. use .innerHTML to add the layer of prizes to your page
  2. animate a prize using jQuery (fade in, move, shrink or grow, whatever...)
  3. output your character's current row and column
  4. changes the source of a character's image using an animation callback
  5. output something else about your character (lives, score, current speed)
• ___/10 STYLE: including
  1. honour all previous //STYLE sections
  2. use descriptive variable names
  3. break up methods and function into separate chunks, max 15 lines each
     These do not have to follow INIT/INPUT/PROCESS/OUTPUT.
     They simply have to make sense a a single method (not too few steps, not too many)
  4. use descriptive comments to identify and describe each method or function, each loop, and each if statement:
     //if there is space to move forward...
  5. add spaces between mathematical and string operators,
     for example: var exampleVar = "hello " + "kitty", not var exampleVar="hello "+"kitty".