let canvasH = 700;

​

let gameState = 'start'; // can be 'start', 'Level-1', 'playMaze', 'Level-2', 'answerQuestion', 'Level-3', 'playPuzzle', 'end'

let buttonClicked;

​

// text font

let font;

​

// sound

let jumpSound;

let keySound;

let levelCompleteSound;

let wrongChoiceSound;

let pageSound;

​

// images

let buttonImg;

let startInstuctionImage;

let level_1_img;

let charImg;

let blockImg;

let keyImg;

let reachImg;

let level_2_img;

let questionImg;

​

​

let level_3_img = [];

let level_3_imgIndex = 0;

​

​

let puzzleImg = [];

let puzzleImgIndex = 0;

​

​

let blackHatImg, whiteHatImg, greyHatImg;

let hats = [[1, 0, 1], [0, 1, 1], [0, 0, 1]]; // 1 for black, 0 for white

let randomHatSet;

let characters = 3;

​

let wrongClick;

​

​

//========================================================

// set up for the maze

// define the maze structure as a 2D array

let maze = [

  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1],

  [1, 0, 0, 1, 0, 0, 0, 0, 0, 1],

  [1, 1, 0, 1, 1, 0, 1, 1, 0, 1],

  [1, 0, 0, 0, 1, 0, 0, 0, 0, 1],

  [1, 1, 1, 0, 1, 1, 1, 1, 0, 1],

  [1, 0, 0, 0, 0, 0, 0, 0, 0, 1],

  [1, 1, 0, 1, 1, 1, 1, 1, 1, 1],

  [1, 0, 0, 0, 0, 1, 0, 0, 0, 1],

  [1, 0, 1, 1, 0, 0, 0, 1, 0, 1],

  [1, 1, 1, 1, 1, 1, 1, 1, 1, 1]

]; // 1 for a tile, 0 for the path

​

// initialize character, key, block positions, and kingdom in maze

let character = { x: 1, y: 1 };

let tileKey = { x: 6, y: 3 };

let block = { x: 2, y: 6 };

let endX = 8;

let endY = 8;

​

let tileSize;

let keyCollected = false; // flag to track whether the key is collected

let blockVisible = true; // flag to control block visibility

​

​

// Define the coordinates and dimensions of the image target area - level 2

let rectX = 379; // X-coordinate of the top-left corner of the area

let rectY = 330; // Y-coordinate of the top-left corner of the area

let rectWidth = 40; // Width of the area

let rectHeight = 35; // Height of the area

​

// make a hat color guess in the puzzle

let blackHatGuess = { x: 363, y: 492, w: 92, h: 54 };

let whiteHatGuess = { x: 251, y: 492, w: 92, h: 54 };

​

​

// button

let button = { x: (canvasW - 70), y: (canvasH - 67), w: 50, h: 47 };

​

//==================================================================

function preload() {

  // load text font

  font = loadFont('AnonymousPro-Regular.ttf');

​

  // load sounds

  jumpSound = loadSound('jump.mp3');

  keySound = loadSound('key.mp3');

  levelCompleteSound = loadSound('completed.mp3');

  wrongChoiceSound = loadSound('wrong.mp3');

  pageSound = loadSound('page.mp3');

  // load images

  buttonImg = loadImage('button.png');

  startInstuctionImage = loadImage('1.png');

  level_1_img = loadImage('2.png');

  charImg = loadImage('head.png');

  blockImg = loadImage('blockTile.png');

  reachImg = loadImage('lamp.png');

  keyImg = loadImage('key.png');

  // keyImg = createImg('key.gif');

  level_2_img = loadImage('3.png');

  questionImg = loadImage('4.png');

  level_3_img.push(loadImage('5.png'));

  level_3_img.push(loadImage('6.png'));

  puzzleImg.push(loadImage('7.png'));

  puzzleImg.push(loadImage('8.png'));

  blackHatImg = loadImage('blackHat.png');

  whiteHatImg = loadImage('whiteHat.png');

  greyHatImg = loadImage('greyHat.png');

  endImg = loadImage('9.png');

​

}

​

//==================================================================

function setup() {

  createCanvas(canvasW, canvasH);

  restartGame();

​

  tileSize = width / maze[0].length;

}

​

//==================================================================

function restartGame() {

  gameState = 'start'

  buttonClicked = false;

  // randomly choose hat set

  randomHatSet = floor(random(3));

  level_3_imgIndex = 0;

  puzzleImgIndex = 0;

  // initialize character, key, block positions, and kingdom in maze

  character = { x: 1, y: 1 };

  tileKey = { x: 6, y: 3 };

  block = { x: 2, y: 6 };

  keyCollected = false; // flag to track whether the key is collected

  blockVisible = true; // flag to control block visibility

  wrongClick = 0;

}

​

​

//==================================================================

​

function pauseAndResumeDraw() {

  noLoop(); // Stop calling draw() function

  setTimeout(function () {

    loop(); // Resume calling draw() function

  }, 2000); // Pause for 2 seconds (2000 milliseconds)

}

​

//==================================================================

function draw() {

  noFill();

  stroke(0);

  print(mouseX, mouseY);

  if (gameState == 'start') {

    drawStartInstruction();

  } else if (gameState == 'Level-1') {

    drawLevel1Instruction();

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

    playMaze();

  } else if (gameState == 'Level-2') {

    drawLevel2Instruction();

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

    answerQuestion();

  } else if (gameState == 'Level-3') {

    drawLevel3Instruction();

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

    playPuzzle();

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

    end();

  }

  // draw home button

  image(buttonImg, button.x, button.y, button.w, button.h);

​

}

​

//==================================================================

function drawStartInstruction() {

  image(startInstuctionImage, 0, 0, width, height);

}

​

function drawLevel1Instruction() {

  image(level_1_img, 0, 0, width, height);

}

​

//==================================================================

function playMaze() {

  background(220);

  for (let y = 0; y < maze.length; y++) {

    for (let x = 0; x < maze[y].length; x++) {

      // display wall tiles

      if (maze[y][x] === 1) {

        noStroke();

        fill('#4B6EBF'); // Wall

        rect(x * tileSize, y * tileSize, tileSize, tileSize);

      }

      // display key

      else if (x === tileKey.x && y === tileKey.y && !keyCollected) {

        image(keyImg, x * tileSize, y * tileSize, tileSize, tileSize);

      }

      // display block

      else if (x === block.x && y === block.y && blockVisible) {

        image(blockImg, x * tileSize, y * tileSize, tileSize, tileSize);

      }

    }

  }

  // display the final destination

  image(reachImg, endX * tileSize, endY * tileSize, tileSize, tileSize);

  // display the character

  image(charImg, character.x * tileSize, character.y * tileSize, tileSize, tileSize);

​

  // check if the character reached the destination

  if ((character.x === endX && character.y === endY)) {

    pauseAndResumeDraw();

    levelCompleteSound.play();

    gameState = 'Level-2';

  }

}

//==================================================================

function drawLevel2Instruction() {

  image(level_2_img, 0, 0, width, height);

}

​

function answerQuestion() {

  image(questionImg, 0, 0, width, height);

  // Get the current mouse cursor position

  let cursorX = mouseX;

  let cursorY = mouseY;

​

  // Draw a small circle around the cursor

  noFill();

  stroke('red');

  strokeWeight(2); // No outline for the circle

  ellipse(cursorX, cursorY, 40, 40); // Draw a circle at the cursor position

  // Check if the mouse is pressed within the target area

  if (mouseIsPressed && mouseX >= rectX && mouseX <= rectX + rectWidth && mouseY >= rectY && mouseY <= rectY + rectHeight) {

    pauseAndResumeDraw();

    levelCompleteSound.play();

    gameState = 'Level-3';

  } else if (mouseIsPressed) {

    wrongClick++;

    if (wrongClick > 0) {

        wrongChoiceSound.play();

    }

  }

  if (wrongClick > 1) {

    noStroke();

    textFont(font);

    textSize(20); 

    fill(0);

    text('Hint: Look at the hands.', width/3, 3*height/16 + 15);

  }

}

//==================================================================

function drawLevel3Instruction() {

  if (level_3_imgIndex < level_3_img.length) {

    image(level_3_img[level_3_imgIndex], 0, 0, width, height);

  } else {

    gameState = 'playPuzzle';

  }

}

​

//==================================================================

function playPuzzle() {

  if (puzzleImgIndex < puzzleImg.length) {

    image(puzzleImg[puzzleImgIndex], 0, 0, width, height);

  }

​

  // Calculate the available width for the rectangles (canvas width minus margins)

  let availableWidth = width - 60; // 30 pixels from the left and 30 pixels from the right

​

  // Calculate the width of each section for three hats

  let sectionWidth = availableWidth / 3;

​

  // Draw the hats

  for (let i = 0; i < characters; i++) {

    // Calculate the x-coordinate for each hat based on the section

    let x = 30 + (i * sectionWidth) + sectionWidth / 2;

    let y = height / 4;

​

    // Draw the assigned hat images

    if (hats[randomHatSet][i] === 1) {

      image(blackHatImg, x - 45, y + 30, 90, 45);

    } else if (hats[randomHatSet][i] === 0) {

      image(whiteHatImg, x - 45, y + 30, 90, 45);

    }

  }

  // Draw a mystery hat on top of the hat of the user

  image(greyHatImg, (30 + (2 * sectionWidth) + sectionWidth / 2) - 45, (height / 4) + 30, 90, 45);

  // Choose from the black or white hat

  if (puzzleImgIndex === 1) {

    if (mouseX > blackHatGuess.x && mouseX < blackHatGuess.x + blackHatGuess.w && mouseY > blackHatGuess.y && mouseY < blackHatGuess.y + blackHatGuess.h) {

      // Change the color when the cursor is inside

      noStroke();

      fill('#FFB8CD');

      rect(blackHatGuess.x - 2, blackHatGuess.y - 2, blackHatGuess.w + 4, blackHatGuess.h + 4);

    } else if (mouseX > whiteHatGuess.x && mouseX < whiteHatGuess.x + whiteHatGuess.w && mouseY > whiteHatGuess.y && mouseY < whiteHatGuess.y + whiteHatGuess.h) {

      // Change the color when the cursor is inside

      noStroke();

      fill('#FFB8CD');

      rect(whiteHatGuess.x - 2, whiteHatGuess.y - 2, whiteHatGuess.w + 4, whiteHatGuess.h + 4);

    }

    // Draw a rect around the hat choices

    image(blackHatImg, blackHatGuess.x, blackHatGuess.y, blackHatGuess.w, blackHatGuess.h);

    image(whiteHatImg, whiteHatGuess.x, whiteHatGuess.y, whiteHatGuess.w, whiteHatGuess.h);

  }

}

​

function makeGuess(mouseX, mouseY) {

  if (mouseX > blackHatGuess.x && mouseX < blackHatGuess.x + blackHatGuess.w &&

      mouseY > blackHatGuess.y && mouseY < blackHatGuess.y + blackHatGuess.h) {

    pauseAndResumeDraw();

    levelCompleteSound.play();

    gameState = 'end';

  } else {

    pauseAndResumeDraw();

    // restart level 3

    wrongChoiceSound.play();

    restartPuzzle();

  }

}

​

function restartPuzzle() {

  // randomly choose hat set

  randomHatSet = floor(random(3));

  level_3_imgIndex = 0;

  puzzleImgIndex = 0;

  gameState = 'Level-3';

}

//==================================================================

function end() {

  image(endImg, 0, 0, width, height);

}

​

//==================================================================

function mousePressed() {

  if (gameState === 'start') {

    pageSound.play();

    gameState = 'Level-1';

  } else if (gameState === 'Level-1') {

    pageSound.play();

    gameState = 'playMaze';

  } else if (gameState === 'Level-2') {

    pageSound.play();

    gameState = 'answerQuestion';

  } else if (gameState === 'Level-3' && level_3_imgIndex < level_3_img.length) {

    pageSound.play();

    level_3_imgIndex++; // change the image

  } else if (gameState === 'Level-3') {

    pageSound.play();

    gameState = 'playPuzzle';

  } else if (gameState === 'playPuzzle' && puzzleImgIndex < puzzleImg.length-1) {

    pageSound.play();

    puzzleImgIndex++; // change the image

  } else if (gameState === 'playPuzzle' && puzzleImgIndex === 1) {

    makeGuess(mouseX, mouseY);

  }

  if (mouseX > button.x && mouseX < button.x + button.w &&

      mouseY > button.y && mouseY < button.y + button.h) {

    pageSound.play();

    restartGame();

  }

}

//==================================================================

function keyPressed() {

  if (gameState === 'playMaze') {

    jumpSound.play();

    if (keyCollected) {

      // Character can move freely once the key is collected

      if (keyCode === UP_ARROW && character.y > 0 && maze[character.y - 1][character.x] === 0) {

        character.y--;

      } else if (keyCode === DOWN_ARROW && character.y < maze.length - 1 && maze[character.y + 1][character.x] === 0) {

        character.y++;

      } else if (keyCode === LEFT_ARROW && character.x > 0 && maze[character.y][character.x - 1] === 0) {

        character.x--;

      } else if (keyCode === RIGHT_ARROW && character.x < maze[0].length - 1 && maze[character.y][character.x + 1] === 0) {

        character.x++;

      }

    } else {

      // If the key is not collected, prevent the character from moving through the block

      if (keyCode === UP_ARROW && character.y > 0 && maze[character.y - 1][character.x] === 0 && !(character.x === block.x && character.y - 1 === block.y)) {

        character.y--;

      } else if (keyCode === DOWN_ARROW && character.y < maze.length - 1 && maze[character.y + 1][character.x] === 0 && !(character.x === block.x && character.y + 1 === block.y)) {

        character.y++;

      } else if (keyCode === LEFT_ARROW && character.x > 0 && maze[character.y][character.x - 1] === 0 && !(character.x - 1 === block.x && character.y === block.y)) {

        character.x--;

      } else if (keyCode === RIGHT_ARROW && character.x < maze[0].length - 1 && maze[character.y][character.x + 1] === 0 && !(character.x + 1 === block.x && character.y === block.y)) {

        character.x++;

      }

    }

​

    // Check if the key is collected

    if (character.x === tileKey.x && character.y === tileKey.y) {

      keyCollected = true;

      blockVisible = false;

      keySound.play();

    }

  }

}