Why eat healthy? Because that’s the only way you can win! I was partnered up for this week’s ICM project with the lovely Becca Ricks. we agreed on the premise within minutes of talking about the project. I even convinced Becca to incorporate my favorite emoji of all time, the poo. The only thing worse than eating junk food, is eating poo! We developed the rules, found the emojis and plotted the ins and outs of the playability before we realized just how intimidating the coding would be.
Visually the game came together pretty easily. Creating a button to start was not too problematic, but it took us a little while to figure out the two game states, playing and not playing. This is a portion of the final coding that we got to work:
if (playing == false) {
background(247, 184, 177);
textSize(20);
text(“USE YOUR MOUSE TO MOVE THE MOUTH. CATCH HEALTHY FOOD TO GAIN POINTS.”, 200, 200);
fill(255);
noStroke();
rect(500, 300, 200, 100);
textSize(20);
fill(0);
text(“CLICK TO PLAY”, 520, 358);
image(pineapple, 300, 300);
image(pineapple, 800, 300);
frameRate(30);
} else {
fill(247, 184, 177);
rect(0, 0, width, height);
fill(255);
noStroke()
rect(900, 100, 200, 100);
fill(0);
textSize(20);
text(“SCORE”, 960, 140);
text(currentScore,960,170);
Creating the mouth and making it move connected to the mouse was not hard at all. The problem came when we wanted the fruit to fall at different times. We started working on this together. Becca ended up recoding a lot of the set up for the emojis while I was in class, but they weren’t falling at different times and places. She traded the code off to me when I finished class to figure out how to fix this, but I could not for the life of me figure out the “this” language of the code she had rewritten:
function Food() {
//var mouthX = 400;
this.mouthX;
this.mouthY = 400;
this.appleX;
this.appleY = 0;
this.cookieX;
this.cookieY = 0;
this.donutX;
this.donutY = 0;
this.eggplantX;
this.eggplantY = 0;
this.friesX;
this.friesY = 0;
this.grapesX;
this.grapesY = 0;
this.hamburgerX;
this.hamburgerY = 0;
this.pineappleX;
this.pineappleY = 0;
this.pizzaX;
this.pizzaY = 0;
this.pooX;
this.pooY = 0;
this.displayMouth = function() {
image(mouth, mouseX, 400);
}
this.displayApple = function() {
image(apple, this.appleX, this.appleY);
this.appleY = this.appleY + 5;
// the code continues like this for each food item.
All of the logic I spent hours on that night was correct, but I could not figure out what I was calling object-wise. I sent Becca both my code and my logic. She solved it late that night and traded it back to me. Turns out my logic was correct, but I could not quite figure out the structure for the coding language. I was DETERMINED to figure this out before moving forward.
I came into school super early and was rescued by the fabulous Dan Schiffman. Through his brilliant insight, I was able to better understand the code I was missing and move forward with the distance function to make the program know when you “eat” the food. Through much trial and error, and a little help from the residents, we made this work, but we didn’t at first have the food.appleX statement in the group of code below.
this.scoring = function() {
if (dist(food.appleX, food.appleY, mouseX +20, 420) < 40) {
var appleDist = int(dist(mouseX, 400,food.appleX, food.appleY));
var test = (currentScore = currentScore + 10);
food.appleY=0;
food.appleX = int(random(0, width));
background(255);
print(“SCOREDDD: ” + test);
}
print(currentScore);
// we did the above for all of the food objects and then reached the line of code below.
We noticed that once you ate the food, it jumped to the top at the same spot it was just falling. I finally figured out we were missing the food.appleX line to make sure it showed up in a random spot once more.
My coding was far more on point this morning. After catching that, I also figured out a way to make the screen flash white when the tongue touched the food, a way to use the noLoop( ) function to end the game and I caught a problem with the scoring. When we had the score using a single = sign, it did not work. I realized it needed an = = sign. Here is the code below.
print(“Score” + currentScore);
if (currentScore == 50) {
noLoop();
background(255);
fill(0);
textSize(70);
text(“You win!”, 440,325);
}
When you win, you see this screen below:
And more importantly, when you eat poo, you see this one:
Here is a little video of me playing the game:
And if you’d like to play it yourself, click the link!