![[OLD FALL 2018] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
/*
Katherine Hua, Min Lee
Section A
khua@andrew.cmu.edu, mslee@andrew.cmu.edu
Final Project
*/
var characters = []; // images of the characters are loaded into this array
var mushroom; // image of mushroom that represents # of lives left is loaded into this variable
var cloud; // image of cloud is loaded into this variable
var cloudsX = []; //cloud's randomized x positions will be loaded into this array
var cloudsY = []; //cloud's randomized y positions will be loaded into this array
var cloudsSpeed = []; // cloud's randomized speed will be loaded into this array
var gameMode = 0; // determines which screen you see; title screen = 0, game = 1, game over = 2, instructions = 3
var lives = 3; // you start out with 3 lives
var score = 0; // you begin with a score of 0
var characterIndex; //assigns a number value to a character
var pipeNumber; // //assigns each pipe a number value
var characterX; //keeps track of the character's X values
var characterY = 180; //keeps track of the character's Y values
var characterSpeed = -3; // //keeps track of the character's speed
var pipesOccupied; //the pipe number that's occupied by a character
var newIndex; //new number value assigned to character
function preload() {
//links of character images
var characterImages = [];
mushroom = loadImage("https://i.imgur.com/V1vjvug.png"); //mushroom that is meant to represent # of lives
cloud = loadImage("https://i.imgur.com/7PCTEzk.png"); //clouds that will be floating by in the background
characterImages[0] = "https://i.imgur.com/Bf9U7OE.png"; //mario
characterImages[1] = "https://i.imgur.com/s7o5h2m.png"; //peach
characterImages[2] = "https://i.imgur.com/xQqZiZb.png"; //toad
characterImages[3] = "https://i.imgur.com/0bcsmDZ.png"; //bowser
characterImages[4] = "https://i.imgur.com/Wv9Dkzj.png"; //wario
characterImages[5] = "https://i.imgur.com/AkWIiIw.png"; //boo
//initial cloud positions
for (var i = 0; i < 4; i++) {
//setting the clouds to random initial positions
cloudsX[i] = width + i * 50;
cloudsY[i] = random(0, 130);
cloudsSpeed[i] = random(0.25, 1); // moving the clouds at a randomized speed between 0.25 and 1
};
//load images of characters into characters array
//allows for object to change characters
characters[0] = loadImage(characterImages[0]);
characters[1] = loadImage(characterImages[1]);
characters[2] = loadImage(characterImages[2]);
characters[3] = loadImage(characterImages[3]);
characters[4] = loadImage(characterImages[4]);
characters[5] = loadImage(characterImages[5]);
}
function setup() {
createCanvas(600, 400);
//random positions of character
pipeNumber = round(random(0, 5)); //randomly chooses which pipe the character will appear at
pipesOccupied = pipeNumber; //corresponding pipe number
characterX = width / 7 * (pipeNumber + 1) + 60; //character's x position that will determine their corresponding pipe
characterIndex = round(random(0, 5)); //randomly chooses which character will appear
}
function draw() {
background(21, 30, 99); // setting background to the blue
//creating the clouds; just loading the image onto the canvas; they do not move here yet
for (var i = 0; i < 4; i++) {
image(cloud, cloudsX[i], cloudsY[i]);
};
displayHill(); // creating the hill landscape moving in the background
//part of the Title Screen
//images of characters spread out across title screen
if (gameMode === 0) {
for (var x = 0; x < 6; x++) {
image(characters[x], (width/7 * (x+1)) - (width / 7 / 2) + 10, 110);
}
}
gameScreen(); // this is the actual game
displayChutes(); // creates the green chutes/pipes
displayGround(); // creates the criss-crossed red brick ground
titleScreen(); // this is the starting, default screen
drawScoreTally(); // keeps track of the score in gameScreen and gameOverScreen
instructionsScreen(); // instructions screen
displayButtons(); // creates the buttons in the actual game part
gameOverScreen(); // the game over screen after you lose all your lices
//clouds are made to move here at randomized speeds
for (var i = 0; i < cloudsX.length; i++) {
cloudsX[i] -= cloudsSpeed[i];
if (cloudsX[i] < -60) {
cloudsX[i] = width;
};
};
}
function drawScoreTally() {
if (gameMode === 1) { // we only want this visual element to appear in the gameScreen
push();
//making the yellow rectangle where the score will be kept
fill(181, 141, 38);
strokeWeight(2);
stroke(255, 229, 163);
rectMode(CENTER);
rect(width / 2, 35, 70, 20, 3);
noStroke();
//adding the actual text on top of the rectangle
fill(255,229, 163);
textAlign(CENTER);
text("Score:" + " " + score, width / 2, 40)
//text saying that if user wishes to restart the game at any point, the user can just press the key 'x' to restart the game
text("Press 'x' to restart game", width/2, 60);
pop();
};
}
//creating the generative hill landscape in the background of the game
function displayHill() {
var hill = 0.006
var hillSec = 0.0007;
push();
stroke(25, 83, 19);
beginShape();
for (i = 0; i < width; i ++) {
var h = (millis() * hillSec) + (i * hill);
var y = map(noise(h), 0, 1, 200, 100);
line(i, y, i, height);
}
endShape();
pop();
}
// creating the brick ground
function displayGround() {
push();
strokeWeight(2);
stroke(211, 71, 71);
fill(181, 38, 38);
rectMode(CORNER);
rect(0, 260, 600, 400-260);
for (var k = 0; k < 60; k ++) {
line(k * 10, 260, k * 10, 400);
line(0, 260 + k * 10, 600, 260 + k * 10);
}
pop();
}
//creating the green chutes/pipes
function displayChutes() {
if (gameMode === 0 || gameMode === 1 || gameMode === 3) { //we want the chutes/pipes to appear in all screens except the game over screen
push();
//creating 6 chutes/pipes
for (var j = 1; j < 7; j++) {
rectMode(CENTER); //drawing rectangles from the center rather than the corner
fill(43, 130, 58);
strokeWeight(3);
stroke(81, 163, 95);
rect((width/7) * j, 220, 65, 80, 2); //body of the chute
rect((width/7) * j, 200, 75, 40, 2); //head of the chute
strokeWeight(7);
//giving the pipes the highlight on their left side
line(55 + (width/7 * (j-1)), 186, 55 + (width/7 * (j-1)), 215);
line(60 + (width/7 * (j-1)), 225, 60 + (width/7 * (j-1)), 255);
}
pop();
}
}
function titleScreen() {
push();
if (gameMode === 0 || gameMode === 3) { // we want the title screen to appear in title screen and instructions screen
//creating title of the game: "Pipe it Up"
stroke(155, 115, 0);
strokeWeight(8);
fill(255, 203, 57);
textAlign(CENTER);
textSize(70);
textFont('arial')
text("PIPE IT UP", width / 2, (height / 3 * 2) + 60);
push();
//creating the two yellow buttons on bottom of screen
fill(155, 115, 0);
strokeWeight(2);
stroke(255, 230, 57);
rect(150, 350, 125, 35, 4); //left button
rect(325, 350, 125, 35, 4); // right button
textSize(15);
//creating the text on top of buttons
textFont('Arial');
strokeWeight(1);
stroke(255, 203, 57);
fill(255, 203, 57);
text("START GAME", 213, 373);
text("INSTRUCTIONS", 388, 373);
pop();
}
pop();
//changes cursor to hand when hovering over start button and instructions button
if (mouseX > 150 & mouseX < 275 && mouseY < 385 && mouseY > 350) {
cursor(HAND);
if (mouseIsPressed) {
gameMode = 1;
};
} else if (mouseX > 325 & mouseX < 450 && mouseY > 350 && mouseY < 385) {
cursor(HAND);
if (mouseIsPressed) {
gameMode = 3;
};
} else {
cursor(ARROW);
}
}
function instructionsScreen() {
if (gameMode === 3) { //we only want the instructions screen to occur during instructions Screen time
push();
//creating an lowered opacity blanket of black across the title screen
fill(0, 0, 0, 200);
rect(0,0,600,400);
//title of the instructions screen: "Instructions"
textSize(30);
strokeWeight(1);
stroke(255, 188, 0);
fill(255, 188, 0);
textAlign(CENTER);
text("INSTRUCTIONS", width/2, 80);
//purpose of the game
fill(255);
strokeWeight(1);
stroke(255);
textSize(18);
text("Keep the Mushroom Kingdom safe!", width/2, 125);
//instructions of the game
textSize(15);
noStroke();
textAlign(LEFT);
text("There are 6 pipes leading into the kingdom, each one assigned to a button \n on your keyboard : S, D, F, J, K, L. \n \n It is your job as royal guard to delegate who enters and who does not. \n Unfortunately, some baddies will try to infiltrate the kingdom \n and make you lose your job. But luckily, with the tap of a button, \n you can immediately prevent them from entering. \n But be careful! Reject a civilian and you'll get a demerit. \n Three demerits is a disadulation.", 50, 160);
textAlign(CENTER);
strokeWeight(1);
stroke(255);
text("Press 'x' to return to Start page", width/2, 350);
pop();
}
}
function gameScreen() {
if (gameMode === 1) {
//----------------------------- get random character to pop up at different location -------
//places character down
image(characters[characterIndex], characterX, characterY);
//if character reaches peak, move in opposite direction
if (characterY < 100) {
characterSpeed = characterSpeed * -1
//if character reaches bottom of the pipe, changes character randomly and goes to new pipe
} else if (characterY > 200) {
characterSpeed = characterSpeed * -1
characterIndex = round(random(0, 5))
pipesOccupied = round(random(0, 5))
characterX = width / 7 * (pipesOccupied) + 60
};
characterY += characterSpeed;
//----------------------------- correct answer / wrong answer ------------------------------
//draws lives as mushrooms
for (var i = 0; i < lives; i++) {
image(mushroom, 60 + (40 * i), 20)
};
//once lives reaches 0, game ends
if (lives === 0) {
gameMode = 2
};
}
}
function displayButtons() {
//draws each of the buttons
var txt = ["S", "D", "F", "J", "K", "L"];
if (gameMode === 1) {
push();
stroke(137, 144, 200);
strokeWeight(5);
//changing color of button if respective key is pressed
//if 's' key is pressed
if (keyIsPressed) {
if (key === 's') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width/7), height - height/7, 40, 40);
// if 'd' key is pressed
if (keyIsPressed) {
if (key === 'd') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 2, height - (height / 7), 40, 40);
// if 'f' key is pressed
if (keyIsPressed) {
if (key === 'f') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 3, height - (height / 7), 40, 40);
// if 'j' key is pressed
if (keyIsPressed) {
if (key === 'j') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 4, height - (height / 7), 40, 40);
// if 'k' key is pressed
if (keyIsPressed) {
if (key === 'k') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 5, height - (height / 7), 40, 40);
// if 'l' key is pressed
if (keyIsPressed) {
if (key === 'l') {
fill(39, 49, 124);
} else {
fill(91, 100, 168);
}
} else {
fill(91, 100, 168);
}
ellipse((width / 7) * 6, height - (height / 7), 40, 40);
// adding the text on top of the button
pop();
for (var j = 1; j < 7; j++) {
push();
fill(200, 184, 220);
noStroke();
textAlign(CENTER);
textSize(19);
text(txt[j - 1], (width / 7) * j , height - (height / 7) + 5);
pop();
}
}
}
function gameOverScreen() {
//press 'r' to restart
if (gameMode === 2) {
//title of the gameOverScreen: "game over"
push();
fill(11, 16, 90, 200);
rect(0, 0, 600, 400);
textSize(50);
fill(239, 0, 42);
strokeWeight(5);
stroke(145, 0, 26);
textAlign(CENTER);
text("GAME OVER", width/2, height/2 - 20);
//displays your score
textSize(30);
strokeWeight(2);
text("Score:" + " " + score, width/2, height/2 + 20);
//tells you how you can play again and restart the game
textSize(20);
strokeWeight(1);
fill(239, 0, 42);
text("Press 'r' to restart game", width/2, height/2 + 70);
pop();
};
}
function keyPressed() {
//if game hasn't started yet, press S to start
//if game started, press X to go to home screen
//if game over, press r to restart
if (gameMode === 1) {
if (key === 'x' || key === 'X') {
gameMode = 0;
level = 1;
score = 0;
// if character is bad guy, add point for pressing; else subtract life
//if character is good guy, subtract life for pressing and add point for not pressing
} else {
for (var i = 0; i < characters.length; i++) {
var keys = ["s", "d", "f", "j", "k", "l"]
if (pipesOccupied === i) {
//if good guy,
if (characterIndex === 0 || characterIndex === 1 || characterIndex === 2) {
if (key === keys[i]) {
lives -= 1
}
} else if (characterIndex === 3 || characterIndex === 4 || characterIndex === 5 & key === keys[i]) {
score += 1
} else if (characterIndex === 3 || characterIndex === 4 || characterIndex === 5 && key != keys[i]) {
lives -= 1
}
};
};
}
//GAMEOVER - press R to restart the game
} else if (gameMode === 2) {
if (key === 'r' || key === 'R') {
gameMode = 0;
level = 1;
score = 0;
lives = 3;
};
//INSTRUCTIONS - press X to go to title screen
} else if (gameMode === 3) {
if (key === 'x' || key === 'X') {
gameMode = 0;
};
};
}
Instructions:
Keep the Mushroom Kingdom safe! There are 6 pipes leading into the Mushroom Kingdom and each one is assigned to a respective button on your keyboard : S, D, F, J, K, L. It is your job as a royal guard of the kingdom to delegate who is able to enter and who is not. Unfortunately, some villains will try to infiltrate the kingdom and make you lose your job. Luckily, with the tap of a button, you can immediately prevent them from entering. But be careful! Reject a civilian and you’ll lose a demerit (life). “Three demerits is a disadulation” – Jim Halpert from The Office. haha
Statements:
What we have produced for our final project is a completely different direction than what we had proposed to do in our Proposal. After lots of thought, we decided to change the topic of our final project because we believed this was something that could best reflect our creativity and have a more set goal (and also in celebration of Nintendo’s release of Super Smash Bros Ultimate today).
In regards to the distribution of work, Min and I worked in person together throughout the whole process. In the beginning, we would just sit next to each other, create a visual element, and then come together to merge whatever the two of us came up with. After the visual aspects were basically all done and we had to get to the interactive component of the game, that is when things started to get a little more difficult. We had to communicate a lot and constantly merge our codes to make sure that we are using the same variables, going towards the same direction, and following the same general train of thought. In the end, I focused more on the game design and structure while Min focused more on gameplay and functionality.
In the beginning, we had wanted characters to be coming out of all six chutes randomly, but at all times. But, we couldn’t figure out how to prevent characters from appearing in pipes that another character already occupies. So, we shifted our goals to stick to one pipe. We also could not figure out how to debug our code so that if no key is pressed to capture a “bad” character, a life is lost, or vice versa, if no key is pressed to let a “good character remain free, points are added to the score. However other than those two problems, the rest of the game came out quite successfully.