In this project you will work on a game that uses more inputs than our previous code.

You have used event functions! You have used fonts! You have used mouse interactions! But now, you are going to really tackle the keyboard in a game. You will write a maze game that players can navigate with the arrow keys. You'll use if() statements, image processing, and incrementing and decrementing variables to create this game.

Once we've covered the basics, you'll write a maze game that players can navigate with the arrow keys. You'll use your knowledge of if() statements, image processing, and incrementing & decrementing variables to create this game.

Gather Your Materials

More Ways to Read Input

You used key and keyPressed before - hazzah. But now you need the system variable keyCode , which returns the value for any key you press, including the up arrow, ENTER , SHIFT, and so on. When you pair these variables with keyboard event functions you can take input from your keyboard with a lot less code.

Keyboard event functions work just like mouse event functions. They allow you to interrupt the top-to-bottom flow of code execution and trigger an event "out of order". In this project, you'll encounter three keyboard event functions:

• keyPressed()
• keyReleased()
• keyTyped()

But to implement game controls, you need to be able to detect keypresses; you also need to be able to find out which key was pressed. You also need to be able to find out which key was pressed. Fortunately, Rick and Morty can help you with that.

Working with ASCII and keyCode

The American Standard Code for Information Interchange (ASCII) is the standard for encoding the letters and numbers on your keyboard so that your computer will know which key you're pressing. ASCII uses the numbers 0-127 to represent 128 different characters: the numbers 0-9, the letters of the English alphabet in both upper- and lowercase, and a few punctuation symbols, including the space character. Each character has an ASCII code associated with it, and when your computer receives that code, it recognizes the number as that specific character. For example, the character A has an ASCII value of 65.

You can search online for "ASCII table" to see a complete of ASCII codes, OR you can whip together a Processing sketch to check the ASCII value of a given key.

void setup() {

size(200,200);

}

void draw() {

background(150);

textSize(50);

fill(355,0,0);

if(key == CODED) {

text(keyCode, 50,100);

} else {

text(int(key), 50, 100);

text(key, 150,100);

}

}

So how does this work, if you press the letter D then you should see 100d displayed on your screen because that is the keyCode for d.

Driving shapes with up, down, left and right

Start with simple code like an ellipse to be moved across the screen. You'll need variables.

int x = 300;

int y = 300;

void setup() {

size(500,500);

}

void draw() {

background(255);

fill(255,0,0);

noStroke();

ellipse(x,y,50,50);

}

So clearly it is not going to move with your arrows like that. You need a keyboard event function meaning a void keyPressed() . Remember events only occur once.

void keyPressed() {

if ((key == CODED) && (keyCode == UP)) {

y--;

}

if ((key == CODED) && (keyCode == DOWN)) {

y++;

}

if ((key == CODED) && (keyCode == LEFT)) {

x--;

}

if ((key == CODED) && (keyCode == RIGHT)) {

x++;

}

}

Run the code and change the ball to a shape of your choosing, maybe a star or character. Change the code so the object moves faster in all directions.

Building the MAZE game

1) Generate the maze. Download this png of a maze from googleclassroom or right here.

2) Writing the Sketch

Once you have a maze, it's time to write your game in Processing. The sketch window will display both the maze and an ellipse that players will move around, so first you'll create variables for both. Your maze is just an image, so you'll need a PImage variable and set x and y to your maze's start position in pixels. I used 162 pixels for both because my maze starts in the middle and the default size of a maze from MAZE GENERATOR is 324 pixels square.

PImage maze;

int x = 162;

int y = 162;

void setup(){

maze = loadImage("maze.png");

size(324, 324);

}

void draw()

{

background(255);

image(maze,0,0);

if((x > 155) && (x < 180) && (y < 15)){

textSize(48);

textAlign(CENTER);

fill(255,0,0);

text("YOU WIN!",width/2,height/2);

}

fill(255, 0, 0);

noStroke();

float touch = red(get(x,y));

ellipse(x, y, 10, 10);

if(touch <= 200){

x = 162;

y = 162;

}

println(mouseX + "," + mouseY);

}

void keyPressed(){

if ((key == CODED) && (keyCode == UP)){

y--;

}

if ((key == CODED) && (keyCode == DOWN)){

y++;

}

if ((key == CODED) && (keyCode == RIGHT)){

x++;

}

if ((key == CODED) && (keyCode == LEFT)){

x--;

}

}

If your ellipse is not at the start of your maze adjust your x and y variables. You may also want to change the diameter of your ellipse, if your maze's walls are too close together.

Detecting wall touches with get()

Your maze's walls are black, so if the ellipse hits one it will be touching the color black. SO you want to use that information to stop the ellipse from passing through walls! FORTUNATELY, Processing has this lit function called get() and it makes it easy peasy to determine what color the ellipse is touching.

The get() function retrieves the color of a pixel at a given position. Then, you can extract the pixel's red, green, or blue value from that color by passing it to the red() green() or blue() functions. Try it by adding this line to your existing draw() loop:

println(red(get(mouseX, mouseY)));

This code prints the red value of the pixel at (mouseX, mouseY). If you move your mouse around, the value printed should be 255 while you MOVE your mouse over white, for which all color values are 255. When you move your mouse to a line of the maze, the value should be 0. Now change mouseX and mouseY to your x and y variables and move that println() function one line above the ellipse() function .Move your ellipse around; do you see a difference? You can use the value from get() to detect a touch! So now your draw loop should look like this:

void draw(){

background(255);

image(maze,0,0);

fill(255,0,0);

noStroke();

float touch = red(get(x,y));

ellipse(x,y,10,10);

if(touch < 255) {

x = 162;

y = 162;

}

}

Create a new varaible called touch of float type and set it to the value you printed earlier, red(get(x,y)). Using an if() statement test whether touch goes below 255. If so, the ellipse touched a wall! Hazzah! In that case, assign x and y to their original values to return the ellipse to the start of the maze hahaha. Now players can't get through the walls, but what happens when they victoriously finish the maze?????

Adding the VICTORY condition

You can see the end of the maze in your image, but you also need to create a finish line so that your player feels victorious at the end. You can use a compound if() statement to check if the ellipse is within an invisible bounding box, and if so, end the game. First, you need to define the finishing box. To determine where the maze ends, print mouseX and mouseY to the console window. Add this line to your draw() loop:

• println(mouseX + "," + mouseY);

Restart your sketch. Hover your mouse over the area where your maze's finishing box should be and note the coordinates on a piece of paper. Create your bounding box with a compound if() statement in the draw loop.

void draw() {

image(maze,0,0);

if((x>165) && (x <180) && (y<10)) { //bounding box was roughly centered at 170,8

textSize(48);

textAlign(CENTER);

fill(255,0,0);

text("YOU WIN AT LIFE!! HAZZAH!", width/2, height/2);

}

fill(255,0,0);

noStroke();

float touch = red(get(x,y));

ellipse(x,y,10,10);

if(touch <= 200) {

x = 162;

y = 162;

}

println(mouseX + "," + mouseY);

}

For my maze I tested whether x is greater than 165 and less than 180 . Then I added one more condition for the y boundary. My if() statement looks for anything less than 10. If ALL OF THESE CONDITIONS ARE TRUE then it says YOU WIN AT LIFE. The placement of the if statement matters - duh - so make sure it is at the top but after the image is called so the text appears on top of the maze image. Run your code.

Add your makey makey controller

So basically the MakeyMakey is a microcontroller that communicates with your computer using the Human Interface Device HID protocol. This means you can use a MakeyMakey as a keyboard or mouse without having to install any drivers or other software.

When you build a controller you can use ANYTHING and it detects when you've touched those objects even if they're materials that don't conduct electricity very well like pasta or cats.

Sometimes it is difficult to connect a fruit so I suggest sticking a screw or nail into the fruit and attaching the alligator clip to that.

Now attach yourself to a ground connection on the MakeyMakey! You could just connect an alligator clip to ground and hold the other end in your hand, but you'll need both hands to work the controller. Instead, we'll build a bracelet out of aluminum foil and masking tape, and attach the alligator clip to that.

Tear off a length of tape that is roughly the circumference of your wrist. Starting at one end, add aluminum foild to the strip of tape and leave about an inch of the sticky side open to one end. Then wrap the bracelet around your wrist with the foil touching your skin, and fasten your bracelet. Finally, attach the alligator clip to the bracelet, making sure it contacts the foil and that the foil contacts your skin.

Now connect your MakeyMakey to your computer via the USB cable. If that board is flashing hazzah you are a cyborg genius. Try out your maze! Try making your controller more elaborate, replace the fruit with friends or cats: by giving each one a bracelet like yours. Try playing with conductive material like pizza or copper tape. Try making a maze yourself using mazergenerator.net and add a cool character instead of an ellipse.