p5-breakout/sketch.js

//VARIABLES

let cols = 13;
let rows = 6;
let grid;
let paddleWidth;
let paddleHeight;
let numBlocks = cols * rows;
let ballX;
let ballY;
let ballSpeedX;
let ballSpeedY;
let hit = false;
let hitTile = false;
let tileX;
let tileY;
let ballSpeed = 15;
let turn = 0;
let button;
let score = 0;
let a = 0;
let level = 0;

//FUNCTION TO MAKE A 2D ARRARY

function make2DArray(cols, rows) {
  let arr = new Array(cols);
  for (let i = 0; i < arr.length; i++) {
    arr[i] = new Array(rows);
  }
  return arr;
}

//SETUP WHICH MAKES A 2D ARRARY. CREATES TILE OBJECTS IN A GRID. AND COLORS ALL THE ROWS.

function setup() {
  createCanvas(windowWidth, windowHeight);
  lostGame() // CALLS THE lostGame() FUNCTION WHICH SETS UP THE ENTIRE GAME.
  
}

function draw() {
  background(0);
  for (let i = 0; i < grid.length; i++) {
    for (let j = 0; j < grid[i].length; j++) {
      grid[i][j].show();
      tileX = grid[i][j].x
      tileY = grid[i][j].y

    }
  }


  // MAKES THE BALL.

  fill(255)
  circle(ballX, ballY, width / 64)
  ballX = ballX + ballSpeedX;
  ballY = ballY + ballSpeedY;

  // BALL COLLISION DETECTION FOR WALLS.

  if (ballX < 0 || ballX > width) {
    ballSpeedX *= -1
  };

  if (ballY < 0) {
    ballSpeedY *= -1
  };


  // BALL COLLISION FOR TILES

  for (let i = 0; i < grid.length; i++) {
    for (let j = 0; j < grid[i].length; j++) {
      tileX = grid[i][j].x
      tileY = grid[i][j].y
      hitTile = collideRectCircle(tileX, tileY, width / 13, width / 64, ballX, ballY, width / 64);
      if (hitTile === true) {
        vec = createVector(random(-1, 1), random(0, 4));
        vec.normalize();
        ballSpeedX = vec.x * ballSpeed;
        ballSpeedY = vec.y * ballSpeed;
        // ballSpeedX *= -1;
        // ballSpeedY *= -1;
        grid[i].splice(j, 1)

        //ADDING SCORE WHEN BALL HITS TILES

        if (j >= 0 && j <= 6) {
          score += 6 - j
        }
        break;
      }
    }
  }


  // BALL COLLISION FOR LEFT AND RIGHT PADDLE

  hitLeft = collideRectCircle(mouseX, paddleY, width / 24, height / 64, ballX, ballY, width / 64);
  if (hitLeft === true) {
    vec = createVector(random(-1, 1), random(0, 4));
    vec.normalize();
    vec.setHeading(45)
    ballSpeedX = vec.x * -ballSpeed;
    ballSpeedY = vec.y * -ballSpeed;

  }

  hitRight = collideRectCircle(mouseX + width / 24, paddleY, width / 16, height / 64, ballX, ballY, width / 64);
  if (hitRight === true) {
    vec = createVector(random(-1, 1), random(0, 4));
    vec.normalize();
    vec.setHeading(90)
    ballSpeedX = vec.x * -ballSpeed;
    ballSpeedY = vec.y * -ballSpeed;
    
  }


  // PADDLE CONTROLS ALSO MAKES THE PADDLE.

  // if (keyIsDown(65) && paddleX > 0) {
  //   paddleX -= 10
  // };

  // if (keyIsDown(68) && paddleX < width - 150) {
  //   paddleX += 10
  // };
  // rectMode(CENTER)
  push()
  noStroke()
  fill(255);
  rect(mouseX, paddleY, width / 24, height / 64); //Left Paddle
  rect(mouseX + width / 24, paddleY, width / 24, height / 64); //Right Paddle
  rectMode(CORNER)
  pop()
  

  // SCORE KEEPING

 textSize(32)
  text(`Score: ${score}`, width / 1.5, height / 1.03)

  // WIN CONDITION

  if (level === 1 && grid.every(row => row.length == 0)) {
    winGame()
  } else if  (grid.every(row => row.length == 0)) {
    lostGame()
    level++
  }


  if (turn === 3) {
    score = 0
    turn = 0
    lostGame()
    
  }

  // LOSE CONDITION

  if (ballY > height) {
    turn++
    resetBall()
  };
  textSize(32)
  text(`Turn: ${turn}`, width / 4, height / 1.03)

  if (turn === 3) {
    button.show()
    textAlign(CENTER)
    text('You lose!', width / 2, height / 3)
    frameRate(0)
  }

  // SHOW WHAT STAGE YOU ARE ON
    if (level === 0) {
      textAlign(LEFT, CENTER)
      text('First Stage', width / 2.25, height / 1.03)
    } else if (level === 1) {
      text('Last Stage', width / 2.25, height / 1.03)
    }
}


function resetBall() {
  ballX = width / 2;
  ballY = height / 3;
}

function winGame() {
  level = 0
  button.show()
  textAlign(CENTER)
  text('You Won. Congratulations!', width / 2, height / 3)
  frameRate(0)
}


function lostGame() {
  frameRate(60)

  level = 0;

  if (!button) {
    button = createButton('Replay');
  }
  button.size(250);
  button.position(width / 2, height / 2);
  button.center();
  button.hide()
  button.mousePressed(lostGame);
  ballX = width / 2;
  ballY = height / 3;

  // SETTING THE STARTING VECTOR FOR THE BALL

  vec = createVector(random(-1, 1), random(0, 4));
  vec.normalize();
  randomHeading = floor(random(0, 4))
  if (randomHeading === 0) {
    heading = floor(random(30, 60))
  } else if (randomHeading === 1) {
    heading = floor(random(-30, -60))
  } else if (randomHeading === 2) {
    heading = floor(random(80, 100))
  } else {
    heading = floor(random(-80, -100))
  }
  angleMode(DEGREES)
  vec.setHeading(heading)
  ballSpeedX = vec.x * ballSpeed;
  ballSpeedY = vec.y * ballSpeed;


  // MAKING THE 2D ARRARY

  grid = make2DArray(cols, rows)

  for (let i = 0; i < grid.length; i++) {
    for (let j = 0; j < grid[i].length; j++) {
      grid[i][j] = new Tile(i, j);
      grid[i][j].colorRows('green');

    }

  }

  // COLORING ALL THE ROWS

  for (let n = 0; n < 6; n++) {
    let row = n;

    for (let v = 0; v < 13; v++) {
      let col = v;

      for (let gay of grid) {
        grid[row, col][row, 0].colorRows('red');
        grid[row, col][row, 1].colorRows('orange');
        grid[row, col][row, 2].colorRows('yellow');
        grid[row, col][row, 3].colorRows('green');
        grid[row, col][row, 4].colorRows('blue');
        grid[row, col][row, 5].colorRows('purple');
      }
    }
  }


  paddleX = width / 2 - width / 16;
  paddleY = height / 2 + 400;

}