//Charmaine Qiu
//Section E
//charmaiq@andrew.cmu.edu
//Final project
//Array of links for icecream images
var iceLinks = [
"https://i.imgur.com/RQVGPb3.png",
"https://i.imgur.com/3NURceZ.png",
"https://i.imgur.com/gk7Jbfc.png",
"https://i.imgur.com/KzfjvaF.png",
"https://i.imgur.com/RyVDAlq.png",
"https://i.imgur.com/OoltZSF.png",
"https://i.imgur.com/DLpHcUh.png",
"https://i.imgur.com/Jd0Hx3a.png",
"https://i.imgur.com/G4zwiYV.png"]
//initialize index and empty array
var iceindex = 0;
var ice = [];
//set dragging for each decorationa as false
var bdragging = false;
var kdragging = false;
var sdragging = false;
var chdragging = false;
var fdragging = false;
var codragging = false;
var finishgame = false;
//set initial coordinate values for the decorations
var bx = 460;
var by = 60;
var kx = 540;
var ky = 100;
var sx = 490;
var sy = 140;
var chx = 160;
var chy = 50;
var fx = 160;
var fy = 125;
var cox = 80;
var coy = 100;
//initiallize offset values
var offsetX;
var offsetY;
var offsetX2;
var offsetY2;
var offsetX3;
var offsetY3;
var offsetX4;
var offsetY4;
var offsetX5;
var offsetY5;
var offsetX6;
var offsetY6;
function preload(){
//preload the icecream images and store them into the arrays
for (var i = 0; i < iceLinks.length; i++){
//store the index from the links to the new arrays
ice[i] = loadImage(iceLinks[i]);
}
//preload the images for decorations
blueberry = loadImage("https://i.imgur.com/BbD4FQd.png");
kiwi = loadImage("https://i.imgur.com/pwxFml9.png");
strawberry = loadImage("https://i.imgur.com/qwPbN2l.png");
cookie = loadImage("https://i.imgur.com/Eo3TG0F.png");
cherry = loadImage("https://i.imgur.com/FI8MUOH.png");
flower = loadImage("https://i.imgur.com/PDusCa3.png");
star = loadImage("https://i.imgur.com/09DBgK0.png");
}
function setup() {
createCanvas(600, 600);
}
function draw() {
background(255, 217, 214);
ellipse(width/2, height, 280, 250);
//draw table
drawCurtain();
//draw the text for instructions
fill(255);
text("Drag to decorate", 240, 90);
text("Click to change a flavor", 210, 120);
//draw the icream base
imageMode(CENTER);
image(ice[iceindex], width / 2, 375);
//draw image of decorations
image(blueberry, bx, by);
image(kiwi, kx, ky);
image(strawberry, sx, sy);
image(cookie, cox, coy);
image(cherry, chx, chy);
image(flower, fx, fy);
//when the decoration is being dragged, apply offset values
if (bdragging){
bx = mouseX + offsetX;
by = mouseY + offsetY;
}
if(kdragging){
kx = mouseX + offsetX2;
ky = mouseY + offsetY2;
}
if(sdragging){
sx = mouseX + offsetX3;
sy = mouseY + offsetY3;
}
if(chdragging){
chx = mouseX + offsetX4;
chy = mouseY + offsetY4;
}
if(fdragging){
fx = mouseX + offsetX5;
fy = mouseY + offsetY5;
}
if(codragging){
cox = mouseX + offsetX6;
coy = mouseY + offsetY6;
}
//draw the buttons for finish and reset
fill(255);
noStroke();
ellipse(80, 500, 100, 40);
ellipse(80, 550, 100, 40);
fill(217, 118, 115);
textSize(20);
text("Finish!", 52, 506);
text("Reset", 52, 556);
//when the game is finished, draw shape that displays the icecream
if(finishgame){
finishGame();
}
}
function mousePressed(){
//when the mouse is pressed on the icecream
if(mouseY > 250 & mouseX > 180 && mouseX < 420) {
//set the current ice equal to current index
var currentIce = iceindex;
while(currentIce === iceindex){
//randomnize the next image
iceindex = floor(random(0, 8));
}
}
//when the mouse is pressed on each decoration, dragging becomes true and
//offset values are applied
if(mouseX > bx - 21 & mouseX < bx + 21 && mouseY > by - 17 && mouseY < by + 17){
bdragging = true;
offsetX = bx - mouseX;
offsetY = by - mouseY;
}
if(mouseX > kx - 28 & mouseX < kx + 28 && mouseY > ky - 27 && mouseY < ky + 27){
kdragging = true;
offsetX2 = kx - mouseX;
offsetY2 = ky - mouseY;
}
if(mouseX > sx - 32 & mouseX < sx + 32 && mouseY > sy - 40 && mouseY < sy + 40){
sdragging = true;
offsetX3 = sx - mouseX;
offsetY3 = sy - mouseY;
}
if(mouseX > chx - 26 & mouseX < chx + 26 && mouseY > chy - 34 && mouseY < chy + 34){
chdragging = true;
offsetX4 = chx - mouseX;
offsetY4 = chy - mouseY;
}
if(mouseX > fx - 22 & mouseX < fx + 22 && mouseY > fy - 29 && mouseY < fy + 29){
fdragging = true;
offsetX5 = fx - mouseX;
offsetY5 = fy - mouseY;
}
if(mouseX > cox - 49 & mouseX < cox + 49 && mouseY > coy - 86 && mouseY < coy + 86){
codragging = true;
offsetX6 = cox - mouseX;
offsetY6 = coy - mouseY;
}
//when the finish button is pressed, the icecream is displayed
if(mouseX > 30 & mouseX < 130 && mouseY > 480 && mouseY < 520){
finishgame = true;
finishGame();
}
//reset the game when button is pressed
reset();
}
function mouseReleased(){
//when the mouse is released, dragging is nolonger happening
bdragging = false;
kdragging = false;
sdragging = false;
chdragging = false;
codragging = false;
fdragging = false;
}
function reset(){
//set cordinates to initial values when the reset button is pressed
if(mouseX > 30 & mouseX < 130 && mouseY > 530 && mouseY < 570){
bx = 460;
by = 60;
kx = 540;
ky = 100;
sx = 490;
sy = 140;
chx = 160;
chy = 50;
fx = 160;
fy = 125;
cox = 80;
coy = 100;
finishgame = false;
}
}
function drawCurtain(){
//when game is not finished, display the curtains
if (!finishgame){
ellipseMode(CENTER);
fill(217, 118, 115);
rect(0 ,0, width, 190);
for(var i = 25; i < width; i+= 50){
fill(217, 118, 115);
ellipse(i, 190, 50, 50);
}
}
}
function finishGame(){
//creates shape that covers the background to display ice
fill(255, 217, 214);
beginShape();
vertex(0, 0);
vertex(0, 525);
vertex(158, 525);
vertex(158, 150);
vertex(440, 150);
vertex(440, 600);
vertex(600, 600);
vertex(600, 0);
vertex(0, 0);
endShape();
//draws the text Enjoy
fill(217, 118, 115);
text("Enjoy~", 280, 140);
//displays stars
frameRate(8);
starX = random(width);
starY = random(height);
starX2 = random(width);
starY2 = random(height);
image(star, starX, starY);
image(star, starX2, starY2);
}
For my final project, I created an ice-cream decoration game inspired by cooking games that I play as a child. The game allows users to drag around and place the decorations on top of the ice-cream, which changes flavors when being pressed. This project encourage me to create my own illustrations and incorporated them to my code to create a game. I had fun figuring out the interactions the players can explore on the canvas.