Update v2-index.html

v2-index.html

@@ -22,8 +22,10 @@
         let blocks = [];
         let currentBlock = null;
         let score = 0;
+
         init();
         animate();
+
         function init() {
             // Create a Three.js scene
             scene = new THREE.Scene();
@@ -32,40 +34,50 @@
             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];
@@ -73,18 +85,21 @@
                 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') });
+            // Create a
+        let colors = [0xff0000, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0x00ffff];
+        let blockMaterial = new THREE.MeshPhongMaterial({ color: colors[Math.floor(Math.random() * colors.length)], envMap: cubeCamera.renderTarget.texture });
         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 });
@@ -92,7 +107,16 @@
         blockBody.position.set(0, 15, 0);
         world.addBody(blockBody);
         block.userData.physicsBody = blockBody;
+
+        // Create a cube camera for the reflection map
+        let cubeCamera = new THREE.CubeCamera(1, 1000, 128);
+        cubeCamera.position.copy(block.position);
+        scene.add(cubeCamera);
+
+        // Render the reflection map
+        cubeCamera.update(renderer, scene);
     }
+
     function placeBlock() {
         if (currentBlock) {
             let position = currentBlock.position.clone();
@@ -102,8 +126,13 @@
             body.angularVelocity.set(0, 0, 0);
             stack.push(currentBlock);
             currentBlock = null;
+            setTimeout(() => {
+                createBlock();
+                currentBlock.userData.physicsBody.velocity.set(0, -1, 0);
+            }, 100);
         }
     }
+
     function steerBlock(direction) {
         if (currentBlock) {
             let position = currentBlock.position.clone();
@@ -111,6 +140,7 @@
             currentBlock.position.copy(position);
         }
     }
+
     function onKeyDown(event) {
         if (event.keyCode === 65) { // A key
             steerBlock(-1);
@@ -120,13 +150,17 @@
             placeBlock();
             let stability = checkStability();
             if (stability) {
-                score += Math.pow(2, stack.length);
-                document.getElementById('score').innerHTML = 'Score: ' + score;
+                let position = stack[stack.length - 1].userData.physicsBody.position;
+                let distance = position.distanceTo(new THREE.Vector3(0, 15, 0));
+                let accuracy = Math.max(0, 1 - distance / 10) * 100;
+                score += Math.pow(2, stack.length) * accuracy;
+                document.getElementById('score').innerHTML = 'Score: ' + Math.floor(score);
             } else {
                 alert('Game Over!');
             }
         }
     }
+
     function checkStability() {
         let positions = [];
         for (let i = 0; i < stack.length; i++) {
@@ -146,8 +180,10 @@
                 }
             }
         }
+       
         return true;
     }
+
     function resetGame() {
         // Remove all blocks from the scene and the physics world
         while (blocks.length > 0) {
@@ -155,17 +191,19 @@
             scene.remove(block);
             world.remove(block.userData.physicsBody);
         }
+
         // Reset the stack and the score
         stack = [];
         score = 0;
-        document.getElementById('score').innerHTML = 'Score: ' + score;
+        document.getElementById('score').innerHTML = 'Score: ' + Math.floor(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>