Populating the user interface for a game
In the previous lesson, you used table cells and data to create a game map. Now we are going to do the same thing with images layered on top of each other.
You are going to make this:
Look like this:
The game that we are going to create will be a version of Ms. Pacman/Pacman, although scaled down so that there is no computer-controlled ghosts. (We will look at basic game play AI briefly, however!)
You can create your own version of the game, as long as:
- It is school-appropriate
- It uses complex data structures to create a user interface
- It uses keyboard input to control the game, including disallowing actions according to circumstances
- Movement in the game causes gameplay effects (collecting points, racing against the clock, mental combat, ...)
Game assets
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,1,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,1,0,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,1,0,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,0,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,1,0,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,1,0,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,1,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,1,0,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,1,0,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,0,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,1,0,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,1,0,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
];
var mazeObject ={
hallOrWall: hallwayOrWall,
dot: hasADot,
pill: hasAPowerPill
};
Saving your work
Please save your work as "Pacman-UserInterface-LastName.html".
The assignment
Use function pipelines, complex data structures, and object constructors to initialize information about a map, convert it into positionable images, and then display it.
Do NOT position an HTML table above the main map image! You may create your own map if you wish.
Remember to resize your main image so that your entire game will fit on a single screen.
Recommended procedure:
-
You will start off by creating the user interface out of HTML.
This will be pretty straight forward:
- An image of the empty maze
- An image of Ms. Pacman (or whomever will be moving)
- An area with
id="outputID"to hold the dots, pills, etc. - A way to trigger filling in the dots, pills, and Ms. Pacman
-
You will be using function pipelines. Consider using:
initializeMazeObject() return mazeObject ⇓ createListOfItemImages(mazeObject) return htmlImages ⇓ outputHTML(htmlImages) - Create your function pipeline as empty functions first, with the input and return variables, and then start to fill up the functions with code.
-
Use
console.log()to help you debug. - You will also be using object constructors with methods and properties to create the movable parts of your game, (Ms. Pacman, at least). Remember our introduction to object-oriented programming, and how to make object constructors.
- You will need to use complex data structures to initialize the maze object so it can be passed on to other functions in the pipeline.
-
Remember that you can change the width of an image with
<img style="width: 200px">. -
You will probably need a positioning function that will determine the
left:andtop:positions of an image, given a column and row.
Evaluation (out of 10)
- ___/2 — Well-modularized function pipeline with separate initialization/processing/output
- ___/2 — Successful use of objects, arrays, and complex data structures
- ___/2 — Object constructors with methods and properties for the movable items on the map
- ___/2 — Successful output of the map in HTML
- ___/2 — Well-commented code with good indentation, commenting (including "INIT:", ...), and style