Resources

• //INIT: Creating two-dimensional arrays
• //INIT: Creating objects with methods


• //PROCESS: Using two-dimensional arrays and nested loops


• HTML image resources

Saving your work

Use Save as... to save the empty template as "4.02H-MazeAndMovement-LastName.html" in your Computer Programming 12 directory.

The assignment

We're going to make a basic maze runner game!

• Design your own maze
• Make it display on the screen using object properties and methods
• Display a character on the screen on top of the maze
• Make it move around the screen in response to the keyboard using object properties and methods

For example

Click to create the playing field!

Make it your own!

Create your own maze design! Choose your own character to animate! Choose your own shapes and sizes! Choose your own images to use as map image tiles...

Evaluation — check your project on the Markerator

• ___/10 INIT: including
  1. create an array of arrays
  2. create an object for the maze with properties and methods
  3. create an object for the animated character with properties and methods
  4. access properties within an object using this.
  5. link to jQuery
• ___/10 PROCESS: including
  1. use nested loops to generate a maze
  2. use if statements to determine which image to show in the maze
  3. use if statements to do something different for each direction key
  4. use math to determine a top and left position for each maze image
  5. use math to determine a top and left position for the animated character
• ___/10 OUTPUT: including
  1. use .innerHTML to add code to your page
  2. use .src to change an image
  3. fade something in from invisible to visible
  4. animate movement using jQuery
  5. change the movement easing in jQuery to "linear"
• ___/10 STYLE: including
  1. honour all previous //STYLE sections
  2. use descriptive variable names
  3. break up methods and function into separate ones for input, processing, and output
  4. use descriptive comments to identify and describe each method or function, and each loop:
     //loop through each element of the loop to create the rows
  5. add spaces between mathematical and string operators,
     for example: var exampleVar = "hello " + "kitty", not var exampleVar="hello "+"kitty".

Live example: Draw a maze using object properties and methods

Not sure how to convert the creation of the maze into object properties and methods? Take a look at this live example!