​

let buttons = [];

let gameState = "menu";

let volume = 5;

let controls = {left:'A', right:'D', attack:'J', jump:'K', item:'I', pause:'P', use:'E'};

let controlKeys = Object.keys(controls);

let changingKey = null;

let titleFontSize = 48;

let titleY;

let groundHeight = 150;

let sceneIndex = 0;

let goldCoins = 0;

let level = 1;

let exp = 0;

let elapsedTime = 0;

let portals = [];

let unlockedPortals = [];

let isChoosingPortal = false;

let selectedPortalIndex = 0;

let spikes = [];

let currentSpawnPoint = null;

let platforms = [];

let coins = [];

let enemies = [];

let scenes = [];

let maxScenes = 3;

let hiddenScenes = [];

let hiddenSceneIndex = 0;

let inHiddenScene = false;

let hiddenMaxScenes = 3;

let difficultyButtons = []; // 存放難度選單的按鈕

let difficulty = "easy"; // 預設為簡單模式

let backButton;

let upgradeButtons = [];

​

function setup() {

  createCanvas(800, 600);

  textAlign(CENTER, CENTER);

  titleY = height / 4;//设置标题位置

  sceneIndex = 0;

  let startY = height / 2;

  buttons.push(new Button(width / 2 - 100, height / 2 - 10, "New Start", () => gameState = "difficultySelect"));

  buttons.push(new Button(width / 2 - 100, height / 2 + 50, "Continue", () => console.log("Load Game")));

  buttons.push(new Button(width / 2 - 100, height / 2 + 110, "Setting", () => gameState = "settings"));

  buttons.push(new Button(width / 2 - 100, height / 2 + 170, "Exit", () => noLoop()));

  //按钮位置

  // 創建難度選擇按鈕

  difficultyButtons.push(new Button(width / 2 - 100, height / 2 - 40, "Easy Mode", () => {

    difficulty = "easy";

    gameState = "playing"; // 進入遊戲

  }));

​

  difficultyButtons.push(new Button(width / 2 - 100, height / 2 + 40, "Hard Mode", () => {

    difficulty = "hard";

    gameState = "playing"; // 進入遊戲

  }));

​

  backButton = new Button(width / 2 - 100, height - 150, "Back", () => {

    if (gameState === "difficultySelect") {

      gameState = "menu";

    }

  });

  player = new Player(50, height - groundHeight - 40);

  //portals.push(new Portal(100, height - groundHeight - 60));

  //currentSpawnPoint = {x: 100, y: height - groundHeight - 50};

  //spikes.push(new Spike(250, height - groundHeight, 50));

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

    scenes.push(new Scene());

  }

  scenes[0].addPlatform(450, height - groundHeight - 130, 30, true);

  scenes[0].addPlatform(480, height - groundHeight - 130, 30, true);

  scenes[0].addPlatform(510, height - groundHeight - 130, 30, true);

  scenes[0].addPlatform(540, height - groundHeight - 130, 30, true);

  scenes[0].addEnemy(400, height - groundHeight - 25, 25, 25, 2, 400, 700);

  scenes[0].addSpike(250, height - groundHeight, 50);

  //scenes[0].addCoin(460, height - groundHeight - 160);

  let portal1 = scenes[0].addPortal(100, height - groundHeight - 60, "main", 0);

  lastCheckPoint = { x: portal1.x, y: portal1.y, scene: 0 };

  scenes[1].addCliff(150, 200);

  scenes[1].addCliff(250, 300);

  scenes[1].addTurret(165, height - 20);

  scenes[1].addTurret(265, height - 20);

  for(let x = 150; x <= 270; x += 30){

    scenes[1].addPlatform(x, height - groundHeight - 240, 30, false);

  }

  for(let x = 150; x <= 270; x += 30){

    scenes[1].addCoin(x + 15, height - groundHeight - 260, false);

  }

  //方块阵列

  //上下兩側方塊條

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

    let xPos = 450 + i * 30; // 計算 X 座標

​

    if (i === 1 || i === 2) { 

        scenes[1].addBreakableBlock(xPos, height - groundHeight - 100, 30);

    } else {

        scenes[1].addPlatform(xPos, height - groundHeight - 100, 30, false);

    }

    scenes[1].addPlatform(450 + i * 30, height - groundHeight - 220, 30, false);

  }

  //左右兩側方塊條

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

    scenes[1].addPlatform(450, height - groundHeight -(100 + i * 30), 30, false);

    scenes[1].addPlatform(540, height - groundHeight -(100 + i * 30), 30, false);

  }

  for(let i = 1; i < 3; i++){

    for(let j = 0; j < 3; j++){

      scenes[1].addCoin(450 + i * 30 + 15, height - groundHeight -(100 + j * 30 + 15), false);

    }

  }

  /*for(let i = 0; i < 4; i++){

    scenes[1].addBreakableBlock(450 + i * 30, 130, 30);

  }*/

  scenes[1].addPipe(650, height - groundHeight - 110, 75, 110);

  hiddenScenes = [];

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

    hiddenScenes.push(new Scene());

  }

  hiddenScenes[0].addCliff(200, 800);

  hiddenScenes[1].addCliff(0,800);

  hiddenScenes[2].addCliff(0,500);

  let hiddenPortal = hiddenScenes[0].addPortal(100, height - groundHeight - 60, "hidden", 0);

 // hiddenPortal.unlocked = true;

  //unlockedPortals.push(hiddenPortal);

  hiddenScenes[0].addGate(200);

  hiddenScenes[0].addSwitch(70, height - groundHeight - 20);

  hiddenScenes[0].addChasingSpike();

  hiddenScenes[0].addPlatform(330, height - groundHeight - 10, 30, true);

  hiddenScenes[0].addPlatform(410, height - groundHeight - 10, 30, true);

  hiddenScenes[0].addPlatform(440, height - groundHeight - 10, 30, true);

  hiddenScenes[0].addPlatform(530, height - groundHeight - 10, 30, true);

  hiddenScenes[0].addPlatform(560, height - groundHeight - 10, 30, true);

  hiddenScenes[0].addPlatform(680, height - groundHeight - 100, 30, true);

  hiddenScenes[0].addPlatform(710, height - groundHeight - 100, 30, true);

  hiddenScenes[0].addPlatform(740, height - groundHeight - 100, 30, true);

  hiddenScenes[0].addPlatform(770, height - groundHeight - 100, 30, true);

  hiddenScenes[0].addPlatform(810, height - groundHeight - 100, 30, true);

  hiddenScenes[1].addPlatform(0, height - groundHeight - 10, 30, true);

  hiddenScenes[1].addPlatform(30, height - groundHeight - 10, 30, true);

  hiddenScenes[1].addPlatform(150, height - groundHeight - 100, 30, true);

  hiddenScenes[1].addPlatform(250, height - groundHeight - 100, 30, true);

  hiddenScenes[1].addPlatform(350, height - groundHeight - 180, 30, true);

  hiddenScenes[1].addPlatform(350, height - groundHeight - 10, 30, true);

  hiddenScenes[1].addMovablePlatform(450, height - groundHeight - 300, 450, height - groundHeight - 330, 30, 5);

  hiddenScenes[1].addPlatform(450, height - groundHeight - 100, 30, true);

  hiddenScenes[1].addMovablePlatform(510, height - groundHeight - 10, 480, height - groundHeight - 10, 30, 5);

  hiddenScenes[1].addPlatform(610, height - groundHeight - 100, 30, true);

  hiddenScenes[1].addPlatform(640, height - groundHeight - 100, 30, true);

  hiddenScenes[1].addPlatform(750, height - groundHeight - 100, 30, true);

  //hiddenScenes[1].addPlatform(800, height - groundHeight - 100, 30, true);

  //hiddenScenes[2].addPlatform(0, height - groundHeight - 100, 30, true);

  hiddenScenes[2].addPlatform(30, height - groundHeight - 70, 30, true);

  hiddenScenes[2].addPlatform(60, height - groundHeight - 70, 30, true);

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

    hiddenScenes[2].addPlatform(30, height - groundHeight -(200 + i * 30), 30, false);

    hiddenScenes[2].addPlatform(60, height - groundHeight -(200 + i * 30), 30, false);

  }

    hiddenScenes[2].addPlatform(130, height - groundHeight - 150, 30, true);

    hiddenScenes[2].addPlatform(160, height - groundHeight - 150, 30, true);

    hiddenScenes[2].addPlatform(240, height - groundHeight - 100, 30, true);

    hiddenScenes[2].addPlatform(270, height - groundHeight - 100, 30, true);

    hiddenScenes[2].addPlatform(380, height - groundHeight - 100, 30, true);

    hiddenScenes[2].addPlatform(410, height - groundHeight - 100, 30, true);

    hiddenScenes[2].addPlatform(440, height - groundHeight - 100, 30, true);

}

​

function draw() {

  background(240);

  if(gameState === "menu"){

    drawMenu();

  }

  else if(gameState === "difficultySelect"){

    drawDifficultyMenu();

  }

  else if(gameState === "settings"){

    drawSettings();

  }

  else if(gameState === "playing"){

    drawGame();

  }

  else if(gameState === "upgrade"){

    drawUpgrade();

  }

}

​

function drawMenu(){

  image(coverImg, 0, 0, 800, 600);      

  textSize(titleFontSize);

  // 計算 logo 要多大

  let logoW = 430;  // 你想要的寬度

  let logoH = logo2Img.height * (logoW / logo2Img.width);  // 維持比例的高度

  // 把 logo 畫在中間

  image(logo2Img, (width - logoW) / 2-10, 50, logoW, logoH);  

  for (let btn of buttons) {

    btn.display();

  }

}

​

function drawDifficultyMenu() {

  image(coverImg, 0, 0, 800, 600); 

  // 加半透明黑色遮罩

  fill(0, 150);   // 0是黑色，150是透明度 (0~255)

  rect(0, 0, width, height);

  fill(255);  

  textSize(50);

  text("Select Difficulty", width / 2, height / 3);

  // 顯示按鈕

  for (let btn of difficultyButtons) {

    btn.display();

  }

  console.log("Current gameState:", gameState);

  backButton.display();  // 顯示返回按鈕

​

}

​

function drawGame(){

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

  noStroke();

  image(groundImage, 0, height - groundHeight, width, groundHeight)

  rect(0, height - groundHeight, width, groundHeight);

  fill(90, 194, 108);

  if(inHiddenScene){

    for(let cliff of hiddenScenes[hiddenSceneIndex].cliffs){

      rect(cliff.startX, height - groundHeight, cliff.endX - cliff.startX, groundHeight);

    }

  } else {

    for(let cliff of scenes[sceneIndex].cliffs){

      rect(cliff.startX, height - groundHeight, cliff.endX - cliff.startX, groundHeight);

    }

  }

  //for(let portal of portals){

    //portal.update();

   // portal.display();

  //}

  /*for(let spike of spikes){

    spike.update();

    spike.display();

  }

  for(let platform of platforms){

    platform.update();

    platform.display();

  }

  for(let coin of coins){

    coin.update();

    coin.display();

  }

  for(let enemy of enemies){

    enemy.update();

    enemy.display();

  }

  */

  if(inHiddenScene){

    hiddenScenes[hiddenSceneIndex].update();

    hiddenScenes[hiddenSceneIndex].display();

  }

  else{

    scenes[sceneIndex].update();

    scenes[sceneIndex].display();

  }

  player.update();

  player.display();

  drawHUD();

  //fill(0);

  //textSize(20);

  //text(`Scene: ${sceneIndex}`, width - 80, 30);

  if(isChoosingPortal){

    drawPortalSelection();

  }

}

​

class Platform{

  constructor(x, y, size, hasCoin = true){

    this.x = x;

    this.y = y + 14;

    this.size = size;

    this.hasCoin = hasCoin;

  }

  update(){

/*    if(player.x + player.w > this.x && player.x < this.x + this.size &&

       //player.y == this.y + this.size && player.velocityY < 0){

       //player.y - player.velocityY < this.y + this.size && player.y + player.velocityY < this.y + this.size){

       player.y <= this.y + this.size && player.y >= this.y && player.velocityY < 0){

      player.velocityY = 0;

      if(this.hasCoin){

        let newCoin = new Coin(this.x + this.size / 2, this.y - 10);

        scenes[sceneIndex].coins.push(new Coin(this.x + this.size / 2, this.y - 10));

        this.hasCoin = false;

      }

    }

    if(player.x + player.w > this.x && player.x < this.x + this.size &&

       player.y + player.h >= this.y && player.y + player.h - player.velocityY < this.y + 5 &&

       player.velocityY > 0){

      player.y = this.y - player.h;

      player.velocityY = 0;

      player.onGround = true;

    }

//    if(player.x + player.w > this.x && player.x < this.x + this.size &&

 //      player.y + player.h > this.y && player.velocityY > 0){

   //   player.y = this.y - player.h;

     // player.velocityY = 0;

     // player.onGround = true;

    //}

*/    

    let hasBlockAbove = scenes[sceneIndex].platforms.some(platform => 

      platform.x === this.x && platform.y === this.y - this.size

    );

    if (player.y + player.h > this.y && player.y < this.y + this.size) {

      // **人物从右侧撞到方块**

      let nextX = player.x + player.velocityX; // 预测下一帧 X 位置

      if (player.velocityX > 0 && player.prevX + player.w <= this.x + 1 && nextX + player.w > this.x) {

        if (!scenes[sceneIndex].platforms.some(p => p !== this && p.x === this.x - this.size && p.y === this.y)) {

          player.x = this.x - player.w;

          player.velocityX = 0;

        }

      }

      // **人物从左侧撞到方块**

      if (player.velocityX < 0 && player.prevX >= this.x + this.size - 1 && nextX < this.x + this.size) {

        if (!scenes[sceneIndex].platforms.some(p => p !== this && p.x === this.x + this.size && p.y === this.y)) {

          player.x = this.x + this.size;

          player.velocityX = 0;

        }

      }

    }

    if (player.x + player.w > this.x && player.x < this.x + this.size &&

        player.y < this.y + this.size && player.prevY >= this.y + this.size &&

        player.velocityY < 0) {

      player.y = this.y + this.size;

      player.velocityY = 0;

      if (this.hasCoin) {

        scenes[sceneIndex].coins.push(new Coin(this.x + this.size / 2, this.y - 10));

        this.hasCoin = false;

      }

      return; 

    }

    if (!hasBlockAbove && player.x + player.w > this.x && player.x < this.x + this.size &&

        player.y + player.h > this.y && player.prevY + player.h <= this.y &&

        player.velocityY > 0) {

      player.y = this.y - player.h;

      player.velocityY = 0;

      player.onGround = true;

      return;

    }

  }

  display(){

    image(blockImage, this.x, this.y, this.size, this.size);

  }

}

​

class Coin{

  constructor(x, y, hasGravity = true){

    this.x = x - 7;

    this.y = y + 7;

    this.size = 15;

    this.collected = false;

    this.hasGravity = hasGravity;

    this.velocityY = hasGravity ? -2 : 0;

    this.gravity = hasGravity ? 0.5 : 0;

  }

  update(){

    if(this.hasGravity){

      this.velocityY += this.gravity;

      this.y += this.velocityY;

    }

    if(player.x + player.w > this.x && player.x < this.x + this.size &&

       player.y + player.h > this.y && player.y < this.y + this.size &&

       !this.collected){

      this.collected = true;

      collection();

      let index = scenes[sceneIndex].coins.indexOf(this);

      if(index > -1){

        scenes[sceneIndex].coins.splice(index, 1);

      }

    }

  }

  display(){

    if(!this.collected){

      image(coinImg, this.x, this.y, this.size, this.size);

    }

  }

}

​

class Spike{

  constructor(x, y, w){

    this.x = x;

    this.y = height - groundHeight + 14;

    this.w = w;

    this.h = 15;

    this.visible = false;

  }

  update(){

    if(difficulty === "easy"){

      this.visible = true;

    }

    if(difficulty === "hard"){

      if(dist(player.x + 20, player.y + 30, this.x + this.w / 2, this.y) < 70){

        this.visible = true;

      }

    }

    if(this.visible && this.isCollidingWithPlayer()){

      respawnPlayer();

      if(difficulty === "hard"){

        this.visible = false;

      }

    }

  }

  display(){

    if(this.visible){

      image(spikeImage, this.x, this.y - this.h, this.w, this.h);

      //triangle(this.x, this.y, this.x + this.w / 2, this.y - this.h, this.x + this.w, this.y);

    }

  }

  isCollidingWithPlayer(){

    return(player.x < this.x + this.w && player.x + player.w > this.x && 

           player.y + player.h > this.y - this.h);

  }

}

​

function respawnPlayer(){

  if(lastCheckPoint){

    if(lastCheckPoint.sceneType === "hidden"){

      inHiddenScene = true;

      hiddenSceneIndex = lastCheckPoint.scene;

    }

    else{

      inHiddenScene = false;

      sceneIndex = lastCheckPoint.scene;

    }

    player.x = lastCheckPoint.x;

    player.y = lastCheckPoint.y;

  }

  else{

    inHiddenScene = false;

    sceneIndex = 0;

    player.x = 50;

    player.y = height - groundHeight - 40;

  }

  exp = 0;

  let scene = inHiddenScene ? hiddenScenes[hiddenSceneIndex] : scenes[sceneIndex];;

  for(let coin of scene.coins){

    coin.collected = false;

  }

  scene.coins = [];

  for(let spike of scene.spikes){

    spike.visible = false;

  }

  for(let platform of platforms){

    platform.hasCoin = true;

    //scene.coins.push(new Coin(platform.x + platform.size / 2, platform.y - 10));

  }

  for (let movablePlatform of scene.movablePlatforms) {

    movablePlatform.reset();

  }

  for (let gate of hiddenScenes[0].gates) {

    gate.reset();

  }

  for (let s of hiddenScenes[0].switches) {

    s.reset();

  }

  for (let cs of hiddenScenes[0].chasingSpikes) {

    cs.reset();

  }

  //scene.enemies = [];

  //scene.spikes = [];

  setupNextScene();

}

​

function drawPortalSelection(){

  fill(0, 150);

  rect(200, 150, 400, 300, 20);

  fill(250);

  textSize(24);

  text("Select a Portal", 400, 180);

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

    let portal = unlockedPortals[i];

    fill(i === selectedPortalIndex ? "yellow" : "white");

    let label = portal.sceneType === "main" ? "Main" : "Hidden"

    text(`${label} Scene ${portal.sceneIndex + 1}`, 400, 220 + i * 40);

  }

  textSize(16);

  fill(200);

  text("↑/↓ to navigate, E to confirm, ESC to cancel", 400, 420);

}

​

function drawHUD(){

  fill(255);

  textSize(16);

  text(`Level ${level}`, 80, 30);

  fill("gold");

  rect(20, 40, (exp / 10) * 100, 10);

  noFill();

  stroke(255);

  rect(20, 40, 100, 10);

  let timeElapsed = Math.floor(millis() / 1000);

  text(`Time: ${timeElapsed}s`, width - 80, 30);

}

​

class Portal{

  constructor(x, y, sceneType, sceneIndex){

    this.x = x;

    this.y = y + 14;

    this.w = 60;

    this.h = 60;

    this.unlocked = false;

    this.sceneType = sceneType;

    this.sceneIndex = sceneIndex;

  }

  update(){

    if(!this.unlocked && this.isCollidingWithPlayer()){

      this.unlocked = true;

      if(!unlockedPortals.includes(this)){

        unlockedPortals.push(this);

      }

      goldCoins += 5;

      exp += 5;

      lastCheckPoint = { x: this.x, y: this.y, scene: inHiddenScene ? hiddenSceneIndex : sceneIndex, sceneType: inHiddenScene ? "hidden" : "main"};

    }

    if(this.unlocked && this.isCollidingWithPlayer() && keyIsDown(controls.use.charCodeAt(0))){

      isChoosingPortal = true;

      selectedPortalIndex = 0;

    }

  }

  display(){

    if(this.unlocked){

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

    }

    else{

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

    }

  }

  isCollidingWithPlayer(){

    return(player.x < this.x + this.w && player.x + player.w > this.x &&

           player.y < this.y + this.h && player.y + player.h > this.y);

  }

}

​

function teleport(targetPortal){

  if(targetPortal){

    player.x = targetPortal.x;

    player.y = targetPortal.y;

    if(targetPortal.sceneType === "main"){

      inHiddenScene = false;

      sceneIndex = targetPortal.sceneIndex;

    }

    else if(targetPortal.sceneType === "hidden"){

      inHiddenScene = true;

      hiddenSceneIndex = targetPortal.sceneIndex;

    }

    lastCheckPoint = { x: targetPortal.x, y: targetPortal.y, scene: inHiddenScene ? hiddenSceneIndex : sceneIndex, sceneType: inHiddenScene ? "hidden" : "main"};

    setupNextScene();

  }

  isChoosingPortal = true;

}

​

function collection(){

  goldCoins += 1;

  exp += 1;

  if(exp >= 10){

    exp -= 10;

    level += 1;

    gameState = "upgrade";

  }

}

​

class Player{

  constructor(x, y){

    this.x = x;

    this.y = y + 14;

    this.w = 25;

    this.h = 40;

    this.speed = 3;

    this.gravity = 0.5;

    this.jumpPower = -Math.sqrt(2 * this.gravity * 150);

    this.velocityX = 0;

    this.velocityY = 0;

    this.onGround = false;

    this.canDoubleJump = false;

    this.hasDoubleJumped = false;

    this.facingRight = true;

    this.frameCounter = 0;

    this.imageIndex = 0;

  }

  update(){

    this.prevX = this.x;

    this.prevY = this.y;

    let moving = false;

    this.velocityX = 0;

    if(keyIsDown(controls.left.charCodeAt(0))){

      this.velocityX = -this.speed;

      this.facingRight = false;

      moving = true;

    }

    if(keyIsDown(controls.right.charCodeAt(0))){

      this.velocityX = this.speed;

      this.facingRight = true;

      moving = true;

    }

    checkFallDeath();

    if(!this.onGround){

      this.velocityY += this.gravity;

    }

    this.x += this.velocityX;

    this.y += this.velocityY;

    let isOnPlatform = false;

    let currentScene = inHiddenScene ? hiddenScenes[hiddenSceneIndex] : scenes[sceneIndex];

​

    for (let platform of currentScene.platforms) {

        if (

            this.prevX + this.w > platform.x + 1 && this.prevX < platform.x + platform.size &&

            this.y + this.h >= platform.y && this.prevY + this.h <= platform.y + 5

        ) {

            this.y = platform.y - this.h;

            this.velocityY = 0;

            isOnPlatform = true;

            break;

        }

    }

    let isOnPipe = false;

    for (let pipe of currentScene.pipes) {

        if (

            this.prevX + this.w > pipe.x + 1 && this.prevX < pipe.x + pipe.w &&

            this.y + this.h >= pipe.y && this.prevY + this.h <= pipe.y + 5

        ) {

            this.y = pipe.y - this.h;

            this.velocityY = 0;

            isOnPipe = true;

            break;

        }

    }

    let isOnMovablePlatform = false;

    for (let movablePlatform of currentScene.movablePlatforms) {

        if (

            this.prevX + this.w > movablePlatform.x + 1 && this.prevX < movablePlatform.x + movablePlatform.w &&

            this.y + this.h >= movablePlatform.y && this.prevY + this.h <= movablePlatform.y + 5

        ) {

            this.y = movablePlatform.y - this.h;

            this.velocityY = 0;

            isOnMovablePlatform = true;

            break;

        }

    }

    if (isOnPipe || isOnPlatform || isOnMovablePlatform) {

        this.onGround = true;

        this.hasDoubleJumped = false;

    } 

    else if (!isPlayerOverCliff() && (this.y >= height - groundHeight + 14 - this.h || isOnPlatform || isOnPipe || isOnMovablePlatform)) {

      this.y = (isOnPlatform || isOnPipe || isOnMovablePlatform) ? this.y : height - groundHeight + 14 - this.h;

      this.velocityY = 0;

      if (!this.onGround) {

        this.onGround = true;

        this.hasDoubleJumped = false;  

      }

    } 

    else {

      this.onGround = false;

    }

​

    this.checkSceneTransition();

    this.x = constrain(this.x, 0 - this.w / 2, width - this.w / 2);

  }

  if(moving){

    this.frameCounter++;

    if(this.frameCounter >= 10){

      this.imageIndex = 1 - this.imageIndex;

      this.frameCounter = 0;

    }

    else{

      this.imageIndex = 0;

    }

  }

  checkSceneTransition(){

    let centerX = this.x + this.w / 2;

    if(inHiddenScene){

      if(centerX >= width && hiddenSceneIndex < hiddenMaxScenes - 1){

        hiddenSceneIndex++;

        this.x = - this.w / 2 + 1

        setupNextScene();

      }

      else if(centerX <= 0 && hiddenSceneIndex > 0){

        hiddenSceneIndex--;

        this.x = width - this.w / 2;

        setupNextScene();

      }

      else{

        if(hiddenSceneIndex === 0 && centerX <= 0){

         this.x = - this.w / 2; + 1

        }

        if(hiddenSceneIndex === hiddenMaxScenes - 1 && centerX >= width){

          this.x = width - this.w / 2;

        }

      }

    }

    else{

      if(centerX >= width && sceneIndex < maxScenes - 1){

        sceneIndex++;

        this.x = - this.w / 2 + 1

        setupNextScene();

      }

      if(centerX <= 0 && sceneIndex > 0){

        sceneIndex--;

        this.x = width - this.w / 2;

        setupNextScene();

      }

    }

  }

  display(){

    let imgToShow = this.imageIndex === 0 ? playerImg1 : playerImg2;

    if(!this.facingRight){

      push();

      scale(-1, 1);

      image(imgToShow, -this.x - this.w, this.y, this.w, this.h);

      pop();

    }

    else{

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

    }

  }

}

​

function drawSettings(){

  fill(50);

  textSize(32);

  text("Settings", width / 2, 50);

  textSize(24);

  text("Volume", width / 2, 150);

  text(volume, width / 2, 180);

  rect(width / 2 - 70, 170, 30, 30);

  rect(width / 2 + 40, 170, 30, 30);

  text("-", width / 2 - 55, 185);

  text("+", width / 2 + 55, 185);

  let controlLabels = ["Left", "Right", "Attack", "Jump", "Item", "Pause", "Use"];

  let keys = Object.values(controls);

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

    let y = 250 + i * 40;

    let displayText = changingKey === controlKeys[i] ? "Press any key..." : `${controlLabels[i]}: ${keys[i]}`;

    if(changingKey === controlKeys[i]){