Update index.html

index.html

@@ -52,77 +52,78 @@
 		var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
 		var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
 		scene.add(paddle);
-		function animate() {
-			requestAnimationFrame(animate);
-			var paddleSpeed = 1.5;
-			if (keys["87"] || keys["38"]) { // w or up arrow
-				paddle.position.z -= paddleSpeed;
-			}
-			if (keys["83"] || keys["40"]) {
-paddle.position.z += paddleSpeed;
-}
-if (keys["65"] || keys["37"]) { // a or left arrow
-paddle.position.x -= paddleSpeed;
-}
-if (keys["68"] || keys["39"]) { // d or right arrow
-paddle.position.x += paddleSpeed;
-}
-		var mouseSpeed = 0.1;
-		if (mouseX !== null && mouseY !== null) {
-			paddle.position.x = (mouseX / window.innerWidth) * 50 - 25;
-			paddle.position.z = -(mouseY / window.innerHeight) * 50 + 25;
-		}
-		for (var i = 0; i < balls.length; i++) {
-			balls[i].position.add(balls[i].velocity);
-			if (balls[i].position.x + 0.5 > 25 || balls[i].position.x - 0.5 < -25) {
-				balls[i].velocity.x = -balls[i].velocity.x;
-			}
-			if (balls[i].position.y + 0.5 > 25 || balls[i].position.y - 0.5 < -25) {
-				balls[i].velocity.y = -balls[i].velocity.y;
-			}
-			if (balls[i].position.z + 0.5 > 25 || balls[i].position.z - 0.5 < -25) {
-				balls[i].velocity.z = -balls[i].velocity.z;
-			}
-			if (balls[i].position.y - 0.5 < -15 && balls[i].position.x + 0.5 > paddle.position.x - 2 && balls[i].position.x - 0.5 < paddle.position.x + 2 && balls[i].position.z + 0.5 > paddle.position.z - 0.5 && balls[i].position.z - 0.5 < paddle.position.z + 0.5) {
-				balls[i].velocity.y = Math.abs(balls[i].velocity.y);
-			}
-			for (var j = 0; j < bricks.length; j++) {
-				if (balls[i].position.distanceTo(bricks[j].position) <= 2) {
-					scene.remove(bricks[j]);
-					bricks.splice(j, 1);
-					balls[i].velocity.negate();
-					addBrick();
-				}
-			}
-		}
-		renderer.render(scene, camera);
-	}
-	var keys = {};
-	var mouseX = null;
-	var mouseY = null;
-	document.addEventListener('mousedown', function(event) {
-		if (event.button === 0) {
-			addBrick();
-		}
-		if (event.button === 2) {
-			addBall();
-		}
-	});
-	document.addEventListener('keydown', function(event) {
-		keys[event.keyCode] = true;
-	});
-	document.addEventListener('keyup', function(event) {
-		keys[event.keyCode] = false;
-	});
-	document.addEventListener('mousemove', function(event) {
-		mouseX = event.clientX;
-		mouseY = event.clientY;
-	});
-	document.addEventListener('mouseleave', function(event) {
-		mouseX = null;
-		mouseY = null;
-	});
-	animate();
-</script>
+        function animate() {
+            requestAnimationFrame(animate);
+            var paddleSpeed = 1.5;
+            if (keys["87"] || keys["38"]) { // w or up arrow
+                paddle.position.z -= paddleSpeed;
+            }
+            if (keys["83"] || keys["40"]) {
+                paddle.position.z += paddleSpeed;
+            }
+            if (keys["65"] || keys["37"]) { // a or left arrow
+                paddle.position.x -= paddleSpeed;
+            }
+            if (keys["68"] || keys["39"]) { // d or right arrow
+                paddle.position.x += paddleSpeed;
+            }
+            var mouseSpeed = 0.1;
+            if (mouseX !== null && mouseY !== null) {
+                paddle.position.x = (mouseX / window.innerWidth) * 50 - 25;
+                paddle.position.z = -(mouseY / window.innerHeight) * 50 + 25;
+            }
+            for (var i = 0; i < balls.length; i++) {
+                balls[i].position.add(balls[i].velocity);
+                // Collision detection with the walls and paddle updated for wider paddle
+                if (balls[i].position.x + 0.5 > 25 || balls[i].position.x - 0.5 < -25) {
+                    balls[i].velocity.x = -balls[i].velocity.x;
+                }
+                if (balls[i].position.y + 0.5 > 25 || balls[i].position.y - 0.5 < -25) {
+                    balls[i].velocity.y = -balls[i].velocity.y;
+                }
+                if (balls[i].position.z + 0.5 > 25 || balls[i].position.z - 0.5 < -25) {
+                    balls[i].velocity.z = -balls[i].velocity.z;
+                }
+                if (balls[i].position.y - 0.5 < -15 && balls[i].position.x + 0.5 > paddle.position.x - 3 && balls[i].position.x - 0.5 < paddle.position.x + 3 && balls[i].position.z + 0.5 > paddle.position.z - 0.5 && balls[i].position.z - 0.5 < paddle.position.z + 0.5) { // Adjusted for wider paddle
+                    balls[i].velocity.y = Math.abs(balls[i].velocity.y);
+                }
+                for (var j = 0; j < bricks.length; j++) {
+                    if (balls[i].position.distanceTo(bricks[j].position) <= 2) {
+                        scene.remove(bricks[j]);
+                        bricks.splice(j, 1);
+                        balls[i].velocity.negate();
+                        addBrick();
+                    }
+                }
+            }
+            renderer.render(scene, camera);
+        }
+        var keys = {};
+        var mouseX = null;
+        var mouseY = null;
+        document.addEventListener('mousedown', function(event) {
+            if (event.button === 0) {
+                addBrick();
+            }
+            if (event.button === 2) {
+                addBall();
+            }
+        });
+        document.addEventListener('keydown', function(event) {
+            keys[event.keyCode] = true;
+        });
+        document.addEventListener('keyup', function(event) {
+            keys[event.keyCode] = false;
+        });
+        document.addEventListener('mousemove', function(event) {
+            mouseX = event.clientX;
+            mouseY = event.clientY;
+        });
+        document.addEventListener('mouseleave', function(event) {
+            mouseX = null;
+            mouseY = null;
+        });
+        animate();
+    </script>
 </body>
 </html>