Charmaine Qiu – Final Project

sketch

//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.