Spaces:

awacke1
/

HTML5-Tower-Building-3D-Game

Running

App Files Files Community

awacke1 commited on Mar 11, 2023

Commit

0610c43

1 Parent(s): dc57967

Create v2-index.html

Browse files

Files changed (1) hide show

v2-index.html +171 -0

v2-index.html ADDED Viewed

	@@ -0,0 +1,171 @@

+<!DOCTYPE html>
+<html>
+<head>
+    <title>Tower Building Game</title>
+    <meta charset="utf-8">
+    <style>
+        body {
+            margin: 0;
+            overflow: hidden;
+        }
+        canvas {
+            display: block;
+        }
+    </style>
+</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();
+        function init() {
+            // Create a Three.js scene
+            scene = new THREE.Scene();
+            // Create a camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 50, 100);
+            camera.lookAt(0, 0, 0);
+            // Create a renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.body.appendChild(renderer.domElement);
+            // Add lights to the scene
+            let ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
+            scene.add(ambientLight);
+            let directionalLight = new THREE.DirectionalLight(0xffffff, 0.5);
+            directionalLight.position.set(0, 100, 100);
+            scene.add(directionalLight);
+            // Add ground plane to the scene
+            let planeGeometry = new THREE.PlaneGeometry(100, 100);
+            let planeMaterial = new THREE.MeshPhongMaterial({ color: 0xffffff });
+            let plane = new THREE.Mesh(planeGeometry, planeMaterial);
+            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>