Spaces:

awacke1
/

HTML5-ThreeJS

Running

App Files Files Community

awacke1 commited on Feb 16, 2024

Commit

facffbf

verified ·

1 Parent(s): dd8e521

Update index.html

Browse files

Files changed (1) hide show

index.html +76 -120

index.html CHANGED Viewed

@@ -1,127 +1,83 @@
 <!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>

 <!DOCTYPE html>
 <html>
 <head>
+    <meta charset="UTF-8">
+    <title>3D Card Game</title>
+    <style>
+        body { margin: 0; }
+        canvas { display: block; }
+    </style>
+    <script src="https://cdn.jsdelivr.net/npm/[email protected]/build/three.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/cannon.js/0.6.2/cannon.min.js"></script> <!-- For physics -->
 </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, 100);
+        var renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas') });
+        renderer.setSize(window.innerWidth, window.innerHeight);
+        document.body.appendChild(renderer.domElement);
+        // Physics world setup
+        var world = new CANNON.World();
+        world.gravity.set(0, -9.82, 0); // Apply gravity in the negative y direction
+        // Card geometry
+        var cardGeometry = new THREE.BoxGeometry(5, 0.1, 7);
+        var cardMaterial = new THREE.MeshLambertMaterial({ color: 0xffffff });
+        var cards = [];
+        var cardBodies = [];
+        // Lighting
+        var ambientLight = new THREE.AmbientLight(0x404040);
+        scene.add(ambientLight);
+        var directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+        directionalLight.position.set(0, 1, 1);
+        scene.add(directionalLight);
+        // Card creation
+        function addCard(x, y, z) {
+            var card = new THREE.Mesh(cardGeometry, cardMaterial);
+            card.position.set(x, y, z);
+            scene.add(card);
+            cards.push(card);
+            // Physics for card
+            var cardShape = new CANNON.Box(new CANNON.Vec3(2.5, 0.05, 3.5));
+            var cardBody = new CANNON.Body({ mass: 1 });
+            cardBody.addShape(cardShape);
+            cardBody.position.set(x, y, z);
+            world.addBody(cardBody);
+            cardBodies.push(cardBody);
+        }
+        // Example: Add a stack of cards
+        for (let i = 0; i < 52; i++) {
+            addCard(0, i * 0.2, 0); // Adjust position as needed
+        }
+        // Drag and drop functionality (simplified)
+        // You will need to implement raycasting to pick up and move cards
+        function animate() {
+            requestAnimationFrame(animate);
+            // Update physics world
+            world.step(1 / 60);
+            // Sync Three.js objects with physics objects
+            for (let i = 0; i < cardBodies.length; i++) {
+                cards[i].position.copy(cardBodies[i].position);
+                cards[i].quaternion.copy(cardBodies[i].quaternion);
+            }
+            renderer.render(scene, camera);
+        }
+        animate();
+    </script>
 </body>
+</html>