Processing Maze Game Using Arrays

Processing is a neat IDE where what you code is converted into a visual window. This environment is perfect for learning the basics of code and is easy to interact with. Creating simple video games in this language is easy and fun. In this Instructable, I will show you how to create an interactive computer game where you navigate a maze. I will also demonstrate the use of arrays.

This Instructable was not written for those new to the Processing IDE and Language. If so, I suggest you visit the Processing Web Page to get started.

The Final Code (nothing is actually final):

Step 1: Download Processing

If you have not already downloaded Processing, you need to visit the Processing Download Page. Processing is supported on GNU/Linux, Mac OS X, and Windows. After Processing is successfully installed, open up the a new sketch. The window should look similar to the picture above. Press save to modify the sketch title. Make sure you know where the sketch is being saved to be able to reopen the sketch later. Yet again, I hope you already knew how to do this because this Instructable is not really written for beginners. If you are new to processing, visit the Processing Web Page.

Step 2: Arrays

For the Maze, we will be using arrays. An array is a list of data in which you can assign a variable multiple values. This is incredibly useful when drawing multiple objects on a window. An array starts off like declaring a normal variable but is instead written as:

variable type[] name = new variable type[number of value holders];

Example: int[] x = new int[10];

The variable type can be anything from a double to a boolean. You can change the change the amount of values the array can hold by changing the "number of value holders" into a positive integer such as 2 or 100. This will directly translate into the amount of objects on screen. To pull up each value holder type:

name[value holder#] = value;

Example: x[1] = 255;

The value holder# can be any number from 0 to the number below the value you entered above (number of value holders). This method for assigning values to an array is fairly ineffective for what we want to do. That is why we turn to loops. Write this in your setup:

for (int i = 0; i < name.length; i++) {

name[i] = value;

}

Example:

for (int i = 0; i < x.length; i++) {

x[i] = (int)random(100); //This sets all the x holders to random values in between 0-100

}

After setting this up, you can then call back your array values for use in the main block of your code. The values will be called back with a similar loop:

for (int i = 0; i < name.length; i++) {

//Use name[i] here

}

Example:

for (int i = 0; i < x.length; i++) {

ellipse(x[i], 50, 10, 10);

}

This will then draw many ellipses at random x values. By the way, this typically goes in your void draw() block. To go even further look at the code below. Play around with the values. This code will display a multitude of ellipses migrating across the screen. The effect should look like the picture above. The file is also here to download:

int[] x = new int[39];

void setup() {

size(600, 600);

for (int i = 0; i < x.length; i++) {

x[i] = i*15+15; //(int)random(width);

}

}

void draw() {

for (int i = 0; i < x.length; i++) {

ellipse(x[i], i*15+15, 10, 10);

x[i]+= 2;

if (x[i] >= width) {

x[i] = 0;

}

}

}

Step 3: Maze Code

Here is the final code for the maze game. You may copy, download, or modify the code to your liking:

//Coin Hunt! //Navigate the Maze and Collect as many Coins as Possible.

//DON'T GET STUCK! WATCH OUT FOR THE INVISIBLE WALLS

//You might have to click on the window to play.

int[] h = new int[500];

int[] hw = new int[500];

int[] x = new int[500];

int[] v = new int[500];

int[] vw = new int[500];

int[] y = new int[500];

float[] coinx = new float[4];

float[] coiny = new float[coinx.length];

boolean[] ctd = new boolean[coinx.length];

int points = 0;

int px, py;

boolean up = true, down = true, left = true, right = true;

int set = 50;

void setup() {

size(600, 600);

px = width/2-10;

py = height/2-10;

for (int i = 0; i < v.length; i++) {

v[i] = (int)random(width);

vw[i] = (int)random(set);

x[i] = (int)random(20)*30;

h[i] = (int)random(width);

hw[i] = (int)random(set);

y[i] = (int)random(20)*30;

}

for (int i = 0; i < coinx.length; i++) {

coinx[i] = (int)random(width);

coiny[i] = (int)random(height);

ctd[i] = true;

}

}

void draw() {

background(0);

for (int i = 0; i < coinx.length; i++) {

if (ctd[i]) {

stroke(255, 255, 0);

} else {

stroke(0);

}

strokeWeight(4);

point(coinx[i], coiny[i]);

if (ctd[i] && (dist(px, py, coinx[i], coiny[i]) <= 4)) {

ctd[i] = false;

points++;

}

if (coinx[i] < 0) {

coinx[i] = width;

coiny[i] = (int)random(height);

ctd[i] = true;

}

if (coinx[i] > width) {

coinx[i] = 0;

coiny[i] = (int)random(height);

ctd[i] = true;

}

if (coiny[i] < 0) {

coiny[i] = height;

coinx[i] = (int)random(width);

ctd[i] = true;

}

if (coiny[i] > height) {

coiny[i] = 0;

coinx[i] = (int)random(width);

ctd[i] = true;

}

}

for (int i = 0; i < v.length; i++) {

fill(0, 0, 255);

noStroke();

rect(x[i], v[i], 15, vw[i]);

rect(h[i], y[i], hw[i], 15);

if (x[i] + 15 < 0) {

x[i] = width;

v[i] = (int)random(width);

vw[i] = (int)random(set);

}

if (h[i] + hw[i] < 0) {

h[i] = width;

hw[i] = (int)random(set);

y[i] = (int)random(20)*30;

}

if (x[i] > width) {

x[i] = -15;

v[i] = (int)random(width);

vw[i] = (int)random(set);

}

if (h[i] > width) {

hw[i] = (int)random(set);

y[i] = (int)random(20)*30;

h[i] = -hw[i];

}

if (v[i] + vw[i] < 0) {

v[i] = height;

vw[i] = (int)random(set);

x[i] = (int)random(20)*30;

}

if (y[i] + 15 < 0) {

y[i] = height;

h[i] = (int)random(width);

hw[i] = (int)random(set);

}

if (v[i] > height) {

vw[i] = (int)random(set);

x[i] = (int)random(20)*30;

v[i] = -vw[i];

}

if (y[i] > height) {

y[i] = -15;

h[i] = (int)random(width);

hw[i] = (int)random(set);

}

strokeWeight(2);

stroke(255);

point(px, py);

for (int e = 0; e < x.length; e++) {

if (((px == h[e]) && (py <= y[e] + 15) && (py >= y[e])) || ((px == x[e]) && (py <= v[e] + vw[e]) && (py >= v[e]))) {

right = false;

}

if (((px == h[e] + hw[e]) && (py <= y[e] + 15) && (py >= y[e])) || ((px == x[e] + 15) && (py <= v[e] + vw[e]) && (py >= v[e]))) {

left = false;

}

if (((py == v[e]) && (px <= x[e] + 15) && (px >= x[e])) || ((py == y[e]) && (py <= h[e] + hw[e]) && (py >= h[e]))) {

down = false;

}

if (((py == v[e] + vw[e]) && (px <= x[e] + 15) && (px >= x[e])) || ((py == y[e] + 15) && (py <= h[e] + hw[e]) && (py >= h[e]))) {

up = false;

}

}

if (keyPressed && (key == CODED)) {

if (up && (keyCode == UP)) {

y[i] += 1;

v[i] += 1;

for (int e = 0; e < coiny.length; e++) {

coiny[e] += 0.002;

}

}

if (down && (keyCode == DOWN)) {

y[i] -= 1;

v[i] -= 1;

for (int e = 0; e < coiny.length; e++) {

coiny[e] -= 0.002;

}

}

if (left && (keyCode == LEFT)) {

x[i] += 1;

h[i] += 1;

for (int e = 0; e < coinx.length; e++) {

coinx[e] += 0.002;

}

}

if (right && (keyCode == RIGHT)) {

x[i] -= 1;

h[i] -= 1;

for (int e = 0; e < coinx.length; e++) {

coinx[e] -= 0.002;

}

}

}

up = true;

down = true;

left = true;

right = true;

}

fill(0);

strokeWeight(2);

stroke(255);

rect(500, 10, 60, 60);

fill(255);

textSize(30);

text(points, 500, 50);

textSize(50);

text("COIN HUNT", 50, 60);

}

Step 4: PLAY!

These instructions are for the code I provided you with.

Navigate the Maze using your arrow keys. You are the tiny white dot in the center of the window. Your dot can squeeze through gaps down to a pixel wide. The yellow dots scattered around the maze are the coins. Collect as many coins as you possibly can until you get stuck. Whenever you strike the walls, the maze shifts and the layout changes a bit. Do not get stuck in these moving walls or the game is over from my point of view (you are completely immobile). Since I set the walls with a random generator, the wall length may be 0 pixels. This means there are also invisible walls. You can change this factor but I believe it adds a sort of mystery to the game.

Have fun and I hope you enjoyed my Instructable.