Fixed tiles not breaking & misc other things

README.md

@@ -0,0 +1,7 @@
+# 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 = 12;
+let ballSpeed = 15;
 let turn = 0;
 let button;
 let score = 0;
@@ -77,41 +77,45 @@ 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 = createVector(random(-1, 1), random(0, 4));
-        // vec.normalize();
+        vec.normalize();
-        grid[i][j].hit = true;
+        ballSpeedX = vec.x * ballSpeed;
-        ballSpeedX *= -1;
+        ballSpeedY = vec.y * ballSpeed;
-        ballSpeedY *= -1;
+        // ballSpeedX *= -1;
+        // ballSpeedY *= -1;
+        grid[i].splice(j, 1)
 
         //ADDING SCORE WHEN BALL HITS TILES
 
-        if (j === 5) {
+        if (j >= 0 && j <= 6) {
-          score += 1
+          score += 6 - j
-        } 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
 
-  hit = collideRectCircle(mouseX, paddleY, width / 12, height / 64, ballX, ballY, width / 64);
+  // BALL COLLISION FOR LEFT AND RIGHT PADDLE
-  if (hit === true) {
+
+  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;
+    
   }
 
 
@@ -125,9 +129,14 @@ function draw() {
   //   paddleX += 10
   // };
   // rectMode(CENTER)
+  push()
+  noStroke()
   fill(255);
-  rect(mouseX, paddleY, width / 12, height / 64);
+  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
 
@@ -136,9 +145,9 @@ function draw() {
 
   // WIN CONDITION
 
-  if (level === 1 && grid.length === 0) {
+  if (level === 1 && grid.every(row => row.length == 0)) {
     winGame()
-  } else if  (grid.length === 0) {
+  } else if  (grid.every(row => row.length == 0)) {
     lostGame()
     level++
   }

tile.js

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