1.25 Skill builder: Draw a maze

Two dimensional arrays

You are quite familiar with one-dimensional arrays by now. You so you know that...

	var colourArray =["Red", 		// element 0
			"Orange", 		// element 1
			"Yellow", 		// element 2
			"Green", 		// element 3
			"Blue", 		// element 4
			"Indigo", 		// element 5
			"Violet"	];		// element 6

...will create colorArray with the following structure:

Index 0 1 2 3 4 5 6
Data Red Orange Yellow Green Blue Indigo Violet

Introducing two-dimensional arrays

Now imagine an array where each element is an array, like this:

	var sampleArray =[	["Cyan", 	"Yellow", 	"Magenta"	],		// row 0
				[1, 		2, 		3		],		// row 1
				["a", 		"b", 		"c"		],		// row 2
				["gold", 	"silver", 	"bronze"		]	];	// row 3

This will create a two dimensional array, with data stored like this:

[x][0] [x][1] [x][2]
[0][x] sampleArray[0][0] sampleArray[0][1] sampleArray[0][2]
[1][x] sampleArray[1][0] sampleArray[1][1] sampleArray[1][2]
[2][x] sampleArray[2][0] sampleArray[2][1] sampleArray[2][2]
[3][x] sampleArray[3][0] sampleArray[3][1] sampleArray[3][2]

Take a guess which values will contained in each cell, and then roll over the table cells to see if you are right.

For example, what will be the value of colourArray[2][2]?

A quick review of how to make a table in HTML

Remember that a table is a collection of table rows (<tr>) that are broken into individual cells (<td>).

So the following code...

		<caption>A table of awesome</caption>

...will create this table: (except for the red borders, that's just so you can see the cells clearly...)

A table of awesome
[x][0] [x][1] [x][2]
[0][x] [0][0] [0][1] [0][2]
[1][x] [1][0] [1][1] [1][2]
[2][x] [2][0] [2][1] [2][2]

Using nested loops and an array to create a table

Arrays are great structures for holding useful data. Let's say that we have a two dimensional array called ticTacToe:

	var ticTacToe =[	["O", "X", "O"],	// row 0
			["X", "X", "O"],	// row 1
			["X", "O", "X"]	];	// row 2

And let's say that we have an empty table with no rows (<tr>) or cells (<td>), with id="tableID":

	<table id="tableID">

Which, when first displayed, would look invisible, because it is has no data:

It is there, trust me. And because this table has id="tableID", we can use .innerHTML to make a program to put rows and cells inside it.

The way to do this is to use a nested loop: two or more loops inside each other.

For example, say I wanted to create a brief chunk of code to print the contents of each element of ticTacToe to console.log(). Two loops inside the other (one for the rows, and then one for the columns) will do the trick:

By now you probably have figured out how to combine table HTML, 2D arrays, and nested loops to fill up our empty table.

It works like this:

Let's look at the program code:

You can examine this in it's own page with full readable code.

Saving your work

Download the template and rename it to your last name, such as "1.26S-DrawAMaze-LastName.html".

The assignment

In this assignment you will add code to the template to use the information from an array to draw an HTML table of a maze.

The example code follows this pipeline:

return mazeArray
return htmlTable

You will need to consider the following: