xxxxxxxxxx
374
// Establishing game variables
let game;
// Establishing variables to store images and audio
let ingredientImages = {};
let dishImages = {};
let font;
let shelfImage;
let titleImage;
let menuImage;
let recipeImage;
let honeySaltFont;
let ovenImages = [];
let finalImage;
let bgMusic;
let tickingSound;
// Buttons for dish selection
let buttons = [];
function preload() {
// Loading custom fonts
honeySaltFont = loadFont("assets/Honey Salt.otf");
font = loadFont("assets/Goldfish.ttf");
shelfImage = loadImage("assets/shelf.png");
titleImage = loadImage("assets/title.png");
menuImage = loadImage("assets/menu.png");
recipeImage = loadImage("assets/recipe.png");
ovenImages[0] = loadImage("assets/oven1.png");
ovenImages[1] = loadImage("assets/oven2.png");
ovenImages[2] = loadImage("assets/oven3.png");
finalImage = loadImage("assets/final.png");
bgMusic = loadSound("assets/background.mp3");
tickingSound = loadSound("assets/ticking.mp3");
// Load ingredient images
ingredientImages["Flour"] = loadImage("assets/flour.png");
ingredientImages["Sugar"] = loadImage("assets/sugar.png");
ingredientImages["Eggs"] = loadImage("assets/eggs.png");
ingredientImages["Milk"] = loadImage("assets/milk.png");
ingredientImages["Butter"] = loadImage("assets/butter.png");
ingredientImages["Chocolate"] = loadImage("assets/chocolate.png");
ingredientImages["Baking Powder"] = loadImage("assets/baking powder.png");
ingredientImages["Vanilla"] = loadImage("assets/vanilla.png");
ingredientImages["Salt"] = loadImage("assets/salt.png");
ingredientImages["Honey"] = loadImage("assets/honey.png");
ingredientImages["Yeast"] = loadImage("assets/yeast.png");
ingredientImages["Apples"] = loadImage("assets/apples.png");
// Load dish images
dishImages["Brownie"] = loadImage("assets/brownie.png");
dishImages["Cupcake"] = loadImage("assets/cupcake.png");
dishImages["Pie"] = loadImage("assets/pie.png");
}
// Creating a button class to select the recipes
class Button {
constructor(label, x, y, w, h, callback) {
this.label = label;
this.x = x;
this.y = y;
this.w = w;
this.h = h;
this.callback = callback;
}
display() {
// Drawing the buttons, its color, and setting its dimensions
fill("#BDE0FE");
stroke(0);
strokeWeight(2);
rect(this.x, this.y, this.w, this.h, 10);
fill("#332211");
noStroke();
textSize(38);
textAlign(CENTER, CENTER);
textFont(font);
text(this.label, this.x + this.w / 2, this.y + this.h / 2);
}
checkClick(px, py) {
// Ensuring button works when clicked on and not outside of bounds
return (
px > this.x && px < this.x + this.w && py > this.y && py < this.y + this.h
);
}
}
// Creating a class of Ingredients
class Ingredient {
constructor(x, y, name) {
this.x = x;
this.y = y;
this.size = 100;
this.selected = false; // Ensuring that the selection can be undone
this.name = name;
}
display() {
// Will only display the ingredients in the Selection stage
if (game.state === "selection") {
let img = ingredientImages[this.name];
if (img) {
image(img, this.x - img.width / 2, this.y - img.height / 2);
}
if (this.selected) {
// Displays a circle when the ingredient is selected
noFill();
stroke(0);
strokeWeight(2);
ellipse(this.x, this.y, this.size + 20, this.size + 20);
}
}
}
select() {
if (!this.selected) {
this.selected = true;
game.selectedIngredients.push(this.name); // Add to selectedIngredients array when selected
}
}
deselect() {
this.selected = false; // Makes the selection false if the user clicks the ingredient again
let index = game.selectedIngredients.indexOf(this.name);
if (index !== -1) {
game.selectedIngredients.splice(index, 1); // Remove from selectedIngredients if deselected
}
}
checkClick(px, py) {
return (
px > this.x - this.size / 2 &&
px < this.x + this.size / 2 &&
py > this.y - this.size / 2 &&
py < this.y + this.size / 2
);
}
}
class Game {
// Creating a game class to store the game stages
constructor() {
this.state = "start";
this.selectedDish = null;
this.correctIngredients = [];
this.selectedIngredients = [];
this.allIngredients = this.generateIngredients();
this.memoryTimer = 0;
this.bakingTimer = 0;
this.selectionTimer = 0;
}
generateIngredients() {
let ingredients = [];
// Displaying the ingredients on the shelf
let cols = 4;
let rows = 3;
let spacing = 200;
let ingredientNames = Object.keys(ingredientImages);
for (let i = 0; i < cols * rows; i++) {
let x = 150 + (i % cols) * spacing;
let y = 200 + Math.floor(i / cols) * spacing; // Standard y position calculation
let name = ingredientNames[i % ingredientNames.length];
// Adjusting The position within the shelf
if (name === "Eggs") {
y += 30;
} else if (name === "Butter") {
y += 30;
} else if (name === "Chocolate") {
y += 30;
} else if (name === "Baking Powder") {
y -= 15;
} else if (name === "Vanilla") {
y -= 15;
} else if (name === "Salt") {
y -= 20;
} else if (name === "Honey") {
y -= 15;
} else if (name === "Yeast") {
y -= 20;
} else if (name === "Apples") {
y += 30;
}
ingredients.push(new Ingredient(x, y, name));
}
return ingredients;
}
display() {
background(255); // Set background to white
if (this.state === "selection") {
image(shelfImage, 0, 0, width, height); // Display shelf as background
}
textAlign(CENTER, CENTER);
textFont(font);
this.allIngredients.forEach((ingredient) => ingredient.display());
stroke(0);
strokeWeight(1);
fill(0);
if (this.state === "start") {
image(titleImage, 0, 0, width, height); // Display title screen background image
textSize(48);
text("Sweet Treats Bakery", width / 2, height / 2 - 50); // Title Text
textSize(32);
text("Click to Start", width / 2, height / 2 + 50); // Subtitle Text
} else if (this.state === "menu") {
image(menuImage, 0, 0, width, height); // Display menu screen background image
fill("#332211");
textSize(64);
text("MENU", width / 2, 100);
buttons.forEach((button) => button.display());
} else if (this.state === "memory") {
image(recipeImage, 0, 0, width, height); // Display recipe image as background
textSize(32);
text("Memorize These Ingredients!", width / 2, 80);
textFont(honeySaltFont);
textSize(35);
this.correctIngredients.forEach((ing, i) =>
text(ing, width / 2, 300 + i * 50)
);
if (millis() - this.memoryTimer > 3000) {
this.state = "selection";
this.selectionTimer = millis();
}
} else if (this.state === "selection") {
textSize(32);
text("Select the Ingredients!", width / 2, 50);
textSize(24);
text(
`Time left: ${Math.max(
0,
5 - floor((millis() - this.selectionTimer) / 1000)
)}s`,
width / 2,
110
);
if (millis() - this.selectionTimer > 5000) {
this.state = "baking";
this.bakingTimer = millis();
}
} else if (this.state === "baking") {
let elapsedTime = millis() - this.bakingTimer;
let index = floor(elapsedTime / 1500); // Change image every 1.5 seconds
index = min(index, 2);
// Play ticking sound only when baking starts
if (!tickingSound.isPlaying()) {
tickingSound.loop();
tickingSound.setVolume(0.8);
}
// Display the oven images
image(ovenImages[index], 0, 0, width, height);
textSize(32);
fill("#332211");
text("Baking...", width / 2, height / 2);
// Stop ticking and move to result after 4.5 seconds
if (elapsedTime > 4500) {
this.state = "result";
tickingSound.stop();
}
} else if (this.state === "result") {
image(finalImage, 0, 0, width, height); // Display title screen background image
textSize(40);
if (this.checkWin()) {
text(`Your ${this.selectedDish} is now ready!`, width / 2, 200);
image(
dishImages[this.selectedDish],
width / 2 - dishImages[this.selectedDish].width / 2,
300
);
} else {
text("Oh no! Those were the wrong ingredients.", width / 2, height / 2);
}
textSize(20);
text("Click to Play Again", width / 2, height / 2 + 250);
}
}
handleClick() {
if (this.state === "start") {
this.state = "menu";
} else if (this.state === "menu") {
buttons.forEach((button) => {
if (button.checkClick(mouseX, mouseY)) {
this.selectedDish = button.label;
this.correctIngredients = {
// Storing the correct ingredients of the recipes
Brownie: [
"Flour",
"Sugar",
"Eggs",
"Butter",
"Baking Powder",
"Chocolate",
],
Cupcake: ["Flour", "Eggs", "Sugar", "Milk", "Vanilla"],
Pie: ["Flour", "Sugar", "Eggs", "Butter", "Apples"],
}[this.selectedDish];
this.memoryTimer = millis();
this.state = "memory";
}
});
} else if (this.state === "selection") {
this.allIngredients.forEach((ingredient) => {
if (ingredient.checkClick(mouseX, mouseY)) {
ingredient.select();
}
});
} else if (this.state === "result") {
this.resetGame();
}
}
resetGame() {
this.state = "menu";
this.selectedIngredients = [];
this.allIngredients.forEach((ingredient) => ingredient.deselect()); // Deselect all ingredients
}
checkWin() {
return (
this.selectedIngredients.length === this.correctIngredients.length &&
this.selectedIngredients.every((ing) =>
this.correctIngredients.includes(ing)
)
);
}
}
function setup() {
createCanvas(1000, 800);
game = new Game();
buttons = []; // Reset buttons to avoid duplicates
// Creating buttons with static positions
buttons.push(new Button("Brownie", 400, 200, 200, 100, () => {}));
buttons.push(new Button("Cupcake", 400, 350, 200, 100, () => {}));
buttons.push(new Button("Pie", 400, 500, 200, 100, () => {}));
if (!bgMusic.isPlaying()) {
bgMusic.loop(); // Play music in a loop
bgMusic.setVolume(0.5);
console.log(buttons);
}
}
function draw() {
game.display();
}
function mousePressed() {
game.handleClick();
}