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;

    }

  }

}