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){

      dx = -dx;

    } 

    if (dx < 0){

      dx = dx;

    } 

  }

  if (circle.y >= height - 20 && circle.x > moveMent + 50 && circle.x <= moveMent + paddleWidth) {

    dy = -dy; 

    if (dx > 0){

      dx = dx;

    } 

    if (dx < 0){

      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/50;

      dy = 3+score/50;

      paddleWidth -= score/10;

      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();

  }

}

​

function keyReleased(value) {

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

    rightPress = false;

  }

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

    leftPress = false;

  }

}

function restartText(){

  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;

  ball();

  drawBricks();

  circle.x = moveMent + 50;

    circle.y = 380;

    score = 0;

    lives = 3;

    dy = 3;

    // moveMent = 240;

  paddleWidth = 180; 

  moveMent = 240; 

    createBricks();

  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 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){

      // time = millis()/1000;

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

        gameFailureSound.play();

        gameState = false;

        // if (millis()/1000 >= time+5){

        //    gameFailureSound.stop();

        // }

      }

    }

    // gameFailureSound.stop();

    restartGame();

  }

​

  if (livesRestart && game){

    lostLifeText();

  }

  if (game) {

    scoreText();

    livesText();

    // goal();

    drawBricks();

    paddle();

  }

​

  endofGame();

}

​