My Final Project

For my Final Project, I created a game called "Corridors". The goal of the game is extremely simple. You need to guide your mouse through 4 levels without touching the edges of the maze. If you make contact with the edges, your game will reset. Your mouse is connected to a blue ellipse (Draw Tool), and the ball is basically your character you are navigating.

Here is my code:

var brushSize;

var gameState;

function setup() {

//put setup code here

createCanvas(800,800);

brushSize = 20;

gameState = 0;

}

function draw(){

background('gray');

//MENU SCREEN

if(gameState == 0){

textSize(60);

text('Corridors', 300, 300);

fill(0, 102, 153);

text('Corridors', 300, 320);

fill(0, 102, 153, 51);

text('Corridors', 300, 280);

textSize(30);

fill('black');

text ('(Touch Green Box To Continue)', 240, 600 );

textSize(30);

fill('black');

text ('Touch Red = RESET (-.-)', 290, 520 );

//MENU SCREEN START BOX

fill(0,255,0);

rect(100,750, 40, 40);

//DRAW TOOL

fill(0, 0, 255);

ellipse(mouseX, mouseY, brushSize, brushSize);

}

//using mouse coordinates to start the game

if ((mouseX > 100) && (mouseX < 140) && (mouseY > 750) && (gameState == 0)){

gameState =1;

console.log("start game");

}

else if (gameState == 1){

//first level

background('gray');

fill(255,0,0);

rect(1,0,200,200);

if (((mouseX - brushSize/2) < 201) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 0) && ((mouseY - brushSize/2) < 200)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(600,0,200,200);

if (((mouseX - brushSize/2) < 800) && ((mouseX + brushSize/2) > 600) &&

((mouseY + brushSize/2) > 0) && ((mouseY - brushSize/2) < 200)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,200,400,500);

if (((mouseX - brushSize/2) < 401) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 200) && ((mouseY - brushSize/2) < 700)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(450,200,700,600);

if (((mouseX - brushSize/2) < 701) && ((mouseX + brushSize/2) > 450) &&

((mouseY + brushSize/2) > 200) && ((mouseY - brushSize/2) < 800)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

//LEVEL

textSize(20);

fill('black');

text('Level 1/4', 4, 45);

//this is the winning square

fill(0,255,0);

rect(405, 90, 40, 40);

//DRAW TOOL

fill(0, 0, 255);

ellipse(mouseX, mouseY, brushSize, brushSize);

}

if ((mouseX > 405) && (mouseX < 445) && (mouseY > 90) && (mouseY < 130) && (gameState == 1)){

gameState =2;

console.log("level 2");

}

else if (gameState == 2){

//second level

fill(255, 0, 0);

rect(1,1, 800, 80);

if (((mouseX - brushSize/2) < 801) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 1) && ((mouseY - brushSize/2) < 81)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,81, 200,60);

if (((mouseX - brushSize/2) < 201) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 81) && ((mouseY - brushSize/2) < 141)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1, 141, 600, 60);

if (((mouseX - brushSize/2) < 601) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 141) && ((mouseY - brushSize/2) < 201)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(630, 141, 300, 60);

if (((mouseX - brushSize/2) < 930) && ((mouseX + brushSize/2) > 630) &&

((mouseY + brushSize/2) > 141) && ((mouseY - brushSize/2) < 201)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,261,400,60);

if (((mouseX - brushSize/2) < 401) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 261) && ((mouseY - brushSize/2) < 321)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(430,261,400,60);

if (((mouseX - brushSize/2) < 830) && ((mouseX + brushSize/2) > 430) &&

((mouseY + brushSize/2) > 261) && ((mouseY - brushSize/2) < 321)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1, 381,700,60);

if (((mouseX - brushSize/2) < 701) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 381) && ((mouseY - brushSize/2) < 441)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(730, 381,80,60);

if (((mouseX - brushSize/2) < 810) && ((mouseX + brushSize/2) > 730) &&

((mouseY + brushSize/2) > 381) && ((mouseY - brushSize/2) < 441)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1, 501, 90, 60);

if (((mouseX - brushSize/2) < 91) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 501) && ((mouseY - brushSize/2) < 561)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(120, 501,790, 60);

if (((mouseX - brushSize/2) < 910) && ((mouseX + brushSize/2) > 120) &&

((mouseY + brushSize/2) > 501) && ((mouseY - brushSize/2) < 561)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,621, 400, 60);

if (((mouseX - brushSize/2) < 401) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 621) && ((mouseY - brushSize/2) < 681)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(430, 621, 400, 60);

if (((mouseX - brushSize/2) < 830) && ((mouseX + brushSize/2) > 430) &&

((mouseY + brushSize/2) > 621) && ((mouseY - brushSize/2) < 681)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1, 681, 350, 115);

if (((mouseX - brushSize/2) < 351) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 681) && ((mouseY - brushSize/2) < 796)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(480,681,800,115);

if (((mouseX - brushSize/2) < 1280) && ((mouseX + brushSize/2) > 470) &&

((mouseY + brushSize/2) > 681) && ((mouseY - brushSize/2) < 796)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

//LEVEL

textSize(20);

fill('black');

text('Level 2/4', 4, 45);

fill(0,255,0);

rect(394,710,40,40);

//DRAW TOOL

fill(0, 0, 255);

ellipse(mouseX, mouseY, brushSize, brushSize);

}

if ((mouseX > 394 ) && (mouseX < 434) && (mouseY > 710) && (mouseY < 750) && (gameState == 2)){

gameState =3;

console.log("level 3");

}

else if (gameState == 3){

//third level

fill(255,0,0);

rect(1, 700, 354, 100);

if (((mouseX - brushSize/2) < 355) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 700) && ((mouseY - brushSize/2) < 800)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,1, 200, 100);

if (((mouseX - brushSize/2) < 201) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 1) && ((mouseY - brushSize/2) < 101)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(320, 1, 480, 100);

if (((mouseX - brushSize/2) < 800) && ((mouseX + brushSize/2) > 320) &&

((mouseY + brushSize/2) > 1) && ((mouseY - brushSize/2) < 101)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1, 100, 250, 100);

if (((mouseX - brushSize/2) < 251) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 100) && ((mouseY - brushSize/2) < 200)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(300,100, 500, 100);

if (((mouseX - brushSize/2) < 800) && ((mouseX + brushSize/2) > 300) &&

((mouseY + brushSize/2) > 100) && ((mouseY - brushSize/2) < 200)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,200,230,300);

if (((mouseX - brushSize/2) < 231) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 200) && ((mouseY - brushSize/2) < 500)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(280, 200, 520, 300);

if (((mouseX - brushSize/2) < 800) && ((mouseX + brushSize/2) > 280) &&

((mouseY + brushSize/2) > 200) && ((mouseY - brushSize/2) < 500)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,500, 200, 100);

if (((mouseX - brushSize/2) < 201) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 500) && ((mouseY - brushSize/2) < 600)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(400,500, 400,200);

if (((mouseX - brushSize/2) < 800) && ((mouseX + brushSize/2) > 400) &&

((mouseY + brushSize/2) > 500) && ((mouseY - brushSize/2) < 700)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,600, 300, 100);

if (((mouseX - brushSize/2) < 301) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 600) && ((mouseY - brushSize/2) < 700)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

//LEVEL

textSize(20);

fill('black');

text('Level 3/4', 4, 45);

//this is the winning square

fill(0,255,0);

rect(260 ,20 , 40, 40);

//DRAW TOOL

fill(0, 0, 255);

ellipse(mouseX, mouseY, brushSize, brushSize);

}

if ((mouseX > 260 ) && (mouseX < 300) && (mouseY > 20) && (mouseY < 60) && (gameState == 3)){

gameState =4;

console.log("level 4");

}

else if (gameState == 4){

//fourth level

background('gray');

fill(255,0,0);

rect( 1, 1, 800, 20);

if (((mouseX - brushSize/2) < 801) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 800) && ((mouseY - brushSize/2) < 820)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1, 21,260,40);

if (((mouseX - brushSize/2) < 261) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 21) && ((mouseY - brushSize/2) < 61)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,61, 770, 40);

if (((mouseX - brushSize/2) < 771) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 61) && ((mouseY - brushSize/2) < 101)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(30, 141, 800, 40);

if (((mouseX - brushSize/2) < 830) && ((mouseX + brushSize/2) > 30) &&

((mouseY + brushSize/2) > 141) && ((mouseY - brushSize/2) < 181)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1, 221, 770, 40);

if (((mouseX - brushSize/2) < 771) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 221) && ((mouseY - brushSize/2) < 261)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(30, 301, 800, 40);

if (((mouseX - brushSize/2) < 830) && ((mouseX + brushSize/2) > 30) &&

((mouseY + brushSize/2) > 301) && ((mouseY - brushSize/2) < 341)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1, 381, 770, 40);

if (((mouseX - brushSize/2) < 771) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 381) && ((mouseY - brushSize/2) < 421)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect (30, 461, 800, 40);

if (((mouseX - brushSize/2) < 830) && ((mouseX + brushSize/2) > 30) &&

((mouseY + brushSize/2) > 461) && ((mouseY - brushSize/2) < 501)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1, 541, 770, 40);

if (((mouseX - brushSize/2) < 830) && ((mouseX + brushSize/2) > 30) &&

((mouseY + brushSize/2) > 621) && ((mouseY - brushSize/2) < 661)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(30, 621,800,40);

if (((mouseX - brushSize/2) < 830) && ((mouseX + brushSize/2) > 30) &&

((mouseY + brushSize/2) > 621) && ((mouseY - brushSize/2) < 661)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

rect(1,701, 770,40);

if (((mouseX - brushSize/2) < 771) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 701) && ((mouseY - brushSize/2) < 741)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

fill(255,0,0);

rect( 1, 780, 800, 20);

if (((mouseX - brushSize/2) < 801) && ((mouseX + brushSize/2) > 1) &&

((mouseY + brushSize/2) > 780) && ((mouseY - brushSize/2) < 800)){

//set game state to lose the game

console.log("you lose");

gameState = 0;

}

//LEVEL

textSize(20);

fill('black');

text('Level 4/4', 4, 45);

//this is the winning square

fill(0,255,0);

rect(1 ,740 , 40, 40);

//using mouse coordinates to start the game

if ((mouseX > 1) && (mouseX < 41) && (mouseY > 740) && (gameState == 4)){

gameState =5;

console.log("endgame");

}

//DRAW TOOL

fill(0, 0, 255);

ellipse(mouseX, mouseY, brushSize, brushSize);

}

//ENDGAME

if(gameState == 5){

textSize(60);

fill(0,102,153,51);

text('YOU WIN !!!', 250, 360);

fill(0, 102, 153);

text('YOU WIN !!!', 250, 400);

fill(0, 102, 153, 51);

text('YOU WIN !!!', 250, 380);

textSize(30);

fill('black');

text ('Thank You For Playing!', 250, 600 );

}

}

-------------------------------------------------------------------------------------------------

Game State 0:

Game State 1:

Game State 2:

Game State 3:

Game State 4:

Game State 5:

-------------------------------------------------------------------------------------------------

Overall, Im very pleased with how my project came out. I was able to code out what I wanted my game to be.

I would say that the hardest part of creating this game was figuring out how to put hit detection in my game, or anything that involved changing from one screen to another. Once I figured out how to add the code for the hit detection of all the rectangles through all 4 levels, I was able to tie up the rest of the code very well.

Im disappointed that I wasn't able to create more levels due to how I coded the hit detection, but I'm satisfied that they all work properly. I do plan to add more levels in my future spare time.