From fc24028ed9d14e2eb51929811079048ecc815a10 Mon Sep 17 00:00:00 2001
From: Juan Sebastian Montoya <juansmm@outlook.com>
Date: Tue, 25 Nov 2025 14:32:48 -0500
Subject: [PATCH] Refactor to ES6 classes with GameObject inheritance pattern

- Convert from function-based to class-based architecture
- Create GameObject base class with common functionality (position, collision, scene management)
- Implement Player, Coin, and Obstacle classes extending GameObject
- Add Game class to manage game lifecycle and state
- Fix shadow rendering by configuring directional light shadow camera bounds
- Fix player collision to prevent sinking below ground (horizontal push only)
- Improve code organization and maintainability with OOP principles
---
 index.html | 648 ++++++++++++++++++++++++++++++++---------------------
 1 file changed, 388 insertions(+), 260 deletions(-)

diff --git a/index.html b/index.html
index 9055eb7..f1c3950 100644
--- a/index.html
+++ b/index.html
@@ -92,313 +92,441 @@
 
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <script>
-        // Game variables
-        let scene, camera, renderer;
-        let player;
-        let coins = [];
-        let obstacles = [];
-        let score = 0;
-        let health = 100;
-        let gameActive = true;
-        
-        // Movement
-        const keys = {};
-        const playerSpeed = 0.15;
-        const groundSize = 30;
-        
-        // Initialize the game
-        function init() {
-            // Scene setup
-            scene = new THREE.Scene();
-            scene.background = new THREE.Color(0x87CEEB);
-            scene.fog = new THREE.Fog(0x87CEEB, 0, 50);
+        // Base GameObject class
+        class GameObject {
+            constructor(scene, groundSize) {
+                this.scene = scene;
+                this.groundSize = groundSize;
+                this.mesh = this.createMesh();
+                this.initialize();
+                scene.add(this.mesh);
+            }
             
-            // Camera setup
-            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
-            camera.position.set(0, 10, 15);
-            camera.lookAt(0, 0, 0);
+            // Override in child classes
+            createMesh() {
+                throw new Error('createMesh() must be implemented by child class');
+            }
             
-            // Renderer setup
-            renderer = new THREE.WebGLRenderer({ antialias: true });
-            renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-            document.body.appendChild(renderer.domElement);
+            // Override in child classes for initialization
+            initialize() {
+                // Default implementation - can be overridden
+            }
             
-            // Lights
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
-            scene.add(ambientLight);
+            // Override in child classes for update logic
+            update(...args) {
+                // Default implementation - can be overridden
+            }
             
-            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(10, 20, 10);
-            directionalLight.castShadow = true;
-            directionalLight.shadow.mapSize.width = 2048;
-            directionalLight.shadow.mapSize.height = 2048;
-            directionalLight.shadow.camera.left = -20;
-            directionalLight.shadow.camera.right = 20;
-            directionalLight.shadow.camera.top = 20;
-            directionalLight.shadow.camera.bottom = -20;
-            directionalLight.shadow.camera.near = 0.5;
-            directionalLight.shadow.camera.far = 50;
-            scene.add(directionalLight);
+            // Common collision detection
+            checkCollision(otherPosition, collisionRadius) {
+                const distance = this.mesh.position.distanceTo(otherPosition);
+                return distance < collisionRadius;
+            }
             
-            // Ground
-            const groundGeometry = new THREE.PlaneGeometry(groundSize, groundSize);
-            const groundMaterial = new THREE.MeshStandardMaterial({ 
-                color: 0x90EE90,
-                roughness: 0.8
-            });
-            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
-            ground.rotation.x = -Math.PI / 2;
-            ground.receiveShadow = true;
-            scene.add(ground);
+            // Common position getter
+            getPosition() {
+                return this.mesh.position;
+            }
             
-            // Grid helper
-            const gridHelper = new THREE.GridHelper(groundSize, 20, 0x000000, 0x000000);
-            gridHelper.material.opacity = 0.2;
-            gridHelper.material.transparent = true;
-            scene.add(gridHelper);
+            // Remove from scene
+            remove() {
+                this.scene.remove(this.mesh);
+            }
             
-            // Player
-            const playerGeometry = new THREE.BoxGeometry(1, 1, 1);
-            const playerMaterial = new THREE.MeshStandardMaterial({ 
-                color: 0x4169E1,
-                metalness: 0.3,
-                roughness: 0.4
-            });
-            player = new THREE.Mesh(playerGeometry, playerMaterial);
-            player.position.y = 0.5;
-            player.castShadow = true;
-            player.receiveShadow = true;
-            scene.add(player);
+            // Set position
+            setPosition(x, y, z) {
+                this.mesh.position.set(x, y, z);
+            }
             
-            // Create initial game objects
-            createCoins(10);
-            createObstacles(8);
-            
-            // Event listeners
-            window.addEventListener('keydown', (e) => keys[e.key.toLowerCase()] = true);
-            window.addEventListener('keyup', (e) => keys[e.key.toLowerCase()] = false);
-            window.addEventListener('resize', onWindowResize);
-            document.getElementById('restartBtn').addEventListener('click', restartGame);
-            
-            // Start animation loop
-            animate();
+            // Get position vector
+            getPositionVector() {
+                return this.mesh.position.clone();
+            }
         }
         
-        // Create coins
-        function createCoins(count) {
-            for (let i = 0; i < count; i++) {
-                const coinGeometry = new THREE.SphereGeometry(0.3, 16, 16);
-                const coinMaterial = new THREE.MeshStandardMaterial({ 
+        // Player class extends GameObject
+        class Player extends GameObject {
+            constructor(scene, groundSize) {
+                super(scene, groundSize);
+                this.speed = 0.15;
+            }
+            
+            createMesh() {
+                const geometry = new THREE.BoxGeometry(1, 1, 1);
+                const material = new THREE.MeshStandardMaterial({ 
+                    color: 0x4169E1,
+                    metalness: 0.3,
+                    roughness: 0.4
+                });
+                const mesh = new THREE.Mesh(geometry, material);
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+                return mesh;
+            }
+            
+            initialize() {
+                this.reset();
+            }
+            
+            reset() {
+                this.setPosition(0, 0.5, 0);
+                this.mesh.rotation.y = 0;
+            }
+            
+            update(keys) {
+                const moveVector = new THREE.Vector3();
+                
+                if (keys['w'] || keys['arrowup']) moveVector.z -= this.speed;
+                if (keys['s'] || keys['arrowdown']) moveVector.z += this.speed;
+                if (keys['a'] || keys['arrowleft']) moveVector.x -= this.speed;
+                if (keys['d'] || keys['arrowright']) moveVector.x += this.speed;
+                
+                this.mesh.position.add(moveVector);
+                
+                // Boundary checks
+                const boundary = this.groundSize / 2 - 0.5;
+                this.mesh.position.x = Math.max(-boundary, Math.min(boundary, this.mesh.position.x));
+                this.mesh.position.z = Math.max(-boundary, Math.min(boundary, this.mesh.position.z));
+                
+                // Rotate player based on movement
+                if (moveVector.length() > 0) {
+                    this.mesh.rotation.y += 0.1;
+                }
+            }
+            
+            handleCollision(obstaclePosition) {
+                const pushDirection = this.mesh.position.clone().sub(obstaclePosition);
+                pushDirection.y = 0;
+                pushDirection.normalize();
+                this.mesh.position.add(pushDirection.multiplyScalar(0.3));
+                this.mesh.position.y = 0.5;
+            }
+        }
+        
+        // Coin class extends GameObject
+        class Coin extends GameObject {
+            constructor(scene, groundSize, index = 0) {
+                super(scene, groundSize);
+                this.index = index;
+                this.rotationSpeed = 0.02;
+                this.collisionRadius = 0.8;
+            }
+            
+            createMesh() {
+                const geometry = new THREE.SphereGeometry(0.3, 16, 16);
+                const material = new THREE.MeshStandardMaterial({ 
                     color: 0xFFD700,
                     metalness: 0.8,
                     roughness: 0.2,
                     emissive: 0xFFD700,
                     emissiveIntensity: 0.3
                 });
-                const coin = new THREE.Mesh(coinGeometry, coinMaterial);
-                
-                // Random position
-                coin.position.x = (Math.random() - 0.5) * (groundSize - 4);
-                coin.position.z = (Math.random() - 0.5) * (groundSize - 4);
-                coin.position.y = 0.5;
-                
-                coin.castShadow = true;
-                coin.receiveShadow = true;
-                coin.userData.rotationSpeed = 0.02;
-                
-                scene.add(coin);
-                coins.push(coin);
+                const mesh = new THREE.Mesh(geometry, material);
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+                return mesh;
+            }
+            
+            initialize() {
+                this.setRandomPosition();
+            }
+            
+            setRandomPosition() {
+                const x = (Math.random() - 0.5) * (this.groundSize - 4);
+                const z = (Math.random() - 0.5) * (this.groundSize - 4);
+                this.setPosition(x, 0.5, z);
+            }
+            
+            update() {
+                this.mesh.rotation.y += this.rotationSpeed;
+                this.mesh.position.y = 0.5 + Math.sin(Date.now() * 0.003 + this.index) * 0.2;
+            }
+            
+            checkCollisionWithPlayer(playerPosition) {
+                return this.checkCollision(playerPosition, this.collisionRadius);
             }
         }
         
-        // Create obstacles
-        function createObstacles(count) {
-            for (let i = 0; i < count; i++) {
-                const obstacleGeometry = new THREE.BoxGeometry(1.5, 2, 1.5);
-                const obstacleMaterial = new THREE.MeshStandardMaterial({ 
+        // Obstacle class extends GameObject
+        class Obstacle extends GameObject {
+            constructor(scene, groundSize) {
+                super(scene, groundSize);
+                this.direction = this.createRandomDirection();
+                this.collisionRadius = 1.5;
+            }
+            
+            createMesh() {
+                const geometry = new THREE.BoxGeometry(1.5, 2, 1.5);
+                const material = new THREE.MeshStandardMaterial({ 
                     color: 0xFF4500,
                     metalness: 0.3,
                     roughness: 0.7
                 });
-                const obstacle = new THREE.Mesh(obstacleGeometry, obstacleMaterial);
-                
-                // Random position (ensure not too close to player start)
-                let posX, posZ;
-                do {
-                    posX = (Math.random() - 0.5) * (groundSize - 4);
-                    posZ = (Math.random() - 0.5) * (groundSize - 4);
-                } while (Math.abs(posX) < 3 && Math.abs(posZ) < 3);
-                
-                obstacle.position.x = posX;
-                obstacle.position.z = posZ;
-                obstacle.position.y = 1;
-                
-                obstacle.castShadow = true;
-                obstacle.receiveShadow = true;
-                
-                // Random movement pattern
-                obstacle.userData.direction = new THREE.Vector3(
+                const mesh = new THREE.Mesh(geometry, material);
+                mesh.castShadow = true;
+                mesh.receiveShadow = true;
+                return mesh;
+            }
+            
+            initialize() {
+                this.setRandomPosition();
+                this.mesh.position.y = 1;
+            }
+            
+            createRandomDirection() {
+                return new THREE.Vector3(
                     (Math.random() - 0.5) * 0.05,
                     0,
                     (Math.random() - 0.5) * 0.05
                 );
-                
-                scene.add(obstacle);
-                obstacles.push(obstacle);
             }
-        }
-        
-        // Update player movement
-        function updatePlayer() {
-            if (!gameActive) return;
             
-            const moveVector = new THREE.Vector3();
-            
-            if (keys['w'] || keys['arrowup']) moveVector.z -= playerSpeed;
-            if (keys['s'] || keys['arrowdown']) moveVector.z += playerSpeed;
-            if (keys['a'] || keys['arrowleft']) moveVector.x -= playerSpeed;
-            if (keys['d'] || keys['arrowright']) moveVector.x += playerSpeed;
-            
-            // Apply movement
-            player.position.add(moveVector);
-            
-            // Boundary checks
-            const boundary = groundSize / 2 - 0.5;
-            player.position.x = Math.max(-boundary, Math.min(boundary, player.position.x));
-            player.position.z = Math.max(-boundary, Math.min(boundary, player.position.z));
-            
-            // Rotate player based on movement
-            if (moveVector.length() > 0) {
-                player.rotation.y += 0.1;
-            }
-        }
-        
-        // Update coins
-        function updateCoins() {
-            coins.forEach((coin, index) => {
-                // Rotate coins
-                coin.rotation.y += coin.userData.rotationSpeed;
-                coin.position.y = 0.5 + Math.sin(Date.now() * 0.003 + index) * 0.2;
+            setRandomPosition() {
+                let posX, posZ;
+                do {
+                    posX = (Math.random() - 0.5) * (this.groundSize - 4);
+                    posZ = (Math.random() - 0.5) * (this.groundSize - 4);
+                } while (Math.abs(posX) < 3 && Math.abs(posZ) < 3);
                 
-                // Check collision with player
-                const distance = player.position.distanceTo(coin.position);
-                if (distance < 0.8) {
-                    // Collect coin
-                    scene.remove(coin);
-                    coins.splice(index, 1);
-                    score += 10;
-                    updateUI();
-                    
-                    // Create new coin
-                    createCoins(1);
-                }
-            });
-        }
-        
-        // Update obstacles
-        function updateObstacles() {
-            if (!gameActive) return;
+                this.setPosition(posX, 1, posZ);
+            }
             
-            obstacles.forEach(obstacle => {
-                // Move obstacle
-                obstacle.position.add(obstacle.userData.direction);
+            update() {
+                this.mesh.position.add(this.direction);
                 
                 // Bounce off boundaries
-                const boundary = groundSize / 2 - 1;
-                if (Math.abs(obstacle.position.x) > boundary) {
-                    obstacle.userData.direction.x *= -1;
+                const boundary = this.groundSize / 2 - 1;
+                if (Math.abs(this.mesh.position.x) > boundary) {
+                    this.direction.x *= -1;
                 }
-                if (Math.abs(obstacle.position.z) > boundary) {
-                    obstacle.userData.direction.z *= -1;
+                if (Math.abs(this.mesh.position.z) > boundary) {
+                    this.direction.z *= -1;
                 }
+            }
+            
+            checkCollisionWithPlayer(playerPosition) {
+                return this.checkCollision(playerPosition, this.collisionRadius);
+            }
+        }
+        
+        // Game class
+        class Game {
+            constructor() {
+                this.groundSize = 30;
+                this.score = 0;
+                this.health = 100;
+                this.gameActive = true;
+                this.keys = {};
+                this.coins = [];
+                this.obstacles = [];
                 
-                // Check collision with player
-                const distance = player.position.distanceTo(obstacle.position);
-                if (distance < 1.5) {
-                    health -= 1;
-                    updateUI();
-                    
-                    // Push player away (only on X and Z axis, keep Y constant)
-                    const pushDirection = player.position.clone().sub(obstacle.position);
-                    pushDirection.y = 0; // Keep player on ground level
-                    pushDirection.normalize();
-                    player.position.add(pushDirection.multiplyScalar(0.3));
-                    player.position.y = 0.5; // Ensure player stays at ground level
-                    
-                    // Check game over
-                    if (health <= 0) {
-                        gameOver();
-                    }
+                this.init();
+                this.setupEventListeners();
+                this.animate();
+            }
+            
+            init() {
+                this.setupScene();
+                this.setupCamera();
+                this.setupRenderer();
+                this.setupLights();
+                this.setupGround();
+                this.setupPlayer();
+                this.createGameObjects();
+            }
+            
+            setupScene() {
+                this.scene = new THREE.Scene();
+                this.scene.background = new THREE.Color(0x87CEEB);
+                this.scene.fog = new THREE.Fog(0x87CEEB, 0, 50);
+            }
+            
+            setupCamera() {
+                this.camera = new THREE.PerspectiveCamera(
+                    75, 
+                    window.innerWidth / window.innerHeight, 
+                    0.1, 
+                    1000
+                );
+                this.camera.position.set(0, 10, 15);
+                this.camera.lookAt(0, 0, 0);
+            }
+            
+            setupRenderer() {
+                this.renderer = new THREE.WebGLRenderer({ antialias: true });
+                this.renderer.setSize(window.innerWidth, window.innerHeight);
+                this.renderer.shadowMap.enabled = true;
+                this.renderer.shadowMap.type = THREE.PCFSoftShadowMap;
+                document.body.appendChild(this.renderer.domElement);
+            }
+            
+            setupLights() {
+                const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+                this.scene.add(ambientLight);
+                
+                const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+                directionalLight.position.set(10, 20, 10);
+                directionalLight.castShadow = true;
+                directionalLight.shadow.mapSize.width = 2048;
+                directionalLight.shadow.mapSize.height = 2048;
+                directionalLight.shadow.camera.left = -20;
+                directionalLight.shadow.camera.right = 20;
+                directionalLight.shadow.camera.top = 20;
+                directionalLight.shadow.camera.bottom = -20;
+                directionalLight.shadow.camera.near = 0.5;
+                directionalLight.shadow.camera.far = 50;
+                this.scene.add(directionalLight);
+            }
+            
+            setupGround() {
+                const groundGeometry = new THREE.PlaneGeometry(this.groundSize, this.groundSize);
+                const groundMaterial = new THREE.MeshStandardMaterial({ 
+                    color: 0x90EE90,
+                    roughness: 0.8
+                });
+                const ground = new THREE.Mesh(groundGeometry, groundMaterial);
+                ground.rotation.x = -Math.PI / 2;
+                ground.receiveShadow = true;
+                this.scene.add(ground);
+                
+                const gridHelper = new THREE.GridHelper(this.groundSize, 20, 0x000000, 0x000000);
+                gridHelper.material.opacity = 0.2;
+                gridHelper.material.transparent = true;
+                this.scene.add(gridHelper);
+            }
+            
+            setupPlayer() {
+                this.player = new Player(this.scene, this.groundSize);
+            }
+            
+            createGameObjects() {
+                this.createCoins(10);
+                this.createObstacles(8);
+            }
+            
+            createCoins(count) {
+                for (let i = 0; i < count; i++) {
+                    const coin = new Coin(this.scene, this.groundSize, this.coins.length);
+                    this.coins.push(coin);
                 }
-            });
-        }
-        
-        // Update UI
-        function updateUI() {
-            document.getElementById('score').textContent = score;
-            document.getElementById('health').textContent = Math.max(0, health);
-        }
-        
-        // Game over
-        function gameOver() {
-            gameActive = false;
-            document.getElementById('finalScore').textContent = score;
-            document.getElementById('gameOver').style.display = 'block';
-        }
-        
-        // Restart game
-        function restartGame() {
-            // Remove all coins and obstacles
-            coins.forEach(coin => scene.remove(coin));
-            obstacles.forEach(obstacle => scene.remove(obstacle));
-            coins = [];
-            obstacles = [];
+            }
             
-            // Reset player
-            player.position.set(0, 0.5, 0);
-            player.rotation.y = 0;
+            createObstacles(count) {
+                for (let i = 0; i < count; i++) {
+                    const obstacle = new Obstacle(this.scene, this.groundSize);
+                    this.obstacles.push(obstacle);
+                }
+            }
             
-            // Reset game state
-            score = 0;
-            health = 100;
-            gameActive = true;
+            setupEventListeners() {
+                window.addEventListener('keydown', (e) => {
+                    this.keys[e.key.toLowerCase()] = true;
+                });
+                window.addEventListener('keyup', (e) => {
+                    this.keys[e.key.toLowerCase()] = false;
+                });
+                window.addEventListener('resize', () => this.onWindowResize());
+                document.getElementById('restartBtn').addEventListener('click', () => this.restart());
+            }
             
-            // Recreate game objects
-            createCoins(10);
-            createObstacles(8);
+            updatePlayer() {
+                if (!this.gameActive) return;
+                this.player.update(this.keys);
+            }
             
-            // Hide game over screen
-            document.getElementById('gameOver').style.display = 'none';
-            updateUI();
-        }
-        
-        // Handle window resize
-        function onWindowResize() {
-            camera.aspect = window.innerWidth / window.innerHeight;
-            camera.updateProjectionMatrix();
-            renderer.setSize(window.innerWidth, window.innerHeight);
-        }
-        
-        // Animation loop
-        function animate() {
-            requestAnimationFrame(animate);
+            updateCoins() {
+                this.coins.forEach((coin, index) => {
+                    coin.update();
+                    
+                    if (coin.checkCollisionWithPlayer(this.player.getPosition())) {
+                        coin.remove();
+                        this.coins.splice(index, 1);
+                        this.score += 10;
+                        this.updateUI();
+                        this.createCoins(1);
+                    }
+                });
+            }
             
-            updatePlayer();
-            updateCoins();
-            updateObstacles();
+            updateObstacles() {
+                if (!this.gameActive) return;
+                
+                this.obstacles.forEach(obstacle => {
+                    obstacle.update();
+                    
+                    if (obstacle.checkCollisionWithPlayer(this.player.getPosition())) {
+                        this.health -= 1;
+                        this.updateUI();
+                        this.player.handleCollision(obstacle.getPosition());
+                        
+                        if (this.health <= 0) {
+                            this.gameOver();
+                        }
+                    }
+                });
+            }
             
-            // Camera follows player
-            camera.position.x = player.position.x;
-            camera.position.z = player.position.z + 15;
-            camera.lookAt(player.position);
+            updateCamera() {
+                const playerPos = this.player.getPosition();
+                this.camera.position.x = playerPos.x;
+                this.camera.position.z = playerPos.z + 15;
+                this.camera.lookAt(playerPos);
+            }
             
-            renderer.render(scene, camera);
+            updateUI() {
+                document.getElementById('score').textContent = this.score;
+                document.getElementById('health').textContent = Math.max(0, this.health);
+            }
+            
+            gameOver() {
+                this.gameActive = false;
+                document.getElementById('finalScore').textContent = this.score;
+                document.getElementById('gameOver').style.display = 'block';
+            }
+            
+            restart() {
+                // Remove all coins and obstacles
+                this.coins.forEach(coin => coin.remove());
+                this.obstacles.forEach(obstacle => obstacle.remove());
+                this.coins = [];
+                this.obstacles = [];
+                
+                // Reset player
+                this.player.reset();
+                
+                // Reset game state
+                this.score = 0;
+                this.health = 100;
+                this.gameActive = true;
+                
+                // Recreate game objects
+                this.createGameObjects();
+                
+                // Hide game over screen
+                document.getElementById('gameOver').style.display = 'none';
+                this.updateUI();
+            }
+            
+            onWindowResize() {
+                this.camera.aspect = window.innerWidth / window.innerHeight;
+                this.camera.updateProjectionMatrix();
+                this.renderer.setSize(window.innerWidth, window.innerHeight);
+            }
+            
+            animate() {
+                requestAnimationFrame(() => this.animate());
+                
+                this.updatePlayer();
+                this.updateCoins();
+                this.updateObstacles();
+                this.updateCamera();
+                
+                this.renderer.render(this.scene, this.camera);
+            }
         }
         
         // Start the game
-        init();
+        const game = new Game();
     </script>
 </body>
 </html>
\ No newline at end of file