let food;

let cols;

let rows;

let buttons;

let score = 0;

let pause = false;

let gameOver = false;

let gameStarted = false;

let myFont;

let winWidth = 400;

let winHeight = 300;

let scl = 20;

let fps = 5;

let scoreSpan;

​

​

​

function setup() {

  // Create the canvas (adjust width and height as needed)

  let canvas = createCanvas(winWidth, winHeight);

​

  // Create the game boy emulator container

  let gameBoyEmulator = createDiv();

  gameBoyEmulator.id("game-boy-emulator");

​

  // Create the game container

  let gameContainer = createDiv();

  gameContainer.id("game-container");

​

  // Create the score container

  let scoreContainer = createDiv("Score: ");

  scoreContainer.id("score-container");

  scoreSpan = createP("0");

  // scoreSpan.id("score");

  // scoreContainer.child(scoreSpan);

  // scoreContainer.style("position", "absolute");

  // scoreContainer.style("margin-left", "340px");

  // scoreContainer.style("color", "#fff");

  // scoreContainer.style("margin-top", "5px");

​

​

​

  // Create the game boy text

  let gameBoyText = createDiv("GameBoy");

  gameBoyText.id("game-boy-text");

  // gameBoyText.style("margin", "10px 145px");

  // gameBoyText.style("font-size", "25px");

  // gameBoyText.style("color", "white");

  // gameBoyText.style("background-color", "#0077b6");

  // gameBoyText.style("padding", "5px");

  // gameBoyText.style("border-radius", "5px");

​

  // Create the button container

let buttonContainer = createDiv();

buttonContainer.id("button-container");

​

// Create the arrow buttons container

let arrowButtons = createDiv();

arrowButtons.id("arrow-buttons");

​

// Create arrow buttons

// let upButton = createButton("▲");

// upButton.class("button navigation-button");

// upButton.id("up");

// upButton.style("color", "white");

// upButton.style("background-color", "red");

// upButton.style("width", "40px"); // Set width

// upButton.style("height", "40px"); // Set height

// arrowButtons.child(upButton);

// upButton.style("margin-bottom", "10px"); // Add spacing

// upButton.style("border-radius", "5px"); // Add curved edges

​

let leftRightContainer = createDiv();

​

// // Create the left button

// let leftButton = createButton('◀').class('button navigation-button').id('left');

// leftButton.style('color', 'white');

// leftButton.style('background-color', 'red');

// leftButton.style("width", "40px"); // Set width

// leftButton.style("height", "40px"); // Set height

// leftButton.style("margin-right", "30px"); // Add spacing

// leftButton.style("border-radius", "5px"); // Add curved edges

// leftRightContainer.child(leftButton);

​

​

// // Create the right button

// let rightButton = createButton('▶').class('button navigation-button').id('right');

// rightButton.style('color', 'white');

// rightButton.style('background-color', 'red');

// rightButton.style("width", "40px"); // Set width

// rightButton.style("height", "40px"); // Set height

// rightButton.style("margin-left", "5px"); // Add spacing

// rightButton.style("border-radius", "5px"); // Add curved edges

// leftRightContainer.child(rightButton);

​

// arrowButtons.child(leftRightContainer);

​

// let downButton = createButton("▼");

// downButton.class("button navigation-button");

// downButton.id("down");

// downButton.style("color", "white");

// downButton.style("background-color", "red");

// downButton.style("width", "40px"); // Set width

// downButton.style("height", "40px"); // Set height

// downButton.style("margin-top", "10px"); // Add spacing

// downButton.style("border-radius", "5px"); // Add curved edges

// arrowButtons.child(downButton);

​

// Create the action buttons container

let actionButtons = createDiv();

actionButtons.id("action-buttons");

​

// // Create action buttons

// let playButton = createButton("▶");

// playButton.class("button");

// playButton.id("play");

// playButton.style("background-color", "blue");

// playButton.style("color", "white");

// playButton.style("width", "60px"); // Set width

// playButton.style("height", "60px"); // Set height

// playButton.style("font-size", "24px"); // Set height

// playButton.style("border-radius", "50%"); // Make it a circle

// playButton.style("margin-right", "10px"); // Add spacing

// actionButtons.child(playButton);

​

// let pauseButton = createButton("❚❚");

// pauseButton.class("button");

// pauseButton.id("pause");

// pauseButton.style("background-color", "blue");

// pauseButton.style("color", "white");

// pauseButton.style("width", "60px"); // Set width

// pauseButton.style("height", "60px"); // Set height

// pauseButton.style("font-size", "24px"); // Set font size

// pauseButton.style("border-radius", "50%"); // Make it a circle

// actionButtons.child(pauseButton);

​

  // Set styles for the game boy emulator container

  gameBoyEmulator.style("background-color", "#8b8b8b");

  gameBoyEmulator.style("border", "10px solid #000");

  gameBoyEmulator.style("border-radius", "10px");

  gameBoyEmulator.style("padding", "20px");

  gameBoyEmulator.style("box-shadow", "0 0 20px rgba(0, 0, 0, 0.8)");

​

  // Set styles for the button container

  buttonContainer.style("display", "flex");

  buttonContainer.style("align-items", "center");

  buttonContainer.style("justify-content", "space-between");

  buttonContainer.style("margin-top", "20px");

​

  // Set styles for the arrow buttons container

  arrowButtons.style("display", "flex");

  arrowButtons.style("flex-direction", "column");

  arrowButtons.style("align-items", "center");

​

  // Set styles for the action buttons container

  actionButtons.style("display", "flex");

  actionButtons.style("align-items", "center");

​

  // Add elements to their respective containers

  scoreContainer.child(scoreSpan);

  gameContainer.child(scoreContainer);

  gameContainer.child(canvas);

  buttonContainer.child(arrowButtons);

  buttonContainer.child(actionButtons);

​

  // Add containers to the main container

  gameBoyEmulator.child(gameContainer);

  gameBoyEmulator.child(gameBoyText);

  gameBoyEmulator.child(buttonContainer);

​

  // Add the gameBoyEmulator to the sketch

  select("body").child(gameBoyEmulator); //add this to first tutorial under gameBoyEmulator

//   setup2();

}

​

// function setup2() {

//   var myCanvas = createCanvas(winWidth, winHeight);

//   myCanvas.parent("game-container");

//   frameRate(fps);

//   cols = floor(width / scl);

//   rows = floor(height / scl);

​

//   s = new Snake();

//   food = new Food();

//   food.pickFoodLocation(); 

​

//   // Add event listeners for button clicks

//   document.getElementById("down").addEventListener("click", function () {

//     clickArrow(DOWN_ARROW);

//   });

//   document.getElementById("left").addEventListener("click", function () {

//     clickArrow(LEFT_ARROW);

//   });

//   document.getElementById("right").addEventListener("click", function () {

//     clickArrow(RIGHT_ARROW);

//   });

//   document.getElementById("play").addEventListener("click", function () {

//     gameStarted = true;

//     pause = false;

//      if (gameOver) {

//       s.reset();

//       gameOver = false;

//       loop(); // Restart the game loop

//   }

//   });

//   document.getElementById("pause").addEventListener("click", function () {

//     pause = true;

//   });

//   document.getElementById("up").addEventListener("click", function () {

//     clickArrow(UP_ARROW);

//   });

​

//   // Add keyboard event listeners

//   document.addEventListener("keydown", function (event) {

//     switch (event.keyCode) {

//       case 38: // Up arrow key

//         clickArrow(UP_ARROW);

//         break;

//       case 40: // Down arrow key

//         clickArrow(DOWN_ARROW);

//         break;

//       case 37: // Left arrow key

//         clickArrow(LEFT_ARROW);

//         break;

//       case 39: // Right arrow key

//         clickArrow(RIGHT_ARROW);

//         break;

//     }

//   });

// }

​

function draw() {

  background(51);

​

//   if (!gameStarted) {

//     displayStartMessage();

//     return; // Skip the rest of the draw function if the game hasn't started

//   }

​

//   if (!pause) {

//     s.update();

//   }

//   s.show();

//   if (s.death()) {

//     gameOver = true;

//     s.reset();

//   }

​

//   if (s.eat(food)) {

//     food.pickFoodLocation();

//   }

​

//   fill(200, 0, 0);

//   rect(food.x, food.y, scl, scl);

//   textSize(32);

//   console.log("Score:", score);

//   scoreSpan.innerHTML = score;

//   document.querySelector("#score").innerHTML = score;

//   if (gameOver) {

//     background(0);

//     textSize(50);

//     textAlign(CENTER);

//     fill(255, 0, 0);

//     // textFont(myFont);

//     text("Game Over", width / 2, height / 2);

//     textSize(14);

//     text("click Play to Restart", width / 2, height / 2 + 50);

//     noLoop();

//   }

}

​

// function displayStartMessage() {

//   textSize(16);

//   textAlign(CENTER);

//   fill(255, 0, 0);

//   // textFont(myFont);

//   text("Press Start to Play", width / 2, height / 2);

// }

​

// function clickArrow(keyClicked) {

//   switch (keyClicked) {

//     case UP_ARROW:

//       if (!s.ySpeed) {

//         s.dir(0, -1);

//       }

//       break;

//     case DOWN_ARROW:

//       if (!s.ySpeed) {

//         s.dir(0, 1);

//       }

//       break;

//     case RIGHT_ARROW:

//       if (!s.xSpeed) {

//         s.dir(1, 0);

//       }

//       break;

//     case LEFT_ARROW:

//       if (!s.xSpeed) {

//         s.dir(-1, 0);

//       }

//       break;

//   }

// }

​

// class Cell {

//   x = 0;

//   y = 0;

//   constructor(x, y) {

//     this.x = x;

//     this.y = y;

//   }

// }

​

// class Food {

//   x = 0;

//   y = 0;

​

//   pickFoodLocation() {

//     this.x = scl * floor(random(cols));

//     this.y = scl * floor(random(rows));

//   }

// }

​

// class Snake {

//   constructor() {

//     this.reset();

//   }

​

//   reset() {

//     this.x = (scl * cols) / 2;

//     this.y = (scl * rows) / 2;

​

//     this.xSpeed = 1;

//     this.ySpeed = 0;

​

//     this.total = 0;

//     this.tail = [];

//   }

​

//   update() {

//     if (this.total === this.tail.length) {

//       for (let i = 0; i < this.total - 1; i++) {

//         this.tail[i] = this.tail[i + 1];

//       }

//     }

//     this.tail[this.total - 1] = new Cell(this.x, this.y);

​

//     this.x = this.x + this.xSpeed * scl;

//     this.y = this.y + this.ySpeed * scl;

​

//     if (this.x === width || this.x < 0) {

//       switch (this.xSpeed) {

//         case 1:

//           this.x = 0;

//           break;

//         case -1:

//           this.x = width;

//           break;

//       }

//     }

​

//     if (this.y === height || this.y < 0) {

//       switch (this.ySpeed) {

//         case 1:

//           this.y = 0;

//           break;

//         case -1:

//           this.y = height;

//           break;

//       }

//     }

​

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

//     this.y = constrain(this.y, 0, height - scl);

//   }

​

//   show() {

//     fill(255);

//     rect(this.x, this.y, scl, scl);

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

//       rect(this.tail[i].x, this.tail[i].y, scl, scl);

//     }

//   }

​

//   dir(xdir, ydir) {

//     // Check if the new direction is opposite of the current direction

//     if (

//       (xdir === 1 && this.xSpeed === -1) ||

//       (xdir === -1 && this.xSpeed === 1) ||

//       (ydir === 1 && this.ySpeed === -1) ||

//       (ydir === -1 && this.ySpeed === 1)

//     ) {

//       gameOver = true;

//       console.log("Game Over - Opposite Direction");

//       return;

//     }

//     this.xSpeed = xdir;

//     this.ySpeed = ydir;

//   }

​

//   eat(eatfood) {

//     let d = dist(this.x, this.y, eatfood.x, eatfood.y);

//     if (d < 1) {

//       this.total++;

//       score += 10; // Increment the score by 10 points

//     }

//     return d < 1;

//   }

​

//   death() {

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

//       let pos = this.tail[i];

//       let d = dist(this.x, this.y, pos.x, pos.y);

//       if (d < 1) return true;

//     }

//   }

// }