Upload files to "/"

script.js

@@ -3,8 +3,12 @@ let ctx = canvas.getContext("2d");
 let score = 0;
 let running = false;
 let ball, paddle, bricks, rows, cols, speed;
+const brickColors = ["#FF5733", "#33FF57", "#3357FF", "#FF33F5", "#33FFF5", "#F5FF33"]; 
+
 let hitSound = new Audio("hit.wav");   
 let loseSound = new Audio("lose.wav"); 
+let wallSound = new Audio("wall.wav"); 
+let winSound = new Audio("win.wav"); 
 
 function startGame(){
     score = 0;
@@ -22,7 +26,8 @@ function startGame(){
 
     for(let r=0;r<rows;r++){
         for(let c=0;c<cols;c++){
-            bricks.push({ x: c*50+30, y: r*20+30, w:40, h:15, hit:false });
+            let color = brickColors[r % brickColors.length]; 
+            bricks.push({ x: c*50+30, y: r*20+30, w:40, h:15, hit:false, color: color });
         }
     }
     requestAnimationFrame(loop);
@@ -32,9 +37,10 @@ function loop(){
     if(!running) return;
     ctx.clearRect(0,0,480,320);
 
-    ctx.fillStyle = "white";
+    ctx.fillStyle = "#FFCC00"; 
     ctx.fillRect(paddle.x, 300, paddle.w, paddle.h);
 
+    ctx.fillStyle = "#00FF7F"; 
     ctx.beginPath();
     ctx.arc(ball.x, ball.y, ball.r, 0, Math.PI*2);
     ctx.fill();
@@ -42,12 +48,21 @@ function loop(){
     ball.x += ball.dx;
     ball.y += ball.dy;
 
+    if(ball.x < ball.r || ball.x > 480-ball.r || ball.y < ball.r){
         if(ball.x < ball.r || ball.x > 480-ball.r) ball.dx *= -1;
-    if(ball.y < ball.r) ball.dy *= -1;
+        if (ball.y < ball.r) ball.dy *= -1; 
+        
+        wallSound.currentTime = 0;
+        wallSound.play();
+    }
 
     if(ball.y > 294 && ball.x > paddle.x && ball.x < paddle.x+paddle.w){
+        let deltaX = ball.x - (paddle.x + paddle.w/2);
+        ball.dx = deltaX * 0.1;
         ball.dy *= -1;
-        hitSound.play();
+        
+        wallSound.currentTime = 0; 
+        wallSound.play();
     }
 
     bricks.forEach(b =>{
@@ -56,15 +71,31 @@ function loop(){
             ball.dy *= -1;
             score += 10;
             document.getElementById("score").textContent = score;
+            hitSound.currentTime = 0; 
             hitSound.play();
         }
     });
 
     bricks.forEach(b =>{
-        if(!b.hit){ ctx.fillRect(b.x,b.y,b.w,b.h); }
+        if(!b.hit){ 
+            ctx.fillStyle = b.color;
+            ctx.fillRect(b.x,b.y,b.w,b.h); 
+            ctx.strokeStyle = "#000000"; 
+            ctx.strokeRect(b.x,b.y,b.w,b.h);
+        }
     });
     
+    if(bricks.every(b => b.hit)){
+        winSound.currentTime = 0; 
+        winSound.play();
+        running = false;
+        alert("YOU WIN! Total Score: " + score);
+        saveScore();
+        return;
+    }
+
     if(ball.y > 330){
+        loseSound.currentTime = 0; 
         loseSound.play();
         running = false;
         saveScore();
@@ -76,7 +107,10 @@ function loop(){
 }
 
 window.addEventListener("mousemove", e =>{
-    paddle.x = e.clientX - canvas.offsetLeft - paddle.w/2;
+    let newX = e.clientX - canvas.offsetLeft - paddle.w/2;
+    if(newX < 0) newX = 0;
+    if(newX > canvas.width - paddle.w) newX = canvas.width - paddle.w;
+    paddle.x = newX;
 });
 
 function saveScore(){

style.css

@@ -1,40 +1,69 @@
 body{
     text-align:center;
-    font-family:Arial;
-    background:#f2f2f2;
+    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+    background: linear-gradient(to bottom, #4a00e0, #8e2de2);
+    color: white;
+    margin: 0;
+    padding-top: 20px;
+}
+h1 {
+    color: #ffcc00;
+    text-shadow: 2px 2px 4px #000000;
+}
+.menu a{
+    margin: 15px;
+    padding: 8px 15px;
+    color: #ffcc00;
+    text-decoration: none;
+    border: 1px solid #ffcc00;
+    border-radius: 5px;
+    transition: background 0.3s;
+}
+.menu a:hover {
+    background: #ffcc00;
+    color: #4a00e0;
 }
 canvas{
-    background:#111;
+    background:#000000;
     display:block;
     margin:auto;
-    border:2px solid #555;
+    border:5px solid #ffcc00;
+    box-shadow: 0 0 20px rgba(255, 204, 0, 0.5);
 }
-.login-box{
-    width:250px;
-    margin:auto;
-    padding:20px;
-    background:white;
-    border-radius:10px;
+p {
+    margin-top: 15px;
+    font-size: 1.2em;
 }
-.login-box input{
-    width:100%;
-    margin:5px 0;
-    padding:5px;
+#score {
+    font-weight: bold;
+    color: #00ff7f;
 }
-.login-box button{
-    width:100%;
-    padding:6px;
+select, button {
+    padding: 8px 15px;
+    border: none;
+    border-radius: 5px;
+    font-size: 1em;
+    cursor: pointer;
+    transition: background 0.3s;
+}
+button {
+    background: #00ff7f;
+    color: black;
+    margin-left: 10px;
+}
+button:hover {
+    background: #00e676;
+}
+.login-box, table{
+    background: rgba(255, 255, 255, 0.9);
+    color: black;
+}
+.login-box input, .login-box button{
+    color: black;
 }
 table{
-    margin:auto;
-    background:white;
-    padding:10px;
-    border-radius:10px;
+    border: 1px solid #ccc;
 }
 td{
     padding:5px 20px;
 }
-.menu a{
-    margin:10px;
-    padding:5px;
-}