README.md

@@ -1,7 +0,0 @@
-# p5-breakout
-The game Breakout made in JavaScript using p5.js.
-
-You can play it at this link below:
-
-https://preview.p5js.org/lunalcampbell/present/wm3vA1Ss4
-

sketch.js

@@ -14,7 +14,7 @@ let hit = false;
 let hitTile = false;
 let tileX;
 let tileY;
-let ballSpeed = 15;
+let ballSpeed = 12;
 let turn = 0;
 let button;
 let score = 0;
@@ -77,45 +77,41 @@ function draw() {
       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)
+        // vec = createVector(random(-1, 1), random(0, 4));
+        // vec.normalize();
+        grid[i][j].hit = true;
+        ballSpeedX *= -1;
+        ballSpeedY *= -1;
 
         //ADDING SCORE WHEN BALL HITS TILES
 
-        if (j >= 0 && j <= 6) {
-          score += 6 - j
+        if (j === 5) {
+          score += 1
+        } else if (j === 4) {
+          score += 2
+        } else if (j === 3) {
+          score += 3
+        } else if (j === 2) {
+          score += 4
+        } else if (j === 1) {
+          score += 5
+        } else if (j === 0) {
+          score += 6
         }
-        break;
+
       }
+      grid[i][j].deleteOnHit() // DELETES THE TILE ON HIT
     }
   }
 
+  // BALL COLLISION FOR PADDLE
 
-  // BALL COLLISION FOR LEFT AND RIGHT PADDLE
-
-  hitLeft = collideRectCircle(mouseX, paddleY, width / 24, height / 64, ballX, ballY, width / 64);
-  if (hitLeft === true) {
+  hit = collideRectCircle(mouseX, paddleY, width / 12, height / 64, ballX, ballY, width / 64);
+  if (hit === 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;
-    
   }
 
 
@@ -129,14 +125,9 @@ function draw() {
   //   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
+  rect(mouseX, paddleY, width / 12, height / 64);
   rectMode(CORNER)
-  pop()
-  
 
   // SCORE KEEPING
 
@@ -145,9 +136,9 @@ function draw() {
 
   // WIN CONDITION
 
-  if (level === 1 && grid.every(row => row.length == 0)) {
+  if (level === 1 && grid.length === 0) {
     winGame()
-  } else if  (grid.every(row => row.length == 0)) {
+  } else if  (grid.length === 0) {
     lostGame()
     level++
   }

tile.js

@@ -8,6 +8,7 @@ class Tile {
         this.colors = colors
         this.x = i * width / 13;
         this.y = j * width / 64;
+        this.hit = false;
         this.score = score
     }
 
@@ -21,4 +22,10 @@ class Tile {
         this.colors = colors
         return colors;
     }
+
+    deleteOnHit() {
+        if (this.hit) {
+            grid[this.i].splice(this.j, 1)
+        }
+    }
 }