​

let backgroundImage;

​

//creating the arrays of images for each piece of furniture and diaglogue bubble and starting the current image from first position.

let sofas = []; 

let currentSofa = 0;

​

let leftDecors = [];

let currentLeftDecor = 0;

​

let rightDecors = [];

let currentRightDecor = 0;

​

let lamps = [];

let currentLamp = 0;

​

let bubbles = [];

let currentBubble = 0;

​

let paymentStopped = false;

let randomPayment = 0;

​

//loading all the images and sounds before setup runs

function preload() {

  clicking = loadSound("sounds/clicking.mp3"); 

  piano = loadSound("sounds/piano.mp3");

  backgroundImage = loadImage("images/room.png");

  instructionsImage = loadImage("images/begin_new.gif");

  paymentImage = loadImage("images/end_new.gif"); 

  characterImage = loadImage("images/character.png");

// Loading images of each piece of furniture to an array of that piece of furniture

  sofas[0] = loadImage("images/sofa_0.png");

  sofas[1] = loadImage("images/sofa_1.png");

  sofas[2] = loadImage("images/sofa_2.png");

  sofas[3] = loadImage("images/sofa_3.png");

  sofas[4] = loadImage("images/sofa_4.png");

  sofas[5] = loadImage("images/sofa_5.png");

​

  leftDecors[0] = loadImage("images/leftDecor_0.png");

  leftDecors[1] = loadImage("images/leftDecor_1.png");

  leftDecors[2] = loadImage("images/leftDecor_2.png");

  leftDecors[3] = loadImage("images/leftDecor_3.png");

  leftDecors[4] = loadImage("images/leftDecor_4.png");

  leftDecors[5] = loadImage("images/leftDecor_5.png");

​

  rightDecors[0] = loadImage("images/rightDecor_0.png");

  rightDecors[1] = loadImage("images/rightDecor_1.png");

  rightDecors[2] = loadImage("images/rightDecor_2.png");

  rightDecors[3] = loadImage("images/rightDecor_3.png");

  rightDecors[4] = loadImage("images/rightDecor_4.png");

  rightDecors[5] = loadImage("images/rightDecor_5.png");

​

  lamps[0] = loadImage("images/lamp_0.png");

  lamps[1] = loadImage("images/lamp_1.png");

  lamps[2] = loadImage("images/lamp_2.png");

  lamps[3] = loadImage("images/lamp_3.png");

  lamps[4] = loadImage("images/lamp_4.png");

  lamps[5] = loadImage("images/lamp_5.png");

//loading the images of dialogue bubbles to the array of dialogue bubbles

  bubbles[0] = loadImage("images/bubble_0.png");

  bubbles[1] = loadImage("images/bubble_1.png");

  bubbles[2] = loadImage("images/bubble_2.png");

  bubbles[3] = loadImage("images/bubble_3.png");

  bubbles[4] = loadImage("images/bubble_4.png");

  bubbles[5] = loadImage("images/bubble_5.png");

}

​

function setup() {

  createCanvas(1000, 400);

  restartGame(); //game starts with the restart function

  piano.play(); //game starts with the piano music playing

}

​

function restartGame() {

  gameState = 'start'; //the game is at starting state

}

​

function draw() {

  background(220);

​

//the function is called at every state of the game

  if (gameState == 'start') {

    drawInstructions();

  } else if (gameState == 'playing') {

    drawGame();

  } else if (gameState == 'end') {

    drawEndScreen();

  }

}

​

//the actions done every time mouse clicked on certain areas

function mouseClicked() {

  clicking.play (); //every click is accompanied with clicking sound

// everything inside this conditional happens only in the playing state, which is the state inside the room

  if (gameState == 'playing') {

//if the mouse is clicked inside the area of piece of furniture, the next image is shown from the array of that piece of furniture

    if (mouseX >= width / 2 - sofas[0].width / 2 &&

        mouseX <= width / 2 - sofas[0].width / 2 + sofas[0].width &&

        mouseY >= height * 0.5 &&

        mouseY <= height * 0.5 + sofas[0].height) {

      currentSofa++;

      if (currentSofa >= sofas.length) {

        currentSofa = 0;

      }

    } else if (mouseX >= width * 0.2 &&

        mouseX <= width * 0.2 + leftDecors[0].width &&

        mouseY >= height * 0.4 &&

        mouseY <= height * 0.4 + leftDecors[0].height) {

      currentLeftDecor++;

      if (currentLeftDecor >= leftDecors.length) {

        currentLeftDecor = 0;

      }

    } else if (mouseX >= width * 0.65 &&

        mouseX <= width * 0.65 + rightDecors[0].width &&

        mouseY >= height * 0.4 &&

        mouseY <= height * 0.4 + rightDecors[0].height) {

      currentRightDecor++;

      if (currentRightDecor >= rightDecors.length) {

        currentRightDecor = 0;

      }

    } else if (mouseX >= width / 2 - lamps[0].width / 2 &&

        mouseX <= width / 2 - lamps[0].width / 2 + lamps[0].width &&

        mouseY >= 0 &&

        mouseY <= height * 0.5 + lamps[0].height) {

      currentLamp++;

      if (currentLamp >= lamps.length) {

        currentLamp = 0;

      }

//if the mouse is clicked inside the area of image of character, the next image of dialogue bubble with text is shown from the array of the bubbles

    } else if (mouseX >= width * 0.02 &&

        mouseX <= width * 0.02 + characterImage.width &&

        mouseY >= height * 0.1 &&

        mouseY <= height * 0.1 + characterImage.height) {

      currentBubble++;

      if (currentBubble >= bubbles.length) {

        currentBubble = 1;

      }

    }

  }

//one button is responsible for changing the game states. Every time the rectangle is clicked, the state of the game changes.

   if (mouseX >= width * 0.8 &&

      mouseX <= width * 0.9  &&

      mouseY >= height * 0.8 &&

      mouseY <= height * 0.9) {

    if (gameState == 'start') {

    gameState = 'playing';

    stopPayment() ; //random payment amount is generated every time the game starts

    } else if (gameState == 'playing') {

    gameState = 'end';

  } else if (gameState == 'end') {

//the design is returned back to default design of interior, which is the image in the first position of each array of images.

    currentSofa = 0;

    currentLeftDecor = 0;

    currentRightDecor = 0;

    currentLamp = 0;

    currentBubble = 0;

    restartGame();

  } 

}

    return false;

}

​

//drawing all the necessary images in the playing state.

function drawGame() {

  image(backgroundImage, 0, 0);

  image(characterImage, 20, 100);

//showing the current chosen pieces of furniture and last dialogue box 

  image(sofas[currentSofa], width/2-sofas[0].width/2, height*0.5);

  image(leftDecors[currentLeftDecor], width*0.2, height*0.4);

  image(rightDecors[currentRightDecor], width*0.65, height*0.4);

  image(lamps[currentLamp], width/2-lamps[0].width/2, 0);

  image(bubbles[currentBubble], width*0.12, height*0.01);

//"SELL" button design and size

  fill(255,162,19); // Pink color in RGB

  strokeWeight(4);

  stroke(0, 0, 139)

  rect(width * 0.8, height * 0.8, width * 0.9 - width * 0.8,  height * 0.9- height * 0.8, 20);

  noStroke();

  fill(0, 0, 139);

  textSize(20);

  textStyle(BOLD);

  text('SELL', (width * 0.8+ width * 0.9)/2 -textWidth('SELL')/2, (height * 0.9 + height * 0.8)/2 +7);

}

​

//showing the instructions image in the start state.

function drawInstructions() {

  background(255);

  image(instructionsImage, 0, 0);

//"PLAY" button design and size

  fill(255, 255, 0); 

  strokeWeight(4);

  stroke(0, 0, 139)

  rect(width * 0.8, height * 0.8, width * 0.9 - width * 0.8,  height * 0.9- height * 0.8, 20);

  noStroke();

  fill(0, 0, 139);

  textSize(20);

  textStyle(BOLD);

  text('PLAY', (width * 0.8+ width * 0.9)/2 -textWidth('PLAY')/2, (height * 0.9 + height * 0.8)/2 +7);

}

​

//function generating the random amount of payment

function stopPayment() {

  randomPayment = '$' + Math.floor(random(2000, 20001)); // Generate a random payment amount

  paymentStopped = true;

}

//showing the payment image in the end state.

function drawEndScreen() {

  image(paymentImage, 0, 0);

​

// Rectangle design for displaying the random payment amount

  fill(255, 105, 180); 

  strokeWeight(4);

  stroke(0, 0, 139);

  rect(width * 0.5, height * 0.4, width * 0.8 - width * 0.5, height * 0.6 - height * 0.4, 20);

  noStroke();

​

  if (!paymentStopped) {

    fill(0, 0, 139);

    textSize(40);

    text('Calculating...', (width * 0.8 + width * 0.5)/2 - textWidth('Calculating...')/2, (height * 0.6 + height * 0.4)/2+10); 

  } 

  // Display the random payment amount

  else {

    fill(0, 0, 139);

    textSize(40);

    text(randomPayment, (width * 0.8 + width * 0.5)/2 - textWidth(randomPayment)/2, (height * 0.6 + height * 0.4)/2+10); 

  }

​

//"RESTART" button design and size

  fill(173, 216, 230); 

  strokeWeight(4);

  stroke(0, 0, 139)

  rect(width * 0.8, height * 0.8, width * 0.9 - width * 0.8,  height * 0.9- height * 0.8, 20);

  noStroke();

  fill(0, 0, 139);

  textSize(17);

  textStyle(BOLD);

  text('RESTART', (width * 0.8+ width * 0.9)/2 -textWidth('RESTART')/2, (height * 0.9 + height * 0.8)/2 +7);

}