let cover;

let button;

​

// Define the board size and spacing

const rows = 10;

const cols = 10;

const cellSize = 60;

​

// Define the board layout

const board = [

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0,

  0, 0, 0, 0, 0, 0, 0, 0, 0, 0

];

​

​

function drawBoard() {

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

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

      let x = j * cellSize;

      let y = i * cellSize;

      stroke(0);

      noFill();

      rect(x, y, cellSize, cellSize);

      fill(0);

      textSize(16);

      text(i * cols + j + 1, x + cellSize / 2, y + cellSize / 2);

    }

  }

}

​

class Player 

{

  constructor(player_color)

  {

    this.player_position = 0;

    this.player_color = player_color;

    this.player_x = cellSize/2;

    this.player_y = cellSize/2;

  }

  movement(dice_roll) 

  {

    this.player_position = this.player_position + dice_roll;

    this.player_x = (this.player_position % cols) * cellSize + (cellSize/2);

    this.player_y = floor(this.player_position / cols) * cellSize + (cellSize/2);

  }

  display()

  {

    fill(this.player_color);

    ellipse(this.player_x, this.player_y, cellSize/2, cellSize/2);

  }

}

​

​

function preload() {

  cover = loadImage('Snake and Ladders.png');

  button = loadImage('back.png');

}

​

function coverPage(){

  image(cover, 0, 0);

  if(mouseX >=170 && mouseX<= 405 && mouseY>=385 && mouseY<=460)

  { // play button hover effect

     noStroke();

    fill(255, 0, 0,100);

  rect(170, 385, 235, 80);

  }

  if(mouseX >=20 && mouseX<= 580 && mouseY>=490 && mouseY<=570)

  { // Instruction button hover effect

     noStroke();

    fill(255, 0, 0,100);

  rect(20, 488, 560, 83);

  }

}

​

function mouseClicked() {

  if(mouseX >=170 && mouseX<= 405 && mouseY>=385 && mouseY<=460)

  {

     gameState = 'play';

     if (gameState == 'play') {

      playGame();

     }

  }

  else if(mouseX >=20 && mouseX<= 580 && mouseY>=490 && mouseY<=570)

  {

     gameState = 'instructions';

        if (gameState == 'instructions') {

      drawInstructions();

  }

  }

  else if(mouseX >=30 && mouseX<= 90 && mouseY>=30 && mouseY<=100) // back button in instructions

  {

     gameState = 'cover';

     if (gameState == 'cover') {

     coverPage();

  }

  }

}

​

function drawInstructions(){

  background(0);

  image(button, 10, 10);

}

​

let color1 = [255,0,0,100];

let player1 = new Player(color1);

let count = 0;

​

function playGame(){

  drawBoard();

  player1.display();

}

​

function setup() {

  createCanvas(cellSize * cols, cellSize * rows);

  textAlign(CENTER, CENTER);

  textSize(32);

  frameRate(1);

}

​

function key

​

function draw() {

  background(220);

  if (gameState == 'cover') {

    coverPage();

  } else if (gameState == 'play') {

    playGame();

  } else if (gameState == 'instructions') {

    drawInstructions();

  }

  // fill(0);

  // text("(" + mouseX + ", " + mouseY + ")", mouseX, mouseY);

  // stroke(0);

  // noFill();

}