Final Topics: Maze Game

This page is some notes on making a maze game. One where a character on screen moves around a maze on screen. The character can be controlled by keyboard control and the characters movement is limited by the walls of the maze.

An important part of this is representing the maze in code. The key is really not using code to represent the maze but to use “data”. With arrays, you can represent the layout of the maze.

Jumping ahead of the array material covered by the class so far, you can store one array in another. The use here is to store a rectangular grid of array elements. This is called a 2 dimensional array. Here is an example of setting one up and using it:

var maze = [
	[1,1,1,1,1],
	[1,0,1,0,1],
	[1,0,0,0,1],
	[1,1,1,1,1]
];

var maze = [

[1,1,1,1,1],

[1,0,1,0,1],

[1,0,0,0,1],

[1,1,1,1,1]

];

The variable maze is a 2 dimensional array. The 1’s can represent walls and the 0’s can represent open space. You can check the value of elements in the array like this:

maze[0][0] // is the upper left corner with a value of 1.
maze[1][1] // is just inside the upper left corner with a value of 0.
maze[0][4] // is the upper right corner of the grid displayed above. 
maze[1][2] // is the section of well pushing into the middle of the grid.

maze[0][0] // is the upper left corner with a value of 1.

maze[1][1] // is just inside the upper left corner with a value of 0.

maze[0][4] // is the upper right corner of the grid displayed above.

maze[1][2] // is the section of well pushing into the middle of the grid.

Note that the if you think about the maze grid as corresponding to screen coordinates, it is flipped from the screen. The x orientation of the maze grid corresponds to the y orientation of the screen and vis versa. However, in code you can work around this difference. I would find it convenient to lay out the maze array variable as it would appear on screen so I can easily change the array contents.

The key is that the maze array lets you draw out the maze map in the array by setting 1’s and 0’s. This makes it easy to change the arrangement of the map. “All” you need then is code to draw the map based on the contents of the array and code to let you know if your character is allowed to move in a given direction within the map.

Character Movement

Keep track of the characters position within the maze arrays using an X and Y variable. You can manage movement of the character within the maze/array by looking at adjacent elements to the characters current position and see whether they are a 1 or a 0. The following will let you know if the character can move in any of the directions up, down, left, or right.

// given a character position of cX, cY:
if(maze[cX][cY+1] == 0) {
  // then character can move right
}
if(maze[cX][cY-1] == 0) {
  // then character can move left
}
if(maze[cX-1][cY] == 0) {
  // then character can move up
}
if(maze[cX+1][cY] == 0) {
  // then character can move down
}

// given a character position of cX, cY:

if(maze[cX][cY+1] == 0) {

// then character can move right

}

if(maze[cX][cY-1] == 0) {

// then character can move left

}

if(maze[cX-1][cY] == 0) {

// then character can move up

}

if(maze[cX+1][cY] == 0) {

// then character can move down

}

Again note the reversal of cX and cY vs what you are used to for screen coordinates.

So as a start, consider solving the problem of moving your character around the array.

Screen to Maze

If you can move the character around the maze in maze coordinates, you will want to display the character on the screen. Keep track of where the character is on screen independent of where it is in the maze array. You have screen coordinates and maze coordinates. You can go from screen coordinates to maze coordinates easily.

You can divide the screen into an overall grid corresponding to the maze array. Here is working example:

var maze = [
	[1, 1, 1, 1, 1],
	[1, 0, 1, 0, 1],
	[1, 0, 0, 0, 1],
	[1, 1, 1, 1, 1]
];

function setup() {
	createCanvas(windowWidth, windowHeight);
}

function screenToMaze(sX, sY) {
	var cX = int(sX / windowWidth * 5);
	var cY = int(sY / windowHeight * 4);
	text("cX " + cX + " cY " + cY, 100, 100);
}

function draw() {
	background(255);
	screenToMaze(mouseX, mouseY);
}

var maze = [

[1, 1, 1, 1, 1],

[1, 0, 1, 0, 1],

[1, 0, 0, 0, 1],

[1, 1, 1, 1, 1]

];

function setup() {

createCanvas(windowWidth, windowHeight);

}

function screenToMaze(sX, sY) {

var cX = int(sX / windowWidth * 5);

var cY = int(sY / windowHeight * 4);

text("cX " + cX + " cY " + cY, 100, 100);

}

function draw() {

background(255);

screenToMaze(mouseX, mouseY);

}

Wrapping Up

Choose a starting location for your character on the screen. It is important it is a place on screen that doesn’t correspond to a blocked area of the maze. Now that the character is on screen, you can identify which block the character is inside of. If you know what block the character is inside of, you can know which of the 4 directions the character can move and only allow it to move in that direction.

Your maze is defined by an array that you can easily edit in the code editor.

You can also draw the maze based on the array. You will need to go through the maze array element by element and identify which elements are filled and which are empty (1 or 0) and draw the right thing on the screen. Since you know the size of the screen and the size of the maze, you can convert from maze coordinates to screen coordinates. It is similar to screenToMaze in the example. But you will need to figure out the math. I recommend working it on on paper first.