Spaces:

awacke1
/

HTML5-Tower-Building-3D-Game

Running

App Files Files Community

awacke1 commited on Mar 11, 2023

Commit

dc57967

1 Parent(s): b7c3012

Update index.html

Browse files

Files changed (1) hide show

index.html +119 -26

index.html CHANGED Viewed

@@ -15,10 +15,13 @@
 </head>
 <body>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
         let scene, camera, renderer;
         let blocks = [];
         let currentBlock = null;
         init();
         animate();
@@ -52,50 +55,140 @@
             plane.rotation.x = -Math.PI / 2;
             scene.add(plane);
             // Add event listeners for input
-            document.addEventListener('mousedown', onMouseDown, false);
-            document.addEventListener('touchstart', onTouchStart, false);
             document.addEventListener('keydown', onKeyDown, false);
         }
         function animate() {
             requestAnimationFrame(animate);
             renderer.render(scene, camera);
         }
         function createBlock() {
             let blockGeometry = new THREE.BoxGeometry(10, 10, 10);
-            let blockMaterial = new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load('block_texture.jpg') });
-            let block = new THREE.Mesh(blockGeometry, blockMaterial);
-            block.position.set(0, 5, 0);
-            scene.add(block);
-            blocks.push(block);
-            currentBlock = block;
-        }
-        function placeBlock() {
-            if (currentBlock) {
-                currentBlock.position.y = 5;
-                currentBlock = null;
-            }
         }
-        function onMouseDown(event) {
-            event.preventDefault();
-            createBlock();
         }
-        function onTouchStart(event) {
-            event.preventDefault();
-            createBlock();
         }
-        function onKeyDown(event) {
-            if (event.keyCode === 32) {
-                event.preventDefault();
-                placeBlock();
             }
         }
-    </script>
 </body>
-</html>

 </head>
 <body>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <script src="https://cdn.jsdelivr.net/npm/cannon/build/cannon.min.js"></script>
     <script>
         let scene, camera, renderer;
+        let world, stack;
         let blocks = [];
         let currentBlock = null;
+        let score = 0;
         init();
         animate();
             plane.rotation.x = -Math.PI / 2;
             scene.add(plane);
+            // Create a physics world
+            world = new CANNON.World();
+            world.gravity.set(0, -9.82, 0);
+            world.broadphase = new CANNON.NaiveBroadphase();
+            world.solver.iterations = 10;
+            // Create a ground plane in the physics world
+            let groundShape = new CANNON.Plane();
+            let groundBody = new CANNON.Body({ mass: 0 });
+            groundBody.addShape(groundShape);
+            groundBody.quaternion.setFromAxisAngle(new CANNON.Vec3(1, 0, 0), -Math.PI / 2);
+            world.addBody(groundBody);
             // Add event listeners for input
             document.addEventListener('keydown', onKeyDown, false);
         }
         function animate() {
             requestAnimationFrame(animate);
+            // Step the physics world
+            world.step(1 / 60);
+            // Update the position of the blocks in the Three.js scene
+            for (let i = 0; i < blocks.length; i++) {
+                let block = blocks[i];
+                let body = block.userData.physicsBody;
+                block.position.copy(body.position);
+                block.quaternion.copy(body.quaternion);
+            }
+            // Render the scene
             renderer.render(scene, camera);
         }
         function createBlock() {
+            // Create a block object in the Three.js scene
             let blockGeometry = new THREE.BoxGeometry(10, 10, 10);
+            let blockMaterial =        new THREE.MeshPhongMaterial({ map: new THREE.TextureLoader().load('block_texture.jpg') });
+        let block = new THREE.Mesh(blockGeometry, blockMaterial);
+        block.position.set(0, 5, 0);
+        scene.add(block);
+        blocks.push(block);
+        currentBlock = block;
+        // Create a physics body for the block
+        let blockShape = new CANNON.Box(new CANNON.Vec3(5, 5, 5));
+        let blockBody = new CANNON.Body({ mass: 1 });
+        blockBody.addShape(blockShape);
+        blockBody.position.set(0, 15, 0);
+        world.addBody(blockBody);
+        block.userData.physicsBody = blockBody;
+    }
+    function placeBlock() {
+        if (currentBlock) {
+            let position = currentBlock.position.clone();
+            let body = currentBlock.userData.physicsBody;
+            body.position.copy(position);
+            body.velocity.set(0, 0, 0);
+            body.angularVelocity.set(0, 0, 0);
+            stack.push(currentBlock);
+            currentBlock = null;
         }
+    }
+    function steerBlock(direction) {
+        if (currentBlock) {
+            let position = currentBlock.position.clone();
+            position.x += direction * 10;
+            currentBlock.position.copy(position);
         }
+    }
+    function onKeyDown(event) {
+        if (event.keyCode === 65) { // A key
+            steerBlock(-1);
+        } else if (event.keyCode === 68) { // D key
+            steerBlock(1);
+        } else if (event.keyCode === 32) { // Spacebar
+            placeBlock();
+            let stability = checkStability();
+            if (stability) {
+                score += Math.pow(2, stack.length);
+                document.getElementById('score').innerHTML = 'Score: ' + score;
+            } else {
+                alert('Game Over!');
+            }
         }
+    }
+    function checkStability() {
+        let positions = [];
+        for (let i = 0; i < stack.length; i++) {
+            let block = stack[i];
+            let position = block.userData.physicsBody.position;
+            positions.push(position.clone());
+        }
+        for (let i = 0; i < stack.length - 1; i++) {
+            let block1 = stack[i];
+            let position1 = positions[i];
+            for (let j = i + 1; j < stack.length; j++) {
+                let block2 = stack[j];
+                let position2 = positions[j];
+                let distance = position1.distanceTo(position2);
+                if (distance < 10) {
+                    return false;
+                }
             }
         }
+        return true;
+    }
+    function resetGame() {
+        // Remove all blocks from the scene and the physics world
+        while (blocks.length > 0) {
+            let block = blocks.pop();
+            scene.remove(block);
+            world.remove(block.userData.physicsBody);
+        }
+        // Reset the stack and the score
+        stack = [];
+        score = 0;
+        document.getElementById('score').innerHTML = 'Score: ' + score;
+        // Create a new block
+        createBlock();
+    }
+    resetGame();
+</script>
+<div id="score" style="position: absolute; top: 10px; left: 10px; font-size: 24px; font-weight: bold; color: white;"></div>
+<button onclick="resetGame()" style="position: absolute; top: 10px; right: 10px; font-size: 24px;">Restart</button>
 </body>
+</html>