Update index.html

index.html

@@ -26,71 +26,81 @@
 
 		var ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
 		var ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
-		var ball = new THREE.Mesh(ballGeometry, ballMaterial);
-		scene.add(ball);
-
-		var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
-		var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
-		var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
-		paddle.position.y = -15;
-		scene.add(paddle);
+		var balls = [];
 
 		var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
 		var bricks = [];
 
-		for (var i = 0; i < 50; i++) {
+		function addBall() {
+			var ball = new THREE.Mesh(ballGeometry, ballMaterial);
+			ball.position.set((Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25, (Math.random() - 0.5) * 25);
+			scene.add(ball);
+			balls.push(ball);
+		}
+
+		function addBrick() {
 			var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
 			var brick = new THREE.Mesh(brickGeometry, brickMaterial);
-			brick.position.x = (Math.random() - 0.5) * 50;
-			brick.position.y = (Math.random() - 0.5) * 50;
-			brick.position.z = (Math.random() - 0.5) * 50;
+			brick.position.set((Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50, (Math.random() - 0.5) * 50);
 			scene.add(brick);
 			bricks.push(brick);
 		}
 
+		for (var i = 0; i < 50; i++) {
+			addBrick();
+		}
+
 		var light = new THREE.PointLight(0xffffff, 1, 100);
 		light.position.set(0, 30, 0);
 		scene.add(light);
 
 		var speed = 0.1;
-		var xSpeed = speed;
-		var ySpeed = speed;
-		var zSpeed = speed;
 
 		function animate() {
 			requestAnimationFrame(animate);
 
-			ball.position.x += xSpeed;
-			ball.position.y += ySpeed;
-			ball.position.z += zSpeed;
+			for (var i = 0; i < balls.length; i++) {
+				balls[i].position.x += (Math.random() - 0.5) * speed;
+				balls[i].position.y += (Math.random() - 0.5) * speed;
+				balls[i].position.z += (Math.random() - 0.5) * speed;
 
-			if (ball.position.x + 0.5 > 25 || ball.position.x - 0.5 < -25) {
-				xSpeed = -xSpeed;
-			}
+				if (balls[i].position.x + 0.5 > 25 || balls[i].position.x - 0.5 < -25) {
+					balls[i].position.x = balls[i].position.x > 0 ? 25 - 0.5 : -25 + 0.5;
+				}
 
-			if (ball.position.y + 0.5 > 25 || ball.position.y - 0.5 < -25) {
-				ySpeed = -ySpeed;
+				if (balls[i].position.y + 0.5 > 25 || balls[i].position.y - 0.5 < -25) {
+				balls[i].position.y = balls[i].position.y > 0 ? 25 - 0.5 : -25 + 0.5;
+}
+			if (balls[i].position.z + 0.5 > 25 || balls[i].position.z - 0.5 < -25) {
+				balls[i].position.z = balls[i].position.z > 0 ? 25 - 0.5 : -25 + 0.5;
 			}
 
-			if (ball.position.z + 0.5 > 25 || ball.position.z - 0.5 < -25) {
-				zSpeed = -zSpeed;
+			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].position.y = -15 + 0.5;
 			}
 
-			if (ball.position.y - 0.5 < paddle.position.y + 0.5 && ball.position.x + 0.5 > paddle.position.x - 2 && ball.position.x - 0.5 < paddle.position.x + 2 && ball.position.z + 0.5 > paddle.position.z - 0.5 && ball.position.z - 0.5 < paddle.position.z + 0.5) {
-ySpeed = -ySpeed;
-}
-          
-		for (var i = 0; i < bricks.length; i++) {
-			if (ball.position.y + 0.5 > bricks[i].position.y - 0.5 && ball.position.y - 0.5 < bricks[i].position.y + 0.5 && ball.position.x + 0.5 > bricks[i].position.x - 1 && ball.position.x - 0.5 < bricks[i].position.x + 1 && ball.position.z + 0.5 > bricks[i].position.z - 0.5 && ball.position.z - 0.5 < bricks[i].position.z + 0.5) {
-				scene.remove(bricks[i]);
-				bricks.splice(i, 1);
-				ySpeed = -ySpeed;
+			for (var j = 0; j < bricks.length; j++) {
+				if (balls[i].position.y + 0.5 > bricks[j].position.y - 0.5 && balls[i].position.y - 0.5 < bricks[j].position.y + 0.5 && balls[i].position.x + 0.5 > bricks[j].position.x - 1 && balls[i].position.x - 0.5 < bricks[j].position.x + 1 && balls[i].position.z + 0.5 > bricks[j].position.z - 0.5 && balls[i].position.z - 0.5 < bricks[j].position.z + 0.5) {
+					scene.remove(bricks[j]);
+					bricks.splice(j, 1);
+					balls[i].position.y = balls[i].position.y > 0 ? 25 - 0.5 : -25 + 0.5;
+					addBrick();
+				}
 			}
 		}
 
 		renderer.render(scene, camera);
 	}
 
+	document.addEventListener('mousedown', function(event) {
+		if (event.button === 0) {
+			addBrick();
+		}
+		if (event.button === 2) {
+			addBall();
+		}
+	});
+
 	document.addEventListener('keydown', function(event) {
 		if (event.keyCode === 37) {
 			paddle.position.x -= 1;
@@ -108,6 +118,5 @@ ySpeed = -ySpeed;
 
 	animate();
 </script>
-
-  </body>
+</body>
 </html>