Maze Game Block

Using this Block

The maze game block is a 7 X 12 grid where the user starts at one cell and must travel to another cell in the same grid. The goal is to make through two screens without running out of points. The maze has items that cost the player points and that earn points.

Example uses

• You need to canoe around the rocks and logs to get back to your village. Catch fish to survive along the way.
• You’re a rider for the Pony Express. Avoid rocks, trees and the river. Make camp and rest up when running out of points.

Making it your own

What’s in the block

Like every block, the maze game block has two files in the folder:

• An HTML file: maze_game.html . You should not have to change anything in this file.
• A config file: maze_config.js – This is where you will make any changes to create your unique game.

As with most blocks, it also has an images folder. Any images used specifically in this block will be saved here. This will include the game background, the player and items in the maze that players should either collect or avoid. The images folder that you download with the block has several images in it that you can use, or you can replace these with your own.

There is also an audio folder that has the sounds to play when you enter a cell with a “good” or “bad” item. You can also have audio here for when the player is moving, like a galloping sound if the player piece is a horse, or footsteps if it is a person.

The config file

In the maze_config.js file you’ll see two sections.

Options

As with all blocks, there is an options object. The options include instructions on how to play the game and where to go after you have won the game.

const options = {
	instructionsPage1: "<h3>Make it to the end without losing all your points to  win.</h3>" ,
	instructionsPage1_audio: "audio/instructionsPage1.mp3" , // Optional - include audio file here if you want the instructions read
	completionURL: "../menu/menu.html", // URL to proceed to after the last screen,
	successText: "Congratulations! You survived!"
};

InstructionsPage1 can be either html or just plain text. For plain text, simply paste the instructions text you want between the quotation marks after the colon.

OPTIONAL: If you would like to include an audio recording of the instructions on the first page
instructionsPage1_audio: If you would like instructions to be read to students when they click on a speaker button, put the audio file link here. In the example above, there is no audio and the speaker is not shown.

completionURL – you’ll see this in every block. It is the URL where you want to go on the completion of this assessment.

successText – Message to be shown when the player wins the game.

settings – Setting up the maze

The second part of this file is the settings, which begins with the background image. You can use the image provided in the folder or copy in your own image.

const settings = {
	//The background image
	background_img: "./images/background.jpg",

	//starting values
	points : 10,

background_img: This is the background of the maze.

points: The number of points the player receives to start the game. Do not make it less than 10 or the maze may be impossible to win. You can increase the number of points to make the maze easier.

The cells array

There are 8 types of cells in the maze. Two of these, you don’t need to modify at all. Each cell type, except the player, has six properties, but changing the maze is actually quite simple.

Cell properties

name – This is just for you to keep track of what type of cell it is.

removable – If set to “true” , once the player enters and leaves this cell, the item disappears. For example, if this is a maze where you are catching fish, once you catch the fish, it’s gone, so set removable to true. If the object in the cell is a tree, once you run into it, there would still be a tree there, so set removable to “false”.

src – the path to the image file for this cell. We recommend png or gif files with a transparent background, with a minimum width of 100px and a maximum width of 300px. Your images will automatically be scaled to fit in the maze.

audio – (optional) If you want a sound to play when the player enters this cell, include a path to an audio file. Otherwise, just leave the quotes empty as shown for 2 below.

message – (optional) If you want a message shown when the player enters this cell, type it here. If not, just leave empty quotes.

points – the number of points the player gains or loses in this cell. Enter a negative number if the player loses points, a positive number to gain points and 0 for no change. The default is coded to be moderately difficult, but winnable.

cells: {
		//empty cell is hard coded as 0
		0: { 
			name: 'inside', 
			removable: true,
			src: "./images/inside_old.png", 
			audio: './audio/footsteps.mp3',
			message: "Keep going. Not there yet." ,
			points: -1,
		}, 
		//player is hard coded as 1
		1: {
			name: 'player',
			src: "./images/player.png",
			message: "Stay on the path! Don’t get lost.",
			points: 0,
		},
		2: { // THIS IS THE VICTORY CELL. PUT YOUR END GOAL HERE ;
			name: 'fort',
			removable: false,
			src: "./images/fort.png",
			message: "Arrive at the fort. You win!" ,
			audio: '',
			points: 0,
		},
		3: {
			name: "rock" ,
			removable: false,
			src: "./images/rock.png", 
			audio: './audio/hit_rock.mp3',
			message: "Horse hurts his foot on a rock. Lose 5 points." ,
			points: -5,
		},
		4: {
			name: 'tree', 
			removable: false,
			src: "./images/tree1_spring.png", 
			audio: './audio/hit_rock.mp3',
			message: "Hit a tree. Lose 2 points." ,
			points: -2
		},
		5: {
			name: "river",
			removable: false,
			src: "./images/river.png",
			audio: './audio/water.mp3',
			message: "Fall in the river. Lose 6 points!" ,
			points: -6,
		},
		6: {
			name: 'fire',
			removable: true,
			src: "./images/fire.png", 
			audio: './audio/fire_rumble.mp3',
			message: "Make camp. Catch up on your rest. Gain 4 points." ,
			points: 4,
		},
		7: {
			name: 'othertree', 
			removable: false,
			src: "./images/tree3_spring.png", 
			audio: './audio/hit_rock.mp3',
			message: "Hit a tree. Lose 2 points." ,
			points: -2,
		},
		8: {
			name: 'nextscreen', 
			removable: false,
			src: "./images/arrow_up_screen.gif", 
			audio: './audio/footsteps.mp3',
			message: "You need to rest soon!",
			points: 5 // INCREASE THIS NUMBER TO MAKE THE MAZE EASIER
		}
	}

Types of cells

Do NOT change the cell numbers.

• 0 : This is an empty cell. The image is just a transparent square so you can leave it as is. Change the audio and message to suit, or you can leave it as is. The default is that the player loses one health point (-1) with each move. You can change the points to 0 to make the game easier.
• 1 : This is your player icon. You can use the character in the images folder or change the path to show a different image.
• 2: You won! Change the path to show the image you want to use. Change the message for the winning message for your game.
• 3 to 7 : All of these items are obstacles or objects to earn points. Do not change the cell number. Change the image, audio, message and points values to personalize your game.
• 8: This is an arrow to move from the first screen to the second. You can change the image, audio and message if you like, or just leave as is.