![[OLD FALL 2017] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2020/08/stop-banner.png)
PSA: THIS IS A TWO-PART ENDEAVOR, SO BE SURE TO SCROLL DOWN FOR PART 2!
Hi guys! This is a game we made called “Carl Cooks a Meal” that exists in two parts. Under the premise, our friend Carl is trying to make a lovely meal for his girlfriend Carla. However, he has absolutely no idea how to start! The first part is a clickventure where people help Carl gather ingredients. People have the option to either check in the refrigerator to see what’s inside OR take a trip to a distant country to get some more exotic ingredients. In travelling, users can learn about the histories behind these ingredients, adding an educational aspect to this part. Users can then return home to begin the second part. In the second part, people help Carl “cook” the meal. This is in the form of a game where users have to catch these ingredients in a pan to reach the final score. However, after each time an ingredient is caught in the pan, they begin to fall faster, making it more difficult as time passes. Once thirty ingredients have been caught, the meal is done, and Carla is very happy! Thanks for helping Carl make the meal!
/*15-104 final projec
team members: rachel park (rsp1) and hamza qureshi (hqq)
section: b; e
CARL COOKS A MEAL*/
var button1, button2, button3, button4, button5; //these variables create buttons, which are defined
//locally to avoid having to create dozens of em
var home, meetCarl, where2go, worldMap, fridge, //these variables will hold the images that form each slide
turmeric, miso, acai, foieGras, uSure,
startup;
var col; //sets color
//---------------------------------------------------
function setup() {
createCanvas(480,480);
background(0);
noLoop(); //allows the slides to remain static (prevents flickering!)
}
//---------------------------------------------------
function draw() { //will only comment once in detail because it can get redundant
home = createImg("https://i.imgur.com/aI9WG89.jpg"); //creates slide
home.position(-760,-760); //position and scales are used to fit the images on the canvas
home.style("transform", "scale(0.25)");
button1 = createButton('Play Game!'); //creates a button
button1.position(300,200);
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.mousePressed(PromptPage); //allows the button to load the next screen
}
//---------------------------------------------------
//functions for each page
function PromptPage() {
//prompts with info on what to do
meetCarl = createImg("https://i.imgur.com/HAX6uEa.jpg");
meetCarl.position(-760, -760);
meetCarl.style("transform", "scale(0.25)");
button1 = createButton('Help me out →');
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.position(350,200);
button1.mousePressed(ScenePage);
}
//---------------------------------------------------
function ScenePage() {
//loads scene where users have option of gathering ingredients
where2go = createImg("https://i.imgur.com/7F5M1iF.jpg");
where2go.position(-760,-760);
where2go.style("transform", "scale(0.25)");
button1 = createButton('Open the fridge');
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.position(20,220);
button1.mousePressed(FridgeFoodPage);
button2 = createButton('Take a trip');
col = color(129,178,154);
button2.style("background-color", col);
button2.style("color", "white");
button2.position(140,460);
button2.mousePressed(WorldFoodPage);
button3 = createButton('Time to cook!');
col = color(129,178,154);
button3.style("background-color", col);
button3.style("color", "white");
button3.position(300,180);
button3.mousePressed(gameLandingPage);
}
//---------------------------------------------------
function WorldFoodPage() {
//loads international map screen, with buttons for diff locations
worldMap = createImg("https://i.imgur.com/aNsxfi1.jpg");
worldMap.position(-760,-760);
worldMap.style("transform", "scale(0.25)");
button1 = createButton('Brazil');
button1.style("background-color", col);
button1.style("color", "white");
button1.position(130,230);
button1.mousePressed(brazil);
button2 = createButton('France');
button2.style("background-color", col);
button2.style("color", "white");
button2.position(150,80);
button2.mousePressed(france);
button3 = createButton('India');
button3.style("background-color", col);
button3.style("color", "white");
button3.position(320,160);
button3.mousePressed(india);
button4 = createButton('Japan');
button4.style("background-color", col);
button4.style("color", "white");
button4.position(420,120);
button4.mousePressed(japan);
button5 = createButton('Go back home!');
button5.style("background-color", col);
button5.style("color", "white");
button5.position(190,450);
button5.mousePressed(ScenePage);
}
//---------------------------------------------------
function FridgeFoodPage() {
//loads fridge screen with items available in the fridge
fridge = createImg("https://i.imgur.com/jPanqPC.jpg");
fridge.position(-760,-760);
fridge.style("transform", "scale(0.25)");
button1 = createButton('Grab the items!');
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.position(320,220);
button1.mousePressed(FridgeGrab);
button2 = createButton('No thanks!');
col = color(129,178,154);
button2.style("background-color", col);
button2.style("color", "white");
button2.position(320,260);
button2.mousePressed(ScenePage);
}
//---------------------------------------------------
function FridgeGrab(){
//simulates "grabbing" items from the fridge
fridge = createImg("https://i.imgur.com/zlj1DaE.jpg");
fridge.position(-760,-760);
fridge.style("transform", "scale(0.25)");
button1 = createButton('Back to the kitchen!');
col = color(129,178,154);
button1.style("background-color", col);
button1.style("color", "white");
button1.position(320,220);
button1.mousePressed(ScenePage);
}
//---------------------------------------------------
function india() {
//loads turmeric screen
turmeric = createImg("https://i.imgur.com/tj04pYa.jpg")
turmeric.position(-760,-760);
turmeric.style("transform", "scale(0.25)");
countryButtons();
}
//---------------------------------------------------
function japan(){
//loads miso screen
miso = createImg("https://i.imgur.com/A0mow9a.jpg")
miso.position(-760,-760);
miso.style("transform", "scale(0.25)");
countryButtons();
}
//---------------------------------------------------
function france(){
//loads france screen
foieGras = createImg("https://i.imgur.com/4OLHPzQ.jpg")
foieGras.position(-760,-760);
foieGras.style("transform", "scale(0.25)");
countryButtons();
}
//---------------------------------------------------
function brazil(){
//loads brazil screen
acai = createImg("https://i.imgur.com/H4gDOUD.jpg")
acai.position(-760,-760);
acai.style("transform", "scale(0.25)");
countryButtons();
}
//---------------------------------------------------
function countryButtons(){
//creates two sets of buttons on country screen to
//allow for less code to be used in each of the country slides.
button1 = createButton('Take home!');
button1.style("transform", "scale(0.8)");
button1.style("background-color", col);
button1.style("color", "white");
button1.position(170,310);
button1.mousePressed(WorldFoodPage);
button2 = createButton('All done!');
button2.style("transform", "scale(0.8)");
button2.style("background-color", col);
button2.style("color", "white");
button2.position(178, 370);
button2.mousePressed(gameLandingPage);
}
//---------------------------------------------------
function gameLandingPage(){
//makes sure the user is ready (lol)
uSure = createImg("https://i.imgur.com/9RFTHko.jpg");
uSure.position(-760,-760);
uSure.style("transform", "scale(0.25)");
button1 = createButton('Yes, I am ready!');
button1.style("background-color", col);
button1.style("color", "white");
button1.position(190,250);
button1.mousePressed(gameStartScreen);
button2 = createButton('No, not yet!');
button2.style("background-color", col);
button2.style("color", "white");
button2.position(200, 300);
button2.mousePressed(ScenePage);
}
//---------------------------------------------------
function gameStartScreen(){
//loads final screen of this part, instructing users to scroll
startup = createImg("https://i.imgur.com/duuVdOZ.jpg");
startup.position(-760,-760);
startup.style("transform", "scale(0.25)");
}
//---------------------------------------------------
/*15-104 final project
team members: rachel park (rsp1) and hamza qureshi (hqq)
section: b; e
CARL COOKS A MEAL*/
//setting global variables to use throughout the code
//for score
var score = 0;
//for falling objects
var speed = 10;
var canHit = true;
var x = 0;
var y = 0;
var s = 5;
//for key functions
var keyRIGHT= false;
var keyLEFT= false;
var moveRight = false;
var moveLeft = false;
//for frypan options
var onBasket = false;
//setting modes to use to run the functions
var beforeGame;
var endGame;
var beginning;
var ending;
//for arrays used in code
var fridge = [];
var ixs = [50,-50,350];
var iys = [-500, 0, -1000];
//to load frypan image
var frypan;
//---------------------------------------------------
//preloading images of foods and pushing into new array
function preload() {
var Foods = [
"https://i.imgur.com/WrAqBJF.png",
"https://i.imgur.com/F6VoqQ8.png",
"https://i.imgur.com/6Piz1HF.png",
"https://i.imgur.com/Qltr0uK.png"];
for (var i = 0; i < Foods.length; i++){
fridge.push(loadImage(Foods[i]));
}
}
//---------------------------------------------------
//setting up canvas and using modes
function setup () {
createCanvas(480, 480);
background(129,178,154);
beforeGame = true;
endGame = false;
frypan = loadImage("https://i.imgur.com/UdaokKr.png");
ending = loadImage("https://i.imgur.com/0EdDOXJ.jpg");
beginning = loadImage("https://i.imgur.com/crhULDP.jpg");
}
//---------------------------------------------------
//function to start game when any key is pressed
function keyPressed() {
beforeGame = false;
}
//---------------------------------------------------
//function to make frypan move as a gathering platform
function keyTyped() {
if (keyCode === LEFT_ARROW) {
keyLEFT = true;
} else if (keyCode === RIGHT_ARROW) {
keyRIGHT = true;
}
}
//---------------------------------------------------
//drawing the game by calling the other functions which make the visuals of the objects
function draw() {
if (beforeGame == true) {
push();
scale(0.24);
imageMode(CORNER);
image(beginning,0,0);
pop();
} else {
background(129,178,154);
BasketDraw();//drawing the frypan
foodDraw();//drawing the falling food objects
update();//updating the so that frypan moves with keys and food continuously falls onto canvas
displayScore();//displaying number of foods caught
}
if (endGame == true) {//displaying ending page when game is finished
push();
scale(0.24);
imageMode(CORNER);
image(ending,0,0);
pop();
}
}
//---------------------------------------------------
function reachBottom() {//ending the game when food hits limit
endGame = true;
}
//---------------------------------------------------
function displayScore() {//function to create the score
fill(0);
textSize(20);
text(("Score: " + this.score + " out of 30!"), 80, 23);
}
//--------------------------------------------------
function makeFood(length, xpos, ypos, space) {//class to draw the food objects
var food = {"l": length, "ix": xpos, "iy": ypos, "s": space}
food.draw = foodDraw;
return food;
}
//--------------------------------------------------
function foodDraw() {//drawing the foods
for (var i = 0; i < ixs.length; i++){
imageMode(CORNER);
canHit = true;
fill(255);
stroke(4);
image(fridge[i], this.ixs[i], this.iys[i]);
}
for (var i = 0; i < iys.length; i++) {
this.iys[i] += this.s/2
}
}
//---------------------------------------------------
function makeBasket(xpos,ypos,moveBasket) {//class to make the frypan (aka basket)
var Basket = {"x": xpos, "y": ypos}
Basket.draw = BasketDraw;
return Basket;
}
//---------------------------------------------------
function BasketDraw() {//drawing the basket
noStroke();
fill("#FFD581");
image(frypan,this.x, this.y + height-50);
}
//---------------------------------------------------
function update() {//function to update the objects and have them restart at top to be continuously moving
//for basket
if(keyIsDown(RIGHT_ARROW) & this.x < width-20){
this.x += speed;
print(x);
}
if (keyIsDown(LEFT_ARROW) & this.x > -20){
this.x -= speed;
print(x);
}
print(width)
//for food
for(var i = 0; i < iys.length; i++){
if (this.iys[i] >= height-80) {
if(this.ixs[i] > this.x - 100 & this.ixs[i] < this.x + 100) {
this.score++;
this.s ++;
if( this.score == 30) {
reachBottom();
}
}
this.iys[i] = random(-1000, -300);
this.ixs[i] = random(-300 ,width-40);
}
}
}
//---------------------------------------------------
As one might expect with almost 400 lines of code, there were a couple of roadblocks on the way. The biggest one was probably the marrying of the two parts to create one code, which we weren’t able to do. This is primarily because the first part uses the DOC library via buttons and commands like createImg, while the second part relies solely on p5. This caused difficulties in combining the two sets of code because they required a change in the HTML template to allow them to be combined. Once we were able to, the code wasn’t running as smoothly as we had intended. However, despite dividing them into these two parts, we were able to successfully create a unified game experience that uses two modes to reach a greater goal. For us, that’s a win! 🙂