let subCanvas;

// Background image for the main menu

let bg_main_Page; // Background image for the main menu

let bg_instructions_Page; // Background image for the instructions screen

let bg_Congrats_Page; // Background image for the congratulations screen

let bg_Lost_Page; // Background image for the game-over screen

​

let backgroundSound_Main_Page;

let backgroundSound_Congrats_Page;

let backgroundSound_Piece_Move;

let backgroundSound_Puzzle_Page;

​

let angle = 0;

let currentScreen = "MAIN_SCREEN"; // Keeps track of the current screen

let puzzle; // The puzzle object representing the game state

​

// Height and width of the canvas

let main_H = 600;

let main_W = 800;

​

// Background images for different puzzle levels

let bg_puzzle_Level1;

let bg_puzzle_Level2;

let bg_puzzle_Level3;

​

// Define game levels

const levels = {

  level1: {

    levelNumber: 1,

    cols: 3,

    rows: 3,

    timer: 300,

    image: null,

  },

  level2: {

    levelNumber: 2,

    cols: 4,

    rows: 4,

    timer: 600,

    image: null,

  },

  level3: {

    levelNumber: 3,

    cols: 5,

    rows: 5,

    timer: 900,

    image: null,

  },

};

​

// Preload all the images and sounds

function preload() {

  bg_main_Page = loadImage("/images/Main_Page1.png");

  bg_instructions_Page = loadImage("/images/Instructions_Page1.png");

  bg_Congrats_Page = loadImage("/images/Congrats_Page1.png");

  bg_Lost_Page = loadImage("/images/Lost_Page1.png");

​

  backgroundSound_Main_Page = loadSound("/sounds/Main_Page.mp3");

  backgroundSound_Puzzle_Page = loadSound("/sounds/Puzzle_Page.mp3");

  backgroundSound_Piece_Move = loadSound("/sounds/Clickk.mp3");

  backgroundSound_Congrats_Page = loadSound("/sounds/complete_level.mp3");

​

  levels.level1.image = loadImage("/images/paint.jpg", () => {

    levels.level1.image.resize(430, 400);

  });

​

  levels.level2.image = loadImage("/images/horse.jpeg", () => {

    levels.level2.image.resize(450, 450);

  });

​

  levels.level3.image = loadImage("/images/carpet.jpg", () => {

    levels.level3.image.resize(400, 400);

  });

​

  // Load background images for different puzzle levels

  bg_puzzle_Level1 = loadImage("/images/Puzzle_Page1.png");

  bg_puzzle_Level2 = loadImage("images/Puzzle_Page2.png");

  bg_puzzle_Level3 = loadImage("images/Puzzle_Page3.png");

}

​

function setup() {

  createCanvas(main_W, main_H);

}

​

function draw() {

  // Check the current screen and display the appropriate content

  if (currentScreen === "MAIN_SCREEN") {

    main_page_display(); // Show the main menu

    backgroundSound_Puzzle_Page.stop(); // Stop other background music

    if (!backgroundSound_Main_Page.isPlaying()) {

      backgroundSound_Main_Page.setVolume(0.6);

      backgroundSound_Main_Page.loop(); // Play the main menu music

    }

  } else if (currentScreen === "INSTRUCTIONS_PAGE") {

    insturctions_page_display();

  } else if (currentScreen === "PUZZLE_SCREEN") {

    backgroundSound_Main_Page.stop();

    if (!backgroundSound_Puzzle_Page.isPlaying()) {

      backgroundSound_Puzzle_Page.setVolume(0.4);

      backgroundSound_Puzzle_Page.loop();

    }

    puzzle_page_display(); // Display the puzzle

​

    // Check if timer has reached 0 and puzzle is not solved

    if (puzzle.timer <= 0 && !puzzle.isSolved()) {

      currentScreen = "LOST_SCREEN";

      puzzle.stopTimer(); // Stop the timer

    }

​

    if (puzzle.isSolved()) {

      backgroundSound_Puzzle_Page.stop();

      backgroundSound_Congrats_Page.setVolume(0.5);

      backgroundSound_Congrats_Page.play(); // Play congratulations music

      currentScreen = "CONGRATULATIONS_SCREEN";

      puzzle.stopTimer(); // Stop the timer

    }

  } else if (currentScreen === "LOST_SCREEN") {

    backgroundSound_Puzzle_Page.stop(); // Stop puzzle screen music

    lost_page_display(); // Show "You lost" screen

  } else if (currentScreen === "CONGRATULATIONS_SCREEN") {

    congrats_page_display(); // Show congratulations screen

  }

}

​

// Function to display the main menu

function main_page_display() {

  background(255);

  image(bg_main_Page, 0, 0, main_W, main_H);

​

  // Add a dynamic text effect

  let yOffset = sin(angle) * 23;

  fill(255);

  textSize(92);

  textStyle(BOLD);

  textFont("Georgia");

  text("PUZZLEPLAY", 100, 320 + yOffset);

  angle += 0.1;

}

​

// Function to display the instructions screen

function insturctions_page_display() {

  background(255);

  image(bg_instructions_Page, 0, 0, main_W, main_H); // Display the instructions background image

}

​

// Function to display the congratulations screen

function congrats_page_display() {

  background(255);

  image(bg_Congrats_Page, 0, 0, main_W, main_H); // Display the congratulations background image

​

  textSize(22);

  fill(255);

  text("Moves Taken: " + puzzle.getMoves(), 430, 370); // Display the number of moves

​

  let minutes = Math.floor(puzzle.getTimeTaken() / 60);

  let seconds = puzzle.getTimeTaken() % 60;

  text(`Time Taken: ${nf(minutes, 2)}:${nf(seconds, 2)}`, 430, 425); // Display the time taken

}

​

// Function to display the game-over screen

function lost_page_display() {

  background(255);

  image(bg_Lost_Page, 0, 0, main_W, main_H);

}

​

// Function to display the puzzle screen

function puzzle_page_display() {

  background(200, 0, 0);

  // Determine the background image based on the current puzzle level

  let currentBg;

  if (puzzle.level.levelNumber === 1) {

    currentBg = bg_puzzle_Level1;

  } else if (puzzle.level.levelNumber === 2) {

    currentBg = bg_puzzle_Level2;

  } else if (puzzle.level.levelNumber === 3) {

    currentBg = bg_puzzle_Level3;

  }

  image(currentBg, 0, 0, main_W, main_H);

​

  textSize(22);

  fill(255); // Set text color to white

  text("Press E to go to end the game", 370, 560);

  text("Level " + puzzle.level.levelNumber, 84, 260);

  text("Moves: " + puzzle.moveCount, 70, 355);

  puzzle.displayTimer();

  puzzle.display();

}

​

// Key presses

function keyPressed() {

  // Check if the player is on the instructions screen

  if (currentScreen === "INSTRUCTIONS_PAGE") {

    if (key === "1" || key === "2" || key === "3" || key === " ") {

      let level;

      if (key === "1") {

        level = levels.level1;

      } else if (key === "2") {

        level = levels.level2;

      } else if (key === "3") {

        level = levels.level3;

      } else if (key === " ") {

        currentScreen = "MAIN_SCREEN";

      }

      // Create a new puzzle with the chosen level

      puzzle = new Puzzle(level.cols, level.rows, level.timer, level);

      currentScreen = "PUZZLE_SCREEN"; // Switch to the puzzle screen

      puzzle.startTimer(); // Start the timer

    }

  } else if (currentScreen === "PUZZLE_SCREEN") {

    if (key === "E" || key === "e") {

      currentScreen = "MAIN_SCREEN"; // Return to the main menu

    }

  }

  if (key === "R" || key === "r") {

    retryGame();

  } else if (

    currentScreen === "CONGRATULATIONS_SCREEN" ||

    currentScreen === "LOST_SCREEN"

  ) {

    if (key === " ") {

      currentScreen = "MAIN_SCREEN";

    }

  }

}

​

// Mouse clicks

function mousePressed() {

  if (currentScreen === "MAIN_SCREEN") {

    currentScreen = "INSTRUCTIONS_PAGE"; // Switch to the instructions screen

  } else if (currentScreen === "PUZZLE_SCREEN") {

    puzzle.mousePressed(); // Handle mouse interactions in the puzzle

  }

}

// Function to restart the game with the current level

function retryGame() {

  let level = puzzle.level; // Get the current level

  puzzle = new Puzzle(level.cols, level.rows, level.timer, level);

  currentScreen = "PUZZLE_SCREEN";

  puzzle.startTimer();

}

​

class Tile {

  constructor(i, img) {

    this.index = i;

    this.img = img;

  }

}

​

class Puzzle {

  constructor(cols, rows, timerDuration, level) {

    this.cols = cols;

    this.rows = rows;

    this.timerDuration = timerDuration;

    this.level = level;

    this.w = 400 / cols; // Adjust as needed

    this.h = 400 / rows; // Adjust as needed

    this.tiles = [];

    this.board = [];

    this.moveCount = 0;

    this.startTime = millis();

    this.timer = timerDuration;

    this.timerInterval;

    this.blankIndex;

    this.init();

    this.xOffset = (width - this.w * this.cols) / 1.3;

    this.yOffset = (height - this.h * this.rows) / 2.5;

    this.width = this.w * this.cols;

    this.height = this.h * this.rows;

​

    this.incrementMoveCount = function () {

      this.moveCount++;

    };

  }

​

  init() {

    // Initialize tiles and board

    for (let i = 0; i < this.cols; i++) {

      for (let j = 0; j < this.rows; j++) {

        let x = i * this.w;

        let y = j * this.h;

        let img = createImage(int(this.w), int(this.h));

        img.copy(this.level.image, x, y, this.w, this.h, 0, 0, this.w, this.h);

        let index = i + j * this.cols;

        this.board.push(index);

        let tile = new Tile(index, img);

        this.tiles.push(tile);

      }

    }

​

    this.tiles.pop();

    this.board.pop();

​

    this.board.push(-1);

​

    this.simpleShuffle(this.board);

  }

// Method to swap two elements in the board array

  swap(i, j, arr) {

    let temp = arr[i];

    arr[i] = arr[j];

    arr[j] = temp;

  }

//shuffle the array randomly

  simpleShuffle(arr) {

    for (let i = arr.length - 1; i > 0; i--) {

      const j = Math.floor(Math.random() * (i + 1));

      this.swap(i, j, arr);

    }

  }

// Method to make a random move in the puzzle

  randomMove(arr) {

    let r1 = floor(random(this.cols));

    let r2 = floor(random(this.rows));

    this.move(r1, r2, arr);// Use the move method to perform a random move

  }

// Method to move a puzzle piece if it's adjacent to the empty position

  move(i, j, arr) {

    let blank = this.findBlank();// Find the position of the empty spot

    let blankCol = blank % this.cols;

    let blankRow = Math.floor(blank / this.rows);

     // Check if the piece at (i, j) is adjacent to the empty position

    if (this.isNeighbor(i, j, blankCol, blankRow)) {

      this.swap(blank, i + j * this.cols, arr);// Swap the piece with the empty position

      this.moveCount++;//Increase the move count

      backgroundSound_Piece_Move.setVolume(0.7);

      backgroundSound_Piece_Move.play();

    }

  }

​

  mousePressed() {

    if (

      mouseX > this.xOffset &&

      mouseX < this.xOffset + this.width &&

      mouseY > this.yOffset &&

      mouseY < this.yOffset + this.height

    ) {

      let i = Math.floor((mouseX - this.xOffset) / this.w);

      let j = Math.floor((mouseY - this.yOffset) / this.h);

      this.move(i, j, this.board);

    }

  }

// Method to check if two positions are adjacent

  isNeighbor(i, j, x, y) {

    if (i !== x && j !== y) {

      return false;

    }

​

    if (abs(i - x) == 1 || abs(j - y) == 1) {

      return true;

    }

    return false;

  }

// Method to find the position of the empty spot on the board

  findBlank() {

    for (let i = 0; i < this.board.length; i++) {

      if (this.board[i] === -1) return i;

    }

  }

​

  display() {

    let xOffset = (width - this.w * this.cols) / 1.3;

    let yOffset = (height - this.h * this.rows) / 2.5;

​

    for (let i = 0; i < this.cols; i++) {

      for (let j = 0; j < this.rows; j++) {

        let index = i + j * this.cols;

        let x = i * this.w + xOffset;

        let y = j * this.h + yOffset;

        let tileIndex = this.board[index];

        if (tileIndex > -1) {

          let img = this.tiles[tileIndex].img;

          image(img, x, y, this.w, this.h);

        } else {

          fill(0); // Set fill color to black

          rect(x, y, this.w, this.h);

        }

      }

    }

​

    for (let i = 0; i < this.cols; i++) {

      for (let j = 0; j < this.rows; j++) {

        let x = i * this.w + xOffset;

        let y = j * this.h + yOffset;

        strokeWeight(2);

        noFill();

        rect(x, y, this.w, this.h);

      }

    }

  }

​

  updateTimer() {

    let currentTime = millis();

    let elapsedTime = (currentTime - this.startTime) / 1000;

    this.timer = Math.max(0, this.timerDuration - elapsedTime);

  }

​

  displayTimer() {

    textSize(18);

    fill(255);

    let minutes = Math.floor(this.timer / 60);

    let seconds = this.timer % 60;

    text(`Time Left: ${nf(minutes, 2)}:${nf(seconds, 2)}`, 50, 445);

  }

​

  startTimer() {

    this.timerInterval = setInterval(() => {

      this.timer--;

      if (this.timer <= 0) {

        this.stopTimer();

      }

    }, 1000);

  }

​

  stopTimer() {

    clearInterval(this.timerInterval);

  }

​

  isSolved() {

    for (let i = 0; i < this.board.length - 1; i++) {

      if (this.board[i] !== this.tiles[i].index) {

        // this is to show the congrats page (true)

        return false;

      }

    }

    return true;

  }

​

  getMoves() {

    return this.moveCount;

  }

​

  getTimeTaken() {

    return this.timerDuration - this.timer;

  }

}

​