let gameState = true;

let time;

let paddleIMG;

let ballIMG;

let paddleWidth = 180;

let moveMent = 240;

let rightPress = false;

let leftPress = false;

let game = true;

let dx = 3;

let dy = 3;

let score = 0;

let lives = 3;

let livesRestart = false;

let bricks = [];

let brickColors = [

  "#008d8c",

  "#009c8f",

  "#23aa8f",

  "#3fb78d",

  "#5bc489",

  "#77d183",

  "#95dd7d",

  "#b5e877",

];

​

function BackGround() {

  let m = 500;

  let topR = 255 * noise(frameCount / m);

  let topG = 255 * noise(1000 + frameCount / m);

  let topB = 255 * noise(2000 + frameCount / m);

  let bottomR = 255 * noise(3000 + frameCount / m);

  let bottomG = 255 * noise(4000 + frameCount / m);

  let bottomB = 255 * noise(5000 + frameCount / m);

​

  let topColor = color(topR - 100, topG - 100, topB - 105);

  let bottomColor = color(bottomR, bottomG, bottomB);

​

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

    let lineColor = lerpColor(topColor, bottomColor, y / height);

​

    stroke(lineColor);

    line(0, y, width, y);

  }

}

​

let circle = {

  x: moveMent + 50,

  y: 380,

  radius: 30,

};

​

function setup() {

  frameRate(60);

  createCanvas(600, 400);

  createBricks();

  paddleIMG = loadImage("assets/paddle.png");

  ballIMG = loadImage("assets/ball.png");

  goalIMG = loadImage("assets/goal2.png");

  collisonSound = loadSound("sounds/collide.mp3");

  gameOverSound = loadSound("sounds/gameOver.mp3");

  gameWinSound = loadSound("sounds/gameWin.mp3");

  gameFailureSound = loadSound("sounds/gameFailure.mp3");

}

​

function paddle() {

  stroke("black");

  fill("#66a678");

  image(paddleIMG, moveMent, 385, paddleWidth, 15);

​

  if (rightPress && moveMent < width - paddleWidth) {

    moveMent += 10;

  }

  if (leftPress && moveMent > 0) {

    moveMent += -10;

  }

}

​

function ball() {

  noStroke();

  // ellipse(circle.x, circle.y, circle.radius, circle.radius);

  image(

    ballIMG,

    circle.x - 23,

    circle.y - 22,

    circle.radius + 5,

    circle.radius + 5

  );

  if (circle.y <= 0) {

    dy = -dy;

    score++;

  }

  if (

    circle.y >= height - 20 &&

    circle.x > moveMent &&

    circle.x <= moveMent + 50

  ) {

    dy = -dy;

    if (dx > 0) {

      // console.log("im changing");

      dx = -dx;

    }

    if (dx < 0) {

      // console.log("im changingggg");

      dx = dx;

    }

  }

  if (

    circle.y >= height - 20 &&

    circle.x > moveMent + 50 &&

    circle.x <= moveMent + paddleWidth

  ) {

    dy = -dy;

    if (dx > 0) {

      // console.log("im changingdddggg");

      dx = dx;

    }

    if (dx < 0) {

      // console.log("im changinggggfffff");

      dx = dx;

    }

  }

  if (circle.x >= width - 20 || circle.x <= circle.radius / 2) {

    dx = -dx;

  }

​

  bricks.forEach((item, index) => {

    if (checkCollisionBottom(circle, item)) {

      dy = -dy;

      score++;

      dx = 3 + score / 30;

      dy = 3 + score / 30;

      paddleWidth -= 1; 

      collisonSound.play();

      bricks.splice(index, 1);

    }

  });

​

  if (circle.y > height) {

    lives--;

    livesRestart = true;

    if (lives === 0) game = false;

  }

  circle.x += dx;

  circle.y += dy;

}

​

function createBricks() {

  let rows = 8;

  let cols = 10;

  let brickWidth = width / cols;

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

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

      let brick = {

        x: i * 58 + 10,

        y: j * 12 + 30,

        w: 57,

        h: 10,

        color: brickColors[j],

      };

      bricks.push(brick);

    }

  }

}

​

function drawBricks() {

  bricks.forEach((brick) => {

    fill(brick.color);

    rect(brick.x, brick.y, brick.w, brick.h);

  });

}

​

function keyPressed(value) {

  if (value.key === "ArrowRight") {

    rightPress = true;

  }

  if (value.key === "ArrowLeft") {

    leftPress = true;

  }

  if (value.keyCode === 32 && livesRestart) {

    livesRestart = false;

    circle.x = moveMent + 50;

    circle.y = 380;

  }

  if (value.keyCode === 32 && !game) {

    game = true;

    circle.x = moveMent + 50;

    circle.y = 380;

    score = 0;

    lives = 3;

    dy = -3;

    moveMent = 250;

    createBricks();

  }

   if (keyCode == 82) {

    restartGame();

  }

}

​

function keyReleased(value) {

  if (value.key === "ArrowRight") {

    rightPress = false;

  }

  if (value.key === "ArrowLeft") {

    leftPress = false;

  }

}

​

function restartText() {

  // BackGround();

  fill("#FFEEEE");

  textAlign(CENTER);

  noStroke();

  textStyle(BOLD);

  textSize(38);

  text("GAME OVER", 300, 170);

  textSize(28);

  text("Final score: " + score, 300, 200);

  textSize(18);

  text("Press SpaceBar to restart game", 300, 225);

}

​

function restartGame() {

  BackGround();

  game = true;

  livesRestart = false;

  ball();

  circle.x = moveMent + 50;

  circle.y = 380;

  score = 0;

  lives = 3;

  dy = 3;

  dx = 3;

  paddleWidth = 180;

  moveMent = 240;

  createBricks();

  drawBricks();

  // restartText();

  console.log("its me ");

}

​

function lostLifeText() {

  fill("#FFEEEE");

  textAlign(CENTER);

  noStroke();

  textStyle(BOLD);

  textFont("Baloo");

  textSize(36);

  text("You lost a life", 300, 170);

  textSize(24);

  text("You now have " + lives + " lives remaining", 300, 200);

  textSize(18);

  text("Press SpaceBar to resume the game", 300, 225);

  if (!gameOverSound.isPlaying()) {

    gameOverSound.play();

  }

}

​

function scoreText() {

  fill("#FFEEEE");

  textStyle(BOLD);

  textAlign(CENTER);

  noStroke();

  textSize(18);

  text("Score: " + score, 555, 20);

}

​

function livesText() {

  textStyle(BOLD);

  textAlign(CENTER);

  noStroke();

  textSize(18);

  text("Lives: " + lives, 40, 20);

}

​

function goal() {

  image(goalIMG, 100, 3, 400, 20);

}

​

function checkCollisionBottom(ball, brick) {

  if (

    ball.y - 5 <= brick.y + 12 &&

    ball.x + 5 >= brick.x &&

    ball.x - 5 <= brick.x + 58 &&

    ball.y + 5 >= brick.y

  ) {

    return true;

  }

}

​

function startScreen() {

  fill(255);

  textFont("Baloo");

  textSize(22);

  textAlign(CENTER);

  text("WELCOME TO MY SOCEROO GAME", width / 2, height / 2);

  text("Click to Start", width / 2, height / 2 + 27);

  textSize(16);

  text(

    "Use the left and right arrow key to move the paddle and destroy the bricks!",

    width / 2,

    height / 2 + 70

  );

}

​

function endofGame() {

  if (bricks === undefined || bricks.length == 0) {

    BackGround();

    fill(255);

    textFont("Baloo");

    textSize(22);

    textAlign(CENTER);

    text("CONGRATULATIONS!! YOU FINISDHED THE GAME", width / 2, height / 2);

    text("Press SpaceBar to restart game", width / 2, height / 2 + 20);

​

    if (gameWinSound.isPlaying()) {

      gameWinSound.stop();

    } else {

      gameWinSound.play();

    }

  }

}

​

function mousePressed() {

  StatusScreen = 1;

  // restartGame();

}

​

function draw() {

  // background('#2a4858');

  BackGround();

  startScreen();

  if (StatusScreen == 1) {

    BackGround();

    if (game && !livesRestart) {

      ball();

    }

  }

​

  if (!game && livesRestart) {

    if (gameState) {

      if (gameState && !gameFailureSound.isPlaying()) {

        gameFailureSound.play();

        gameState = false;

      }

    }

    restartText();

    //restartGame();

  }

​

  if (livesRestart && game) {

    lostLifeText();

  }

​

  if (game) {

    scoreText();

    livesText();

    drawBricks();

    paddle();

  }

​

  endofGame();

}

​