1.27 Hand in: Draw the Ms. Pacman Maze

Convert complex data into visuals

Let's say we have a collection of two-dimensional arrays:


	var hallwayOrWall	=[	// 1=hallway (black), 0=wall (blue)    rows: 0-30, columns: 0-27
		//	[0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6], index of column numbers to help with data entry
			[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], // row 0
			[1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1], // row 1
			[0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0], // row 2
			[0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0], // row 3
			[0,1,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,1,0], // row 4
			[0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0], // row 5
			[0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0], // row 6
			[0,1,0,0,1,1,1,1,1,1,0,0,1,0,0,1,0,0,1,1,1,1,1,1,0,0,1,0], // row 7
			[0,1,0,0,1,0,0,0,0,1,0,0,1,1,1,1,0,0,1,0,0,0,0,1,0,0,1,0], // row 8
			[0,1,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,1,0], // row 9
			[0,1,1,1,1,1,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,1,1,1,1,1,0], // row 10
			[0,0,0,0,0,0,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,0,0,0,0,0,0], // row 11
			[0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0], // row 12
			[0,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,0], // row 13
			[0,1,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,1,0], // row 14
			[0,1,0,0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0,0,1,0], // row 15
			[0,1,1,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,1,0,0,1,1,1,0], // row 16
			[0,0,0,1,0,0,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,1,0,0,1,0,0,0], // row 17
			[0,0,0,1,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,0,0], // row 18
			[0,0,0,1,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,0,0,1,0,0,1,0,0,0], // row 19
			[0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0], // row 20
			[0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0], // row 21
			[0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0], // row 22
			[1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,1,1,1,1,1,1], // row 23
			[0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0], // row 24
			[0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0], // row 25
			[0,1,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1,1,0], // row 26
			[0,1,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0], // row 27
			[0,1,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0], // row 28
			[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], // row 29
			[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]  // row 30
		];

	var hasADot	=[	// 1=dot, 0=nodot    rows: 0-30, columns: 0-27
		//	[0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6,7,8,9,0,1,2,3,4,5,6], index of column numbers to help with data entry
			[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0], // row 0
			[0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0], // row 1
			[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0], // row 2
			[0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0], // row 3
			[0,0,1,1,1,1,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,1,1,1,0,0], // row 4
			[0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0], // row 5
			[0,1,0,0,0,0,0,0,0,1,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,1,0], // row 6
			[0,1,0,0,1,1,1,1,1,1,0,0,1,0,0,1,0,0,1,1,1,1,1,1,0,0,1,0], // row 7
			[0,1,0,0,1,0,0,0,0,0,0,0,1,1,1,1,0,0,0,0,0,0,0,1,0,0,1,0], // row 8
			[0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0], // row 9
			[0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0], // row 10
			[0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0], // row 11
			[0,0,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,0,0], // row 12
			[0,1,1,1,1,1,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,1,1,1,1,1,0], // row 13
			[0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0], // row 14
			[0,1,0,0,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,0,0,1,0], // row 15
			[0,1,1,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,1,1,0], // row 16
			[0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0], // row 17
			[0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0], // row 18
			[0,0,0,1,0,0,1,0,0,0,0,0,0,0,0,0,0,0,0,0,0,1,0,0,1,0,0,0], // row 19
			[0,0,0,1,1,1,1,1,1,1,1,1,0,0,0,0,1,1,1,1,1,1,1,1,1,0,0,0], // row 20
			[0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0], // row 21
			[0,0,0,1,0,0,0,0,0,0,0,1,0,0,0,0,1,0,0,0,0,0,0,0,1,0,0,0], // row 22
			[0,0,0,1,1,1,1,0,0,1,1,1,0,0,0,0,1,1,1,0,0,0,1,1,1,0,0,0], // row 23
			[0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0], // row 24
			[0,0,0,1,0,0,1,0,0,1,0,0,0,0,0,0,0,0,1,0,0,0,1,0,1,0,0,0], // row 25
			[0,0,1,1,0,0,1,1,1,1,1,1,1,0,0,1,1,1,1,1,1,1,1,0,1,1,0,0], // row 26
			[0,1,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0], // row 27
			[0,1,0,0,0,0,1,0,0,0,0,0,1,0,0,1,0,0,0,0,0,0,1,0,0,0,1,0], // row 28
			[0,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,1,0], // row 29
			[0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]  // row 30
		];
							
	var hasAPowerPill	=[	// 1=power pill, 0=no power pill    rows: 0-30, columns: 0-27
		//	[0123456789012345678901234567], index of column numbers to help with data entry
		//	sometimes typing commas gets old, so I am using .split('') instead...
		//  .split('') separates a string into an array one character at a time
			"0000000000000000000000000000".split(''), // row 0
			"0000000000000000000000000000".split(''), // row 1
			"0000000000000000000000000000".split(''), // row 2
			"0000000000000000000000000000".split(''), // row 3
			"0100000000000000000000000010".split(''), // row 4
			"0000000000000000000000000000".split(''), // row 5
			"0000000000000000000000000000".split(''), // row 6
			"0000000000000000000000000000".split(''), // row 7
			"0000000000000000000000000000".split(''), // row 8
			"0000000000000000000000000000".split(''), // row 9
			"0000000000000000000000000000".split(''), // row 10
			"0000000000000000000000000000".split(''), // row 11
			"0000000000000000000000000000".split(''), // row 12
			"0000000000000000000000000000".split(''), // row 13
			"0000000000000000000000000000".split(''), // row 14
			"0000000000000000000000000000".split(''), // row 15
			"0000000000000000000000000000".split(''), // row 16
			"0000000000000000000000000000".split(''), // row 17
			"0000000000000000000000000000".split(''), // row 18
			"0000000000000000000000000000".split(''), // row 19
			"0000000000000000000000000000".split(''), // row 20
			"0000000000000000000000000000".split(''), // row 21
			"0000000000000000000000000000".split(''), // row 22
			"0000000000000000000000000000".split(''), // row 23
			"0000000000000000000000000000".split(''), // row 24
			"0000000000000000000000000000".split(''), // row 25
			"0100000000000000000000000010".split(''), // row 26
			"0000000000000000000000000000".split(''), // row 27
			"0000000000000000000000000000".split(''), // row 28
			"0000000000000000000000000000".split(''), // row 28
			"0000000000000000000000000000".split('')  // row 30
		];
			

Then we can group them into a single object that we can use in a pipeline


	var mazeObject ={
		hallOrWall: 	hallwayOrWall,
		dot:	hasADot,
		pill:	hasAPowerPill
	};
			

We can process this information and display it as a map:

Saving your work

Download the template and rename it to your last name, such as "1.27H-DrawMsPacmanMaze-LastName.html".

The assignment

Use function pipelines and complex data structures to initialize information about a map, process it into HTML, and then display it.

You can create your own map if you wish.

Recommended procedure

  1. Read over Complex data structures and Draw a maze again
  2. Plan your separate functions input, process, and output functions.
  3. Plan your function pipeline. Consider using:
    initMazeObject()
    return mazeObject
    createHtmlTableFromMazeObject(mazeObject)
    return htmlTable
    outputTableInformation(htmlTable)
  4. You may also want a function that acts according to whether a cell has a dot or power pill in it
  5. Create your functions empty at first with only the input parameters and return variables, like this:

    function someKindOfFunction (inputVariable) {
          console.log('in someKindOfFunction, inputVariable=' + inputVariable);
          var outputVariable;

          return outputVariable;
    }
  6. Fill in the actual working code of the functions last of all, testing as you go.

Evaluation (out of 10)

Do it with style

Communicate with variable names

ckIfDtOrPl() - Know what that means? Me neither.

However, checkIfThisContainsADotOrAPill() is much easier to understand.

And once you have typed in a function or variable once, it only takes four keystrokes to type it afterwards: ctrl-C, ctrl-V.