Update index.html

index.html

@@ -34,6 +34,7 @@
 		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);
+			ball.velocity = new THREE.Vector3((Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2, (Math.random() - 0.5) * 2).normalize();
 			scene.add(ball);
 			balls.push(ball);
 		}
@@ -54,36 +55,60 @@
 		light.position.set(0, 30, 0);
 		scene.add(light);
 
-		var speed = 0.1;
+		var paddleGeometry = new THREE.BoxGeometry(4, 1, 1);
+		var paddleMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+		var paddle = new THREE.Mesh(paddleGeometry, paddleMaterial);
+		scene.add(paddle);
 
 		function animate() {
 			requestAnimationFrame(animate);
 
-			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;
+			var paddleSpeed = 1.5;
 
-				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 (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 (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].position.z = balls[i].position.z > 0 ? 25 - 0.5 : -25 + 0.5;
+				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].position.y = -15 + 0.5;
+				balls[i].velocity.y = Math.abs(balls[i].velocity.y);
 			}
 
 			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) {
+				if (balls[i].position.distanceTo(bricks[j].position) <= 2) {
 					scene.remove(bricks[j]);
 					bricks.splice(j, 1);
-					balls[i].position.y = balls[i].position.y > 0 ? 25 - 0.5 : -25 + 0.5;
+					balls[i].velocity.negate();
 					addBrick();
 				}
 			}
@@ -92,6 +117,10 @@
 		renderer.render(scene, camera);
 	}
 
+	var keys = {};
+	var mouseX = null;
+	var mouseY = null;
+
 	document.addEventListener('mousedown', function(event) {
 		if (event.button === 0) {
 			addBrick();
@@ -102,18 +131,21 @@
 	});
 
 	document.addEventListener('keydown', function(event) {
-		if (event.keyCode === 37) {
-			paddle.position.x -= 1;
-		}
-		if (event.keyCode === 39) {
-			paddle.position.x += 1;
-		}
-		if (event.keyCode === 38) {
-			paddle.position.z -= 1;
-		}
-		if (event.keyCode === 40) {
-			paddle.position.z += 1;
-		}
+		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();