let boneImage;

let sprites = [];

let direction = 1;

let step = 0;

let x;

let y;

let speed = 3;

let points = 0;

let gameOver = false;

let isGameStarted = false;

let gameLost = false;

​

let boneX, boneY; 

let boneSize = 50; 

let aspectRatio = 800 / 400; // Maintain aspect ratio of 800:400

​

function preload() {

  spritesheet = loadImage("skeleton.png"); // loading the skeleton spritesheet

  boneImage = loadImage("bone.png"); // Loading the bone image

}

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  adjustCanvasSize();

  imageMode(CENTER);

​

  let w = int(spritesheet.width / 9);

  let h = int(spritesheet.height / 4);

​

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

    sprites[j] = [];

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

      sprites[j][i] = spritesheet.get(i * w, j * h, w, h);

    }

  }

​

  resetGame(); // Initializing the game state

}

​

function draw() {

  if (!isGameStarted) {

    background(0);

    fill(255);

    textSize(24);

    textAlign(CENTER, CENTER);

    text("To move the skeleton, use the arrow keys.", width / 2, height / 2 - 40);

    text("If the skeleton touches the bone, you get points.", width / 2, height / 2 - 10);

    text("If the skeleton touches the edge, you lose.", width / 2, height / 2 + 20);

    text("To start the game, press the spacebar.", width / 2, height / 2 + 50);

    text("Press 'F' for fullscreen mode.", width / 2, height / 2 + 80);

​

    drawHomeButton();

    return;

  }

​

  if (gameOver) {

    background(0);

    fill(255);

    textSize(48);

    textAlign(CENTER, CENTER);

    if (gameLost) {

      text("YOU LOSE!", width / 2, height / 2);

    } else {

      text("YOU WIN!", width / 2, height / 2);

    }

    textSize(24);

    text("Press 'R' to replay", width / 2, height / 2 + 50);

​

    drawHomeButton();

    return;

  }

​

  // Game logic

  background('#3E3E3E');

​

  drawFloor();

​

  // Movement of the skeleton based on key pressed down

  if (keyIsDown(DOWN_ARROW)) {

    direction = 2;

    y += speed;

    step = (step + 1) % 9;

  }

​

  if (keyIsDown(LEFT_ARROW)) {

    direction = 1;

    x -= speed;

    step = (step + 1) % 9;

  }

​

  if (keyIsDown(RIGHT_ARROW)) {

    direction = 3;

    x += speed;

    step = (step + 1) % 9;

  }

​

  if (keyIsDown(UP_ARROW)) {

    direction = 0;

    y -= speed;

    step = (step + 1) % 9;

  }

​

  // Check if the skeleton touches the sides of the screen (lose condition)

  if (x < 0 || x > width || y < 0 || y > height) {

    gameOver = true;

    gameLost = true;

    return;

  }

​

  // Check if skeleton touches the bone

  if (dist(x, y, boneX, boneY) < boneSize / 2) {

    boneX = random(50, width - 50);

    boneY = random(50, height - 50);

    points += 1;

​

    if (points >= 10) {

      gameOver = true;

    }

  }

​

  // Draw the skeleton sprite

  image(sprites[direction][step], x, y);

​

  // Draw the bone

  drawBone(boneX, boneY);

​

  // Display the number of points

  fill(255);

  textSize(24);

  textAlign(RIGHT);

  text("Points: " + points, width - 20, 30);

​

  drawHomeButton();

}

​

// Function to reset the game

function resetGame() {

  points = 0;

  gameOver = false;

  gameLost = false;

  isGameStarted = false;

  x = width / 2;

  y = height / 2;

  boneX = random(50, width - 50);

  boneY = random(50, height - 50);

}

​

// Function to draw the bone

function drawBone(bx, by) {

  image(boneImage, bx, by, boneSize, boneSize);

}

​

// Function to draw the floor

function drawFloor() {

  for (let x1 = 0; x1 <= width; x1 += 100) {

    for (let y1 = 0; y1 <= height; y1 += 100) {

      noStroke();

      fill('#556B2F');

      square(x1, y1, 50);

    }

  }

​

  for (let x1 = 50; x1 <= width; x1 += 100) {

    for (let y1 = 50; y1 <= height; y1 += 100) {

      noStroke();

      fill('#556B2F');

      square(x1, y1, 50);

    }

  }

}

​

// Function to draw the "Home" button

function drawHomeButton() {

  fill(80, 120, 255);

  rect(20, height - 60, 100, 50);

​

  fill(255);

  textSize(20);

  textAlign(CENTER, CENTER);

  text("Home", 20 + 50, height - 60 + 25);

}

​

// Function to handle mouse presses

function mousePressed() {

  if (mouseX >= 20 && mouseX <= 120 && mouseY >= height - 60 && mouseY <= height - 10) {

    window.location.href = "index.html";

  }

}

​

// Function to handle key presses

function keyPressed() {

  if (!isGameStarted && key === ' ') {

    isGameStarted = true;

  }

​

  if (gameOver && key === 'r') {

    resetGame();

  }

​

  if (key === 'f') {

    let fs = fullscreen();

    fullscreen(!fs);

    adjustCanvasSize();

  }

}

​

// Function to adjust the canvas size and maintain aspect ratio

function windowResized() {

  adjustCanvasSize();

}

​

function adjustCanvasSize() {

  if (fullscreen()) {

    resizeCanvas(windowWidth, windowHeight);

  } else {

    let newWidth = windowWidth;

    let newHeight = windowWidth / aspectRatio;

​

    if (newHeight > windowHeight) {

      newHeight = windowHeight;

      newWidth = windowHeight * aspectRatio;

    }

​

    resizeCanvas(newWidth, newHeight);

  }

​

  // Update the skeleton and bone positions to be relative to the new canvas size

  x = width / 2;

  y = height / 2;

  boneX = random(50, width - 50);

  boneY = random(50, height - 50);

}

​