Spaces:

awacke1
/

HTML5-ThreeJS

Running

App Files Files Community

awacke1 commited on Feb 16, 2024

Commit

dd8e521

verified ·

1 Parent(s): 9346d4c

Update index.html

Browse files

Files changed (1) hide show

index.html +120 -66

index.html CHANGED Viewed

@@ -1,73 +1,127 @@
 <!DOCTYPE html>
 <html>
 <head>
-  <title>Three.js Scene and Animation Example</title>
-  <style>
-    body {
-      margin: 0;
-      padding: 0;
-    }
-    canvas {
-      display: block;
-    }
-  </style>
 </head>
 <body>
-  <script src="https://threejs.org/build/three.min.js"></script>
-  <script>
-    // Set up the scene, camera, and renderer
-    const scene = new THREE.Scene();
-    const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-    const renderer = new THREE.WebGLRenderer();
-    renderer.setSize(window.innerWidth, window.innerHeight);
-    document.body.appendChild(renderer.domElement);
-    // Add lighting to the scene
-    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
-    scene.add(ambientLight);
-    const pointLight = new THREE.PointLight(0xffffff, 1);
-    pointLight.position.set(5, 5, 5);
-    scene.add(pointLight);
-    // Create a complex shaded shape geometry and material
-    const geometry = new THREE.TorusKnotGeometry(1, 0.4, 256, 32, 2, 3, 1);
-    const material = new THREE.MeshPhongMaterial({
-      color: 0xffaaff,
-      specular: 0x999999,
-      shininess: 50,
-      flatShading: false,
-    });
-    // Create a shape mesh and add it to the scene
-    const shape = new THREE.Mesh(geometry, material);
-    scene.add(shape);
-    // Set up animation loop
-    const animate = function () {
-      requestAnimationFrame(animate);
-      // Rotate the shape
-      shape.rotation.x += 0.01;
-      shape.rotation.y += 0.01;
-      // Move the camera in a circle around the shape
-      const time = Date.now() * 0.001;
-      const radius = 10;
-      camera.position.x = Math.sin(time) * radius;
-      camera.position.z = Math.cos(time) * radius;
-      camera.lookAt(new THREE.Vector3());
-      // Update the lighting position to follow the camera
-      pointLight.position.copy(camera.position);
-      renderer.render(scene, camera);
-    };
-    // Start the animation loop
-    animate();
-    // Adjust camera position
-    camera.position.z = 10;
-  </script>
 </body>
-</html>

 <!DOCTYPE html>
 <html>
 <head>
+	<meta charset="UTF-8">
+	<title>🤓🕹️📱 3D Breakout Game</title>
+	<style>
+		body { margin: 0; }
+		canvas { width: 100%; height: 100%; }
+	</style>
+	<script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
 </head>
 <body>
+	<canvas id="gameCanvas"></canvas>
+	<script>
+		var scene = new THREE.Scene();
+		var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+		camera.position.set(0, 30, 0);
+		camera.lookAt(new THREE.Vector3(0, 0, 0));
+		scene.add(camera);
+		var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
+		renderer.setClearColor(0x000000);
+		renderer.setPixelRatio(window.devicePixelRatio);
+		renderer.setSize(window.innerWidth, window.innerHeight);
+		var ballGeometry = new THREE.SphereGeometry(0.5, 32, 32);
+		var ballMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+		var balls = [];
+		var brickGeometry = new THREE.BoxGeometry(2, 1, 1);
+		var bricks = [];
+		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);
+		}
+		function addBrick() {
+			var brickMaterial = new THREE.MeshLambertMaterial({ color: Math.random() * 0xffffff });
+			var brick = new THREE.Mesh(brickGeometry, brickMaterial);
+			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 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);
+			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>
 </body>
+</html>