Concept:
For my final project in “Introduction to Computer Science,” I spent nearly two weeks brainstorming ideas before deciding between two games: “Crack the Egg” (a new game) and “BrickBreaker,” which I used to play on my father’s BlackBerry phone. I ultimately chose to make “BrickBreaker,” but promised myself that I would someday create “Crack the Egg” as well. When I learned about the opportunity to make a game for “Introduction to Interactive Media,” I knew immediately that I wanted to create “Crack the Egg.” The inspiration for this game came from another childhood game I used to play called Piano Tiles.
In “Crack the Egg,” the player takes on the role of a worker in a factory that heavily relies on eggs for production. The worker’s job is to stand next to three conveyor belts and manually inspect the eggs to ensure quality. There are three types of eggs in the game: “normal,” “somewhat bad,” and “rotten.” The player must avoid cracking the “normal” eggs while single tapping to crack the “somewhat bad” eggs and double tapping to crack the “rotten” eggs. As the game progresses, the conveyor belts will increase in speed, making it increasingly difficult for the player to inspect the eggs. Every “normal” egg that passes through uncracked adds to the player’s score. However, if the player cracks a “normal” egg or fails to crack a “bad” or “rotten” egg, they will lose one of their three lives. The player will tap the eggs using their mouse.
Code & Progress:
Once I had determined the game I wanted to create and the functionalities it required, I established a task sequence. First, I had to design a start page for the game, then develop a “Game” class and integrate the start page. I, then planned on adding interactive buttons and verifying their functionality. Next, I wanted to progress to the conveyer belt and the “Egg” class, and finally incorporating them into the “Game” class. Currently, I have constructed the background, launched the game class, and implemented a few initial features for user interactivity. While I have created placeholders for some items, such as buttons, I have verified that they all operate correctly. The progress looks somewhat like this as of now:
//game class will contain everything from user interactivity to the score keeping and life lost etc. Will (probably) be the super class to the egg class
class Game
{
constructor()
{
//canvas dimensions
this.canvas_width = 300;
this.canvas_height = 600;
//start button on menu - coordinates
this.start_button_x = this.canvas_width/6;
this.start_button_y = 4.5 * (this.canvas_height/6);
//instruction button on menu - coordinates
this.instruction_button_x = this.canvas_width/6;
this.instruction_button_y = 5* (this.canvas_height/6);
//dimensions for the start and instruction buttons to be used for mouseClicked interactivity
this.button_width = 2*300/3;
this.button_height = 30;
this.button_arc = 20;
this.score = 0; //will keep the score of all the good eggs that have successfully passed
this.player_lives = 3; //will keep track of the lives for the player and will be displayes as well
this.speed = 10; //will control the speed with which
this.egg_array = []; //this array will contains objects of egg class using new Egg() and the .push method
//controls what is shown to the user at a given time
this.menu_screen = true;
this.start_screen = false;
this.instruction_screen = false;
//will be removed for the start window but will stay for instructions window
this.back_button_x = 10;
this.back_button_y = 10;
this.back_button_width = 75;
this.back_button_height = 50;
}
//displays different types of screens to the user
screenDisplay()
{
if (this.menu_screen == true)
{
image(startmenu_display_picture, 0,0);
fill("#541675");
noStroke();
//boxes for the start and instruction buttons
rect(this.start_button_x, this.start_button_y, this.button_width, this.button_height, this.button_arc);
rect(this.instruction_button_x, this.instruction_button_y, this.button_width, this.button_height, this.button_arc);
//if the mouse hovers over the start button
if (mouseX >= this.start_button_x && mouseX <= this.start_button_x + this.button_width && mouseY >= this.start_button_y && mouseY <= this.start_button_y + this.button_height)
{
fill("green"); //turn the text green
}
else
{
fill("gold"); //otherwise the text will be gold
}
//write START in the button
textSize(20);
text("START", this.start_button_x + ((this.button_width)/3), this.start_button_y + (this.button_height/1.3));
//mouse hovering feature for the instruction button
if (mouseX >= this.instruction_button_x && mouseX <= this.instruction_button_x + this.button_width && mouseY >= this.instruction_button_y && mouseY <= this.instruction_button_y + this.button_height)
{
fill("green");
}
else
{
fill("gold");
}
text("INSTRUCTIONS", this.instruction_button_x + ((this.button_width)/8), this.instruction_button_y + (this.button_height/1.3));
}
//if the start button is clicked
else if (this.start_screen == true)
{
//change the background and show under construction text but will call other functions when game is implemented
background("gold");
textSize(18);
fill(255, 255, 255);
text("UNDER CONSTRUCTION", this.canvas_width/6.5, this.canvas_height/2);
//place holder for the back button that will be used to come back to the menu screen but will probably be removed in the start screen
back_button.resize(this.back_button_width, this.back_button_height); //resize image to fit the screen size
image(back_button, this.back_button_x, this.back_button_y);
}
//if the instruction button is clicked then this if statement would run to show the instruction screen
else if (this.instruction_screen == true)
{
//changes background for now but is basically a placeholder for an image with all the instructions
background("gold");
textSize(18);
fill(255, 255, 255);
text("UNDER CONSTRUCTION", this.canvas_width/6.5, this.canvas_height/2);
//placeholder for back button. Image is resized to fit the desired dimensions. the picture will change for a better/formal picture of the back button
back_button.resize(this.back_button_width, this.back_button_height);
image(back_button, this.back_button_x, this.back_button_y);
}
}
}
This is all that I could have done without first creating an “Egg” class. Creating an “Egg” class will ensure that the eggs move from bottom of the canvas to the top on the three conveyer belts, change color/get cracked when tapped, and respawn at the bottom of the canvas. Apart from this, the restart button after game ends and the audios for game background and egg cracking will also be added.
Challenging Parts:
Incorporating the “Egg” class into the “Game” class is proving to be a significant challenge for me. While I am aware that I must use an array in the “Game” class to store the objects of the “Egg” class, I am struggling with egg positioning. I am uncertain how to create a loop for the eggs to appear one after the other without overlapping each other. I aim to ensure that the distance between each egg is identical. Additionally, I am unclear on how the eggs that move beyond the canvas will return to their starting position behind the canvas and at what y-coordinate. Similarly, my concerns apply to the dividers I wish to employ between the conveyer belts, as they will also loop around. I am hopeful that if I can solve one problem, the solution may help me with the other. At present, I am narrowing my focus to resolving the issue with the eggs alone. Instead of three conveyer belts, I will use one conveyer belt (one array) and see if I can find a solution for one belt first. Finding it for one belt will help solve it for the other two belts and the dividers. I plan to devote two days to this issue, and if I cannot find a solution, I will turn to Youtube tutorials for guidance and inspiration.