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.