Add files via upload

ball.js

@@ -1,3 +1,4 @@
+
 class Ball {
     constructor(elem,speedX,speedY,x,y,diameter) {
         //use noise to change speed on collision 
@@ -60,16 +61,31 @@ class Ball {
     }
 
     checkCollision(){
-        if (this._x + this._diameter/2 > window.innerWidth || this._x < this._diameter/2) this._speedX*=-1;
-        if (this._y < this._diameter/2) this._speedY*=-1;
+        if (this._x + this._diameter/2 > window.innerWidth || this._x < this._diameter/2) {this._speedX*=-1; ding.play()}
+
+        if (this._y < this._diameter/2) {this._speedY*=-1;ding.play()}
 
         //checks slider collision
-        if (this._y + this._diameter/2 > window.innerHeight - 50 -sliderHeigth && this._x - this._diameter/2 < slider.getBoundingClientRect().right && this._x + this._diameter/2 > slider.getBoundingClientRect().left && this._y < window.innerHeight - 100) this._speedY*=-1;
+        if (this._y + this._diameter/2 > window.innerHeight - 50 -sliderHeigth && this._x - this._diameter/2 < slider.getBoundingClientRect().right && this._x + this._diameter/2 > slider.getBoundingClientRect().left && this._y < window.innerHeight - 100) {
+                    ding.play()
+
+            if (this._x < (slider.getBoundingClientRect().right+slider.getBoundingClientRect().left)/2 && Math.abs(this._speedX) === this._speedX) {
+                this._speedY*=-1;
+                this._speedX*=-1;
+            } else if (this._x > (slider.getBoundingClientRect().right+slider.getBoundingClientRect().left)/2 && Math.abs(this._speedX) === this._speedX * -1) {
+                this._speedY*=-1;
+                this._speedX*=-1;
+            } else if (this._x > (slider.getBoundingClientRect().right+slider.getBoundingClientRect().left)/2 && Math.abs(this._speedX) === this._speedX) {
+                this._speedY*=-1;
+            } else if (this._x < (slider.getBoundingClientRect().right+slider.getBoundingClientRect().left)/2 && Math.abs(this._speedX) === this._speedX * -1) {
+                this._speedY*=-1;
+            }
+        }
 
         for (let y = 0; y < wall.length;y++){
             for (let x = 0; x < wall[y].length;x++){
                 if (wall[y][x].status != brickStatuses.destroyed) {
-                    wall[y][x].checkCollisionSides()
+                    wall[y][x].checkCollisionSides(x,y)
                 }
             }
         }

bricks.js

@@ -12,15 +12,21 @@ const sliderHeigth = 50;
 const brickWidth = 100;
 let numberOfColumns;
 
-
+let ding;
+function preload(){
+    ding = loadSound("noise.ogg")
+}
 
 const brickStatuses = {
     destroyed: "destroyed",
     active: "active",
     red: "red",
     yellow: "yellow"
 }
-
+document.addEventListener("contextmenu",e => {
+    e.preventDefault();
+    document.getElementById("sound").style.visibility = "hidden"
+})
 
 
 class Brick {
@@ -29,6 +35,7 @@ class Brick {
         this._y = y;    
         this._element = elem;
         this._status = status;
+        this._cooldown = false;
     }
 
     get x(){
@@ -94,38 +101,44 @@ class Brick {
         return this._bottomLeft;;
     }
 
-    checkCollisionSides(){
+    checkCollisionSides(x,y){
         if (
-            // ball.x + ball.diameter/2 > this._topRight._x &&
-            // ball.x - ball.diameter/2 < this._topLeft._x && 
-            // ball.y+ ball.diameter/2 > this._bottomLeft._y &&
-            // ball.y - ball.diameter/2 < this._topLeft._y
             ball.x - ball.diameter/2< this._topRight.x &&
             ball.x + ball.diameter/2> this._topLeft.x && 
             ball.y - ball.diameter/2< this._bottomLeft.y &&
-            ball.y  + ball.diameter/2> this._topLeft.y
+            ball.y  + ball.diameter/2> this._topLeft.y &&
+            this._cooldown === false
         )
     {
-        console.log('test')
-
+        ding.play()
         if (this.status === brickStatuses.active)this.status = brickStatuses.yellow;
         else if (this.status === brickStatuses.yellow)this.status = brickStatuses.red;
         else if (this.status === brickStatuses.red)this.status = brickStatuses.destroyed;
-        console.log(this.elementclassList)
+
 
-        if (ball.x < this._topLeft.x  ||
-        ball.x > this._topRight.x ){
-            console.log("colx")
-            ball.speedX *= -1;
-        }
+
         if (
             ball.y < this._topLeft.y ||
-            ball.y  > this._bottomLeft.y /2
+            ball.y  > this._bottomLeft.y  
         ) {
             console.log("coly")
             ball.speedY *= -1;
         }
+        if (ball.x < this._topLeft.x  ||
+        ball.x > this._topRight.x ){
+            console.log("colx")
+            ball.speedX *= -1;
+        }
 
+
+        y = wall.length;
+        x = wall[y].length;
+        //`y = wall.length;
+
+        this._cooldown = true;
+        setTimeout(() => {
+            this._cooldown = false;
+        }, 100);
     }
 
     }
@@ -164,7 +177,7 @@ setInterval(()=>{
 },500)
 
 function setup(){
-    ball = new Ball(document.getElementById("ball"),6,6,window.innerWidth/2,window.innerHeight*2/3,30)
+    ball = new Ball(document.getElementById("ball"),8,8,window.innerWidth/2,window.innerHeight*2/3,30)
 
     for (let r = 0; r < 4; r++) {
         const row = [];
@@ -184,8 +197,10 @@ function setup(){
 
 setInterval(() => {
     slider.style.left = `${mouseX-sliderWidth/2}px`;
+
     ball.updateBallPosition();
     ball.checkCollision();  
-
 }, 1000/60);
 
+
+

index.html

@@ -5,11 +5,13 @@
         <link rel="stylesheet" type="text/css" href="style.css">
         <title>Atari Breakout</title>
         <script src="p5.js"></script>
+        <script src="p5.sound.min.js"></script>
     </head>
 
 
     <body>
         <div id="canvas">
+            <div id="sound">Right Click to enable sound</div>
             <div id="wall"></div>
             <div id="ball"></div>
             <div id="slider"> </div>