let speedLevel = 1; 

let isGameStarted = false; // To track if the game has started

let isPaused = false; // To track if the squares are paused

let originalPositions = []; // To store original positions of the squares

​

function setup() {

  createCanvas(800, 400);

  // squares array

  for (let x = 0; x <= width - 40; x += 50) {

    for (let y = 0; y <= height - 40; y += 50) {

      let square = new MovingSquare(x, y, 40);

      squares.push(square); 

      originalPositions.push({ x: x, y: y }); // Store the original position

    }

  }

}

​

function draw() {

  if (!isGameStarted) {

    // Display instructions screen if the game hasn't started

    background(0); 

    fill(255); 

    noStroke();

    textSize(24);

    textAlign(CENTER, CENTER);

    text("Press the mouse to move the squares.", width / 2, height / 2 - 40);

    text("Press the mouse again to change speed.", width / 2, height / 2);

    text("Press the spacebar to stop and reset squares.", width / 2, height / 2 + 40);

    return; // Wait for the game to start

  }

  background(0);

  // Move and display each square if not paused

  if (!isPaused) {

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

      squares[i].move();  // Move the square if needed

      squares[i].display(); // Draw the square

    }

  } else {

    // If paused, just display the squares without moving

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

      squares[i].display(); 

    }

  }

}

​

// Increase the speed level on mouse press 

function mousePressed() {

  if (!isGameStarted) {

    isGameStarted = true; // Start the game on first mouse press

    return;

  }

  if (!isPaused) {

    speedLevel++;

    if (speedLevel > 3) {

      speedLevel = 1; // Reset to speed level 1 after reaching level 3

    }

    // Assign speed based on speed level

    let speedRange = 1; // Default speed range

    if (speedLevel === 1) {

      speedRange = 3; // (-1, 1)

    } else if (speedLevel === 2) {

      speedRange = 5; // (-3, 3)

    } else if (speedLevel === 3) {

      speedRange = 10; // (-10, 10)

    }

    // Set the speed for all squares

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

      squares[i].setSpeed(random(-speedRange, speedRange), random(-speedRange, speedRange));

    }

  }

}

​

// Stop squares and return them to original positions on spacebar press

function keyPressed() {

  if (key === ' ') {

    if (!isPaused) {

      // Pause the movement and reset to original positions

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

        squares[i].resetPosition(originalPositions[i].x, originalPositions[i].y);

      }

      // Reset the game state (including showing the instruction screen)

      resetGame();

    }

    isPaused = !isPaused; // Toggle paused state

  }

}

​

// MovingSquare class

class MovingSquare {

  constructor(x, y, size) {

    this.x = x;

    this.y = y;

    this.size = size;

    this.speedX = 0; // Initial horizontal speed

    this.speedY = 0; // Initial vertical speed

  }

  // Method to set the speed of the square

  setSpeed(speedX, speedY) {

    this.speedX = speedX;

    this.speedY = speedY;

  }

  // Move the square based on its current speed

  move() {

    // Move the square

    this.x += this.speedX;

    this.y += this.speedY;

    // Bounce back when hitting the canvas edges

    if (this.x <= 0 || this.x + this.size >= width) {

      this.speedX *= -1; 

    }

    if (this.y <= 0 || this.y + this.size >= height) {

      this.speedY *= -1; 

    }

  }

  // Display the square on the canvas

  display() {

    noFill();

    let r = random(0, 255);

    let g = random(0, 255);

    let b = random(0, 255);

    stroke(r, g, b);

    strokeWeight(3);

    square(this.x, this.y, this.size);

  }

  // Reset the square to its original position

  resetPosition(x, y) {

    this.x = x;

    this.y = y;

    this.speedX = 0;

    this.speedY = 0;

  }

}

​

// Function to reset the game and bring it back to the instruction page

function resetGame() {

  speedLevel = 1; // Reset speed level

  isGameStarted = false; // Bring back to the instruction page

  isPaused = false; // Unpause if paused

}

​