- //INIT: Creating two-dimensional arrays
- //INIT: Creating objects with methods
- //PROCESS: Using two-dimensional arrays and nested loops
- 1.06S - Construct a picture for links to image elements
Saving your work
Save as... to save the empty template as
in your Computer Programming 12 directory.
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
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 — [pdf] [pub]
___/10 INIT: including
- create an array of arrays
- create an object for the maze with properties and methods
- create an object for the animated character with properties and methods
- access properties within an object using
- link to jQuery
___/10 PROCESS: including
- use nested loops to generate a maze
- use if statements to determine which image to show in the maze
- use if statements to do something different for each direction key
- use math to determine a top and left position for each maze image
- use math to determine a top and left position for the animated character
___/10 OUTPUT: including
- use .innerHTML to add code to your page
- use .src to change an image
- fade something in from invisible to visible
- animate movement using jQuery
- change the movement easing in jQuery to
___/10 STYLE: including
- honour all previous //STYLE sections
- use descriptive variable names
- break up methods and function into separate ones for input, processing, and output
- 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
add spaces between mathematical and string operators,
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!