Spaces:

AdhamYasser2025
/

anycoder-4245f54a

Running

App Files Files Community

AdhamYasser2025 commited on Dec 19, 2025

Commit

3fa2a5f

verified ·

1 Parent(s): 078a19d

Upload folder using huggingface_hub

Browse files

Files changed (1) hide show

index.html +603 -874

index.html CHANGED Viewed

@@ -1,1072 +1,801 @@
 <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>EATER HOLE 3D ULTRA - حفرة الآكلة ثلاثية الأبعاد</title>
-    <!-- استيراد مكتبة Three.js -->
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
         }
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             overflow: hidden;
             touch-action: none;
-            user-select: none;
         }
         #gameContainer {
             position: relative;
-            width: 100vw;
             height: 100vh;
         }
         #gameCanvas {
-            display: none;
             width: 100%;
             height: 100%;
         }
-        /* Main Menu Styles */
-        #mainMenu {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
-            background: linear-gradient(135deg, #0a0e27 0%, #1a0033 100%);
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
-            z-index: 1000;
-            animation: neonPulse 2s ease-in-out infinite alternate;
         }
-        @keyframes neonPulse {
-            0% {
-                filter: brightness(1) drop-shadow(0 0 20px #00ffff);
-            }
-            100% {
-                filter: brightness(1.2) drop-shadow(0 0 40px #ff00ff);
-            }
-        }
         .gameTitle {
-            font-size: clamp(2rem, 6vw, 4rem);
-            font-weight: bold;
-            background: linear-gradient(45deg, #00ffff, #ff00ff, #ffff00);
             -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
             background-clip: text;
-            text-align: center;
-            margin-bottom: 20px;
-            animation: glow 2s ease-in-out infinite alternate;
-            text-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
-        }
-        @keyframes glow {
-            0% {
-                filter: drop-shadow(0 0 20px #00ffff);
-            }
-            100% {
-                filter: drop-shadow(0 0 40px #ff00ff);
-            }
         }
         .developer {
-            color: #00ffff;
             font-size: 1.2rem;
-            margin-bottom: 40px;
-            text-shadow: 0 0 10px rgba(0, 255, 255, 0.8);
         }
-        .menuButton {
-            padding: 15px 40px;
-            margin: 10px;
-            font-size: 1.2rem;
-            font-weight: bold;
-            background: linear-gradient(45deg, #667eea, #764ba2);
             color: white;
-            border: 2px solid #00ffff;
             border-radius: 50px;
             cursor: pointer;
             transition: all 0.3s;
-            box-shadow: 0 4px 15px rgba(0, 255, 255, 0.4);
-            min-width: 200px;
-        }
-        .menuButton:hover {
-            transform: translateY(-3px) scale(1.05);
-            box-shadow: 0 8px 25px rgba(255, 0, 255, 0.6);
-            background: linear-gradient(45deg, #764ba2, #667eea);
-        }
-        /* HUD Styles */
-        #gameHUD {
-            position: absolute;
-            top: 20px;
-            right: 20px;
-            color: white;
-            font-size: 1.2rem;
-            font-weight: bold;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
-            z-index: 100;
-            display: none;
         }
-        .hudItem {
-            background: rgba(0, 0, 0, 0.7);
-            padding: 10px 20px;
-            margin: 5px 0;
-            border-radius: 10px;
-            border: 2px solid #00ffff;
-            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
-        }
-        /* Mobile Controls */
-        #mobileControls {
-            position: absolute;
-            bottom: 20px;
-            left: 50%;
-            transform: translateX(-50%);
-            display: none;
-            z-index: 100;
         }
-        .joystick {
-            width: 150px;
-            height: 150px;
-            background: radial-gradient(circle, rgba(255, 255, 255, 0.2), rgba(255, 255, 255, 0.1));
-            border: 3px solid #00ffff;
-            border-radius: 50%;
-            position: relative;
-            box-shadow: 0 0 30px rgba(0, 255, 255, 0.5);
         }
-        .joystickKnob {
             width: 60px;
             height: 60px;
-            background: radial-gradient(circle, #ff00ff, #667eea);
             border-radius: 50%;
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            box-shadow: 0 0 20px rgba(255, 0, 255, 0.8);
         }
-        /* WhatsApp Button */
-        .whatsappBtn {
-            position: fixed;
-            bottom: 20px;
             left: 20px;
-            width: 60px;
-            height: 60px;
-            background: #25d366;
-            border-radius: 50%;
             display: flex;
-            align-items: center;
-            justify-content: center;
-            text-decoration: none;
-            box-shadow: 0 4px 20px rgba(37, 211, 102, 0.5);
-            z-index: 1001;
-            transition: transform 0.3s;
         }
-        .whatsappBtn:hover {
-            transform: scale(1.1);
         }
-        .whatsappBtn::before {
-            content: "💬";
-            font-size: 30px;
         }
-        /* Loading Screen */
-        #loadingScreen {
             position: absolute;
-            top: 0;
             left: 0;
             width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, #0a0e27, #1a0033);
-            display: none;
-            flex-direction: column;
-            justify-content: center;
-            align-items: center;
-            z-index: 2000;
         }
-        .loader {
             width: 80px;
             height: 80px;
-            border: 8px solid rgba(0, 255, 255, 0.3);
-            border-top: 8px solid #00ffff;
             border-radius: 50%;
-            animation: spin 1s linear infinite;
-        }
-        @keyframes spin {
-            0% { transform: rotate(0deg); }
-            100% { transform: rotate(360deg); }
-        }
-        /* Pause Menu */
-        #pauseMenu {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(0, 0, 0, 0.9);
-            padding: 30px;
-            border-radius: 20px;
-            border: 2px solid #00ffff;
-            display: none;
-            z-index: 500;
-        }
-        .pauseTitle {
-            color: #00ffff;
             font-size: 2rem;
-            margin-bottom: 20px;
-            text-align: center;
-        }
-        /* Skin Selection Modal */
-        #skinModal {
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            background: rgba(0, 0, 0, 0.95);
-            padding: 30px;
-            border-radius: 20px;
-            border: 2px solid #00ffff;
-            display: none;
-            z-index: 600;
-            max-width: 400px;
-            width: 90%;
-        }
-        .skinTitle {
-            color: #00ffff;
-            font-size: 1.8rem;
-            margin-bottom: 20px;
-            text-align: center;
-        }
-        .skinGrid {
-            display: grid;
-            grid-template-columns: repeat(2, 1fr);
-            gap: 15px;
-            margin-bottom: 20px;
-        }
-        .skinOption {
-            padding: 15px;
-            background: linear-gradient(45deg, #667eea, #764ba2);
-            border: 2px solid transparent;
-            border-radius: 10px;
             color: white;
-            cursor: pointer;
-            transition: all 0.3s;
-            text-align: center;
-            font-weight: bold;
-        }
-        .skinOption:hover {
-            border-color: #00ffff;
-            transform: scale(1.05);
-            box-shadow: 0 0 20px rgba(0, 255, 255, 0.5);
-        }
-        .skinOption.selected {
-            border-color: #00ffff;
-            background: linear-gradient(45deg, #00ffff, #ff00ff);
         }
-        /* Instructions Modal */
-        #instructionsModal {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
-            background: rgba(0, 0, 0, 0.95);
             padding: 30px;
             border-radius: 20px;
-            border: 2px solid #00ffff;
             display: none;
-            z-index: 600;
-            max-width: 500px;
-            width: 90%;
         }
-        .instructionsTitle {
-            color: #00ffff;
-            font-size: 1.8rem;
             margin-bottom: 20px;
-            text-align: center;
         }
-        .instructionsText {
-            color: white;
-            line-height: 1.8;
-            font-size: 1.1rem;
         }
-        .closeButton {
-            background: linear-gradient(45deg, #ff00ff, #667eea);
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 10px;
-            cursor: pointer;
-            margin-top: 20px;
-            font-weight: bold;
-            width: 100%;
         }
-        /* Responsive */
         @media (max-width: 768px) {
             .gameTitle {
-                font-size: 2rem;
             }
-            .menuButton {
-                padding: 12px 30px;
                 font-size: 1rem;
             }
-            #gameHUD {
-                font-size: 1rem;
-                top: 10px;
-                right: 10px;
             }
-            .hudItem {
-                padding: 8px 15px;
             }
         }
-        /* Built with anycoder link */
-        .anycoderLink {
-            position: fixed;
-            top: 10px;
-            right: 10px;
-            color: #00ffff;
-            text-decoration: none;
-            font-size: 12px;
-            z-index: 1002;
-            text-shadow: 0 0 5px rgba(0,255,255,0.5);
-            transition: all 0.3s;
-        }
-        .anycoderLink:hover {
-            color: #ff00ff;
-            transform: scale(1.1);
-        }
     </style>
 </head>
 <body>
     <div id="gameContainer">
-        <!-- Main Menu -->
-        <div id="mainMenu">
             <h1 class="gameTitle">EATER HOLE 3D ULTRA</h1>
-            <p class="developer">by: أدهم ياسر محمد</p>
-            <button class="menuButton" onclick="startGame()">ابدأ اللعب</button>
-            <button class="menuButton" onclick="showSkins()">اختيار الجلد</button>
-            <button class="menuButton" onclick="showInstructions()">كيفية اللعب</button>
-            <button class="menuButton" onclick="toggleSound()">🔊 الصوت</button>
-        </div>
-        <!-- Loading Screen -->
-        <div id="loadingScreen">
-            <div class="loader"></div>
-            <p style="color: #00ffff; margin-top: 20px;">جاري التحميل...</p>
-        </div>
-        <!-- Pause Menu -->
-        <div id="pauseMenu">
-            <h2 class="pauseTitle">إيقاف مؤقت</h2>
-            <button class="menuButton" onclick="resumeGame()">متابعة</button>
-            <button class="menuButton" onclick="backToMenu()">القائمة الرئيسية</button>
-        </div>
-        <!-- Skin Selection Modal -->
-        <div id="skinModal">
-            <h2 class="skinTitle">اختر الجلد</h2>
-            <div class="skinGrid">
-                <div class="skinOption" onclick="selectSkin('classic', this)">Classic</div>
-                <div class="skinOption" onclick="selectSkin('fire', this)">Fire</div>
-                <div class="skinOption" onclick="selectSkin('disco', this)">Disco</div>
-                <div class="skinOption" onclick="selectSkin('ice', this)">Ice</div>
-                <div class="skinOption" onclick="selectSkin('galaxy', this)">Galaxy</div>
-                <div class="skinOption" onclick="selectSkin('rainbow', this)">Rainbow</div>
             </div>
-            <button class="closeButton" onclick="closeSkinModal()">اختيار</button>
         </div>
-        <!-- Instructions Modal -->
-        <div id="instructionsModal">
-            <h2 class="instructionsTitle">كيفية اللعب</h2>
-            <div class="instructionsText">
-                <p>📱 <strong>على الهاتف:</strong> استخدم عصا التحكم في الأسفل</p>
-                <p>⌨️ <strong>على الكمبيوتر:</strong> استخدم الأسهم أو WASD</p>
-                <p>🎯 <strong>الهدف:</strong> أكل كل الأشياء الصغرى من حجمك</p>
-                <p>📈 <strong>النمو:</strong> كلما أكلت أكثر، كلما كبرت</p>
-                <p>🏆 <strong>المستويات:</strong> أكمل المستويات وزد نقاطك!</p>
-                <p>🎮 <strong>ESC:</strong> إيقاف مؤقت</p>
-                <p>🤖 <strong>NPC:</strong> احذر من الحفر الأخرى!</p>
             </div>
-            <button class="closeButton" onclick="closeInstructions()">فهمت!</button>
-        </div>
-        <!-- Game Canvas -->
-        <canvas id="gameCanvas"></canvas>
-        <!-- Game HUD -->
-        <div id="gameHUD">
-            <div class="hudItem">المستوى: <span id="level">1</span></div>
-            <div class="hudItem">الحجم: <span id="size">5.0</span></div>
-            <div class="hudItem">الأهداف: <span id="objects">50</span></div>
-            <div class="hudItem">النقاط: <span id="score">0</span></div>
         </div>
-        <!-- Mobile Controls -->
         <div id="mobileControls">
-            <div class="joystick" id="joystick">
-                <div class="joystickKnob" id="joystickKnob"></div>
-            </div>
         </div>
-        <!-- WhatsApp Button -->
-        <a href="https://wa.me/01097399624" class="whatsappBtn" target="_blank"></a>
-        <!-- Built with anycoder -->
-        <a href="https://huggingface.co/spaces/akhaliq/anycoder" class="anycoderLink" target="_blank">Built with anycoder</a>
     </div>
     <script>
-        // Game Variables
         let scene, camera, renderer;
-        let playerHole, ground;
-        let npcs = [];
         let objects = [];
         let level = 1;
         let score = 0;
-        let soundEnabled = true;
-        let gameRunning = false;
         let currentSkin = 'classic';
-        let audioContext;
-        let movement = { x: 0, z: 0 };
-        let joystickActive = false;
-        let animationId;
-        // Initialize Three.js Scene
-        function initScene() {
             scene = new THREE.Scene();
-            scene.fog = new THREE.Fog(0x404040, 100, 500);
-            // Camera Setup
-            camera = new THREE.PerspectiveCamera(
-                75,
-                window.innerWidth / window.innerHeight,
-                0.1,
-                1000
-            );
-            camera.position.set(0, 50, 50);
             camera.lookAt(0, 0, 0);
-            // Renderer Setup
-            const canvas = document.getElementById('gameCanvas');
             renderer = new THREE.WebGLRenderer({
-                canvas: canvas,
                 antialias: true
             });
             renderer.setSize(window.innerWidth, window.innerHeight);
-            renderer.shadowMap.enabled = true;
-            renderer.shadowMap.type = THREE.PCFSoftShadowMap;
-            // Lighting
-            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
-            directionalLight.position.set(50, 100, 50);
-            directionalLight.castShadow = true;
-            directionalLight.shadow.camera.left = -100;
-            directionalLight.shadow.camera.right = 100;
-            directionalLight.shadow.camera.top = 100;
-            directionalLight.shadow.camera.bottom = -100;
             scene.add(directionalLight);
             createGround();
-            createPlayerHole();
-            createObjects();
             createNPCs();
         }
-        // Create Ground
         function createGround() {
-            const groundGeometry = new THREE.PlaneGeometry(200, 200, 50, 50);
-            const groundMaterial = new THREE.MeshLambertMaterial({
-                color: 0xffffff,
-                wireframe: false
             });
             ground = new THREE.Mesh(groundGeometry, groundMaterial);
             ground.rotation.x = -Math.PI / 2;
-            ground.receiveShadow = true;
             scene.add(ground);
         }
-        // Create Player Hole
-        function createPlayerHole() {
-            const holeGeometry = new THREE.CylinderGeometry(5, 5, 2, 32);
-            const holeMaterial = new THREE.MeshBasicMaterial({
                 color: 0x000000,
-                transparent: true,
-                opacity: 0.8
-            });
-            playerHole = new THREE.Mesh(holeGeometry, holeMaterial);
-            playerHole.position.y = -1;
-            scene.add(playerHole);
-            // Add ring effect
-            const ringGeometry = new THREE.RingGeometry(5, 5.5, 32);
-            const ringMaterial = new THREE.MeshBasicMaterial({
-                color: 0xff00ff,
-                side: THREE.DoubleSide,
-                transparent: true,
-                opacity: 0.6
             });
-            const ring = new THREE.Mesh(ringGeometry, ringMaterial);
-            ring.rotation.x = -Math.PI / 2;
-            ring.position.y = 0.01;
-            playerHole.add(ring);
-            applySkin();
         }
-        // Create Objects
         function createObjects() {
-            const objectTypes = [
-                { size: 1, color: 0x00ff00, height: 2, points: 10 },
-                { size: 2, color: 0x0000ff, height: 4, points: 20 },
-                { size: 3, color: 0xff0000, height: 6, points: 30 },
-                { size: 4, color: 0xffff00, height: 8, points: 40 },
-                { size: 5, color: 0xff00ff, height: 10, points: 50 },
-            ];
-            for (let i = 0; i < 50; i++) {
-                const type = objectTypes[Math.floor(Math.random() * objectTypes.length)];
-                const geometry = new THREE.BoxGeometry(type.size, type.height, type.size);
-                const material = new THREE.MeshLambertMaterial({ color: type.color });
-                const object = new THREE.Mesh(geometry, material);
-                object.position.x = (Math.random() - 0.5) * 180;
-                object.position.z = (Math.random() - 0.5) * 180;
-                object.position.y = type.height / 2;
-                object.userData = {
-                    size: type.size,
-                    originalY: type.height / 2,
-                    beingEaten: false,
-                    points: type.points
-                };
-                object.castShadow = true;
-                object.receiveShadow = true;
                 scene.add(object);
                 objects.push(object);
             }
-        }
-        // Create NPCs
-        function createNPCs() {
-            for (let i = 0; i < 10; i++) {
-                const holeGeometry = new THREE.CylinderGeometry(3, 3, 2, 32);
-                const holeMaterial = new THREE.MeshBasicMaterial({
-                    color: new THREE.Color().setHSL(Math.random(), 1, 0.5),
-                    transparent: true,
-                    opacity: 0.7
-                });
-                const npc = new THREE.Mesh(holeGeometry, holeMaterial);
-                npc.position.x = (Math.random() - 0.5) * 180;
-                npc.position.z = (Math.random() - 0.5) * 180;
-                npc.position.y = -1;
-                npc.userData = {
-                    speed: 0.1 + Math.random() * 0.2,
-                    size: 3,
-                    targetX: npc.position.x,
-                    targetZ: npc.position.z,
-                    lastDirectionChange: Date.now()
-                };
-                scene.add(npc);
-                npcs.push(npc);
             }
         }
-        // Sound System
-        function initSound() {
-            try {
-                audioContext = new (window.AudioContext || window.webkitAudioContext)();
-            } catch(e) {
-                console.log('Audio not supported');
             }
         }
-        function playSound(type) {
-            if (!soundEnabled || !audioContext) return;
             try {
                 const oscillator = audioContext.createOscillator();
                 const gainNode = audioContext.createGain();
                 oscillator.connect(gainNode);
                 gainNode.connect(audioContext.destination);
-                switch(type) {
-                    case 'eat':
-                        oscillator.frequency.value = 200;
-                        gainNode.gain.value = 0.1;
-                        oscillator.start();
-                        oscillator.stop(audioContext.currentTime + 0.1);
-                        break;
-                    case 'levelup':
-                        oscillator.frequency.value = 400;
-                        oscillator.frequency.exponentialRampToValueAtTime(800, audioContext.currentTime + 0.5);
-                        gainNode.gain.value = 0.2;
-                        oscillator.start();
-                        oscillator.stop(audioContext.currentTime + 0.5);
-                        break;
-                }
-            } catch(e) {
-                console.log('Error playing sound');
             }
         }
-        // Game Controls
-        function setupControls() {
             // Keyboard controls
-            document.addEventListener('keydown', (e) => {
-                if (!gameRunning) return;
                 switch(e.key) {
                     case 'ArrowUp':
                     case 'w':
                     case 'W':
-                        movement.z = -1;
                         break;
                     case 'ArrowDown':
                     case 's':
                     case 'S':
-                        movement.z = 1;
                         break;
                     case 'ArrowLeft':
                     case 'a':
                     case 'A':
-                        movement.x = -1;
                         break;
                     case 'ArrowRight':
                     case 'd':
                     case 'D':
-                        movement.x = 1;
-                        break;
-                    case 'Escape':
-                        togglePause();
                         break;
                 }
             });
-            document.addEventListener('keyup', (e) => {
                 switch(e.key) {
                     case 'ArrowUp':
-                    case 'ArrowDown':
                     case 'w':
                     case 'W':
                     case 's':
                     case 'S':
-                        movement.z = 0;
                         break;
                     case 'ArrowLeft':
-                    case 'ArrowRight':
                     case 'a':
                     case 'A':
                     case 'd':
                     case 'D':
-                        movement.x = 0;
                         break;
                 }
             });
-            // Touch/Joystick controls
-            setupJoystick();
-        }
-        function setupJoystick() {
-            const joystick = document.getElementById('joystick');
-            const knob = document.getElementById('joystickKnob');
-            const handleJoystick = (e) => {
-                if (!joystickActive) return;
-                const rect = joystick.getBoundingClientRect();
-                const centerX = rect.left + rect.width / 2;
-                const centerY = rect.top + rect.height / 2;
-                let clientX, clientY;
-                if (e.touches) {
-                    clientX = e.touches[0].clientX;
-                    clientY = e.touches[0].clientY;
-                } else {
-                    clientX = e.clientX;
-                    clientY = e.clientY;
-                }
-                let deltaX = clientX - centerX;
-                let deltaY = clientY - centerY;
-                const distance = Math.sqrt(deltaX * deltaX + deltaY * deltaY);
-                const maxDistance = rect.width / 2 - 30;
-                if (distance > maxDistance) {
-                    deltaX = (deltaX / distance) * maxDistance;
-                    deltaY = (deltaY / distance) * maxDistance;
-                }
-                knob.style.transform = `translate(calc(-50% + ${deltaX}px), calc(-50% + ${deltaY}px))`;
-                movement.x = deltaX / maxDistance;
-                movement.z = deltaY / maxDistance;
-            };
-            const startJoystick = (e) => {
-                joystickActive = true;
-                handleJoystick(e);
-                e.preventDefault();
-            };
-            const endJoystick = () => {
-                joystickActive = false;
-                knob.style.transform = 'translate(-50%, -50%)';
-                movement.x = 0;
-                movement.z = 0;
-            };
-            // Touch events
-            joystick.addEventListener('touchstart', startJoystick);
-            joystick.addEventListener('touchmove', handleJoystick);
-            joystick.addEventListener('touchend', endJoystick);
-            // Mouse events for desktop
-            joystick.addEventListener('mousedown', startJoystick);
-            document.addEventListener('mousemove', handleJoystick);
-            document.addEventListener('mouseup', endJoystick);
-        }
-        // Update Game Logic
-        function updateGame() {
-            if (!gameRunning) return;
-            // Update player position
-            if (movement.x !== 0 || movement.z !== 0) {
-                const speed = 0.5;
-                playerHole.position.x += movement.x * speed;
-                playerHole.position.z += movement.z * speed;
-                // Keep player in bounds
-                playerHole.position.x = Math.max(-90, Math.min(90, playerHole.position.x));
-                playerHole.position.z = Math.max(-90, Math.min(90, playerHole.position.z));
-                // Update camera to follow player
-                camera.position.x = playerHole.position.x;
-                camera.position.z = playerHole.position.z + 50;
-                camera.lookAt(playerHole.position.x, 0, playerHole.position.z);
-            }
-            // Check object collisions
-            const playerRadius = parseFloat(playerHole.geometry.parameters.radius);
-            objects.forEach((obj, index) => {
-                if (obj.userData.beingEaten) {
-                    // Animate object being eaten
-                    obj.position.y -= 0.5;
-                    obj.scale.multiplyScalar(0.95);
-                    if (obj.scale.x < 0.1) {
-                        scene.remove(obj);
-                        objects.splice(index, 1);
-                        score += obj.userData.points;
-                        // Grow player hole
-                        playerHole.geometry.dispose();
-                        playerHole.geometry = new THREE.CylinderGeometry(
-                            Math.min(playerRadius + 0.2, 20),
-                            Math.min(playerRadius + 0.2, 20),
-                            2,
-                            32
-                        );
-                        playSound('eat');
-                        updateHUD();
-                    }
-                    return;
-                }
-                const distance = Math.sqrt(
-                    Math.pow(obj.position.x - playerHole.position.x, 2) +
-                    Math.pow(obj.position.z - playerHole.position.z, 2)
-                );
-                if (distance < playerRadius && obj.userData.size < playerRadius) {
-                    obj.userData.beingEaten = true;
-                }
-            });
-            // Update NPCs
-            npcs.forEach(npc => {
-                // Simple AI movement
-                const now = Date.now();
-                if (now - npc.userData.lastDirectionChange > 2000) {
-                    npc.userData.targetX = (Math.random() - 0.5) * 180;
-                    npc.userData.targetZ = (Math.random() - 0.5) * 180;
-                    npc.userData.lastDirectionChange = now;
-                }
-                const dx = npc.userData.targetX - npc.position.x;
-                const dz = npc.userData.targetZ - npc.position.z;
-                const dist = Math.sqrt(dx * dx + dz * dz);
-                if (dist > 1) {
-                    npc.position.x += (dx / dist) * npc.userData.speed;
-                    npc.position.z += (dz / dist) * npc.userData.speed;
-                }
-                // NPCs eat objects too
-                const npcRadius = npc.userData.size;
-                objects.forEach((obj, index) => {
-                    if (obj.userData.beingEaten) return;
-                    const distance = Math.sqrt(
-                        Math.pow(obj.position.x - npc.position.x, 2) +
-                        Math.pow(obj.position.z - npc.position.z, 2)
-                    );
-                    if (distance < npcRadius && obj.userData.size < npcRadius) {
-                        obj.userData.beingEaten = true;
-                        npc.userData.size = Math.min(npc.userData.size + 0.1, 15);
-                        npc.geometry.dispose();
-                        npc.geometry = new THREE.CylinderGeometry(
-                            npc.userData.size,
-                            npc.userData.size,
-                            2,
-                            32
-                        );
-                    }
-                });
             });
-            // Check level completion
-            if (objects.length === 0) {
-                nextLevel();
-            }
-        }
-        // Level Management
-        function nextLevel() {
-            level++;
-            playSound('levelup');
-            // Clear existing objects
-            objects.forEach(obj => scene.remove(obj));
-            objects = [];
-            // Create new objects
-            createObjects();
-            // Change ground color
-            const colors = [0xffffff, 0x00ff00, 0x0000ff, 0xffff00, 0xff00ff, 0xff8800];
-            ground.material.color.setHex(colors[level % colors.length]);
-            // Reset player position
-            playerHole.position.set(0, -1, 0);
-            updateHUD();
-        }
-        // UI Functions
-        function updateHUD() {
-            document.getElementById('level').textContent = level;
-            document.getElementById('size').textContent = playerHole.geometry.parameters.radius.toFixed(1);
-            document.getElementById('objects').textContent = objects.length;
-            document.getElementById('score').textContent = score;
         }
-        function startGame() {
-            document.getElementById('mainMenu').style.display = 'none';
-            document.getElementById('gameCanvas').style.display = 'block';
-            document.getElementById('gameHUD').style.display = 'block';
-            if (window.innerWidth <= 768) {
-                document.getElementById('mobileControls').style.display = 'block';
-            }
-            if (!scene) {
-                initScene();
-                setupControls();
-                initSound();
             }
-            gameRunning = true;
-            updateHUD();
-            animate();
-        }
-        function togglePause() {
-            if (!gameRunning) return;
-            gameRunning = false;
-            document.getElementById('pauseMenu').style.display = 'block';
-            cancelAnimationFrame(animationId);
-        }
-        function resumeGame() {
-            document.getElementById('pauseMenu').style.display = 'none';
-            gameRunning = true;
-            animate();
-        }
-        function backToMenu() {
-            gameRunning = false;
-            cancelAnimationFrame(animationId);
-            document.getElementById('pauseMenu').style.display = 'none';
-            document.getElementById('gameCanvas').style.display = 'none';
-            document.getElementById('gameHUD').style.display = 'none';
-            document.getElementById('mobileControls').style.display = 'none';
-            document.getElementById('mainMenu').style.display = 'flex';
-        }
-        function showSkins() {
-            document.getElementById('skinModal').style.display = 'block';
-        }
-        function closeSkinModal() {
-            document.getElementById('skinModal').style.display = 'none';
         }
-        function selectSkin(skin, element) {
-            // Remove selected class from all options
-            document.querySelectorAll('.skinOption').forEach(opt => {
-                opt.classList.remove('selected');
-            });
-            // Add selected class to clicked option
-            element.classList.add('selected');
             currentSkin = skin;
-            applySkin();
-        }
-        function applySkin() {
-            const colors = {
-                classic: 0x000000,
-                fire: 0xff4500,
-                disco: 0xff00ff,
-                ice: 0x00ffff,
-                galaxy: 0x4b0082,
-                rainbow: 0xff00ff
-            };
-            if (playerHole) {
-                playerHole.material.color.setHex(colors[currentSkin] || 0x000000);
-                // Update ring color for special skins
-                const ring = playerHole.children[0];
-                if (ring) {
-                    if (currentSkin === 'rainbow') {
-                        ring.material.color.setHSL((Date.now() / 1000) % 1, 1, 0.5);
-                    } else {
-                        ring.material.color.setHex(colors[currentSkin] || 0xff00ff);
-                    }
-                }
-            }
-        }
-        function showInstructions() {
-            document.getElementById('instructionsModal').style.display = 'block';
-        }
-        function closeInstructions() {
-            document.getElementById('instructionsModal').style.display = 'none';
-        }
-        function toggleSound() {
-            soundEnabled = !soundEnabled;
-            const status = soundEnabled ? 'الصوت مفعل 🔊' : 'الصوت معطل 🔇';
-            // Create toast notification
-            const toast = document.createElement('div');
-            toast.textContent = status;
-            toast.style.cssText = `
-                position: fixed;
-                top: 50%;
-                left: 50%;
-                transform: translate(-50%, -50%);
-                background: rgba(0, 0, 0, 0.9);
-                color: ${soundEnabled ? '#00ff00' : '#ff0000'};
-                padding: 20px 40px;
-                border-radius: 10px;
-                font-size: 1.2rem;
-                font-weight: bold;
-                z-index: 3000;
-                animation: fadeInOut 2s ease-in-out;
-            `;
-            document.body.appendChild(toast);
-            setTimeout(() => {
-                document.body.removeChild(toast);
-            }, 2000);
         }
-        // Animation Loop
         function animate() {
-            if (!gameRunning) return;
-            animationId = requestAnimationFrame(animate);
-            updateGame();
-            // Animate rainbow skin
-            if (currentSkin === 'rainbow' && playerHole && playerHole.children[0]) {
-                playerHole.children[0].material.color.setHSL((Date.now() / 1000) % 1, 1, 0.5);
             }
             renderer.render(scene, camera);
         }
-        // Handle Window Resize
-        window.addEventListener('resize', () => {
-            if (camera && renderer) {
-                camera.aspect = window.innerWidth / window.innerHeight;
-                camera.updateProjectionMatrix();
-                renderer.setSize(window.innerWidth, window.innerHeight);
-            }
-        });
-        // Add fade animation
-        const style = document.createElement('style');
-        style.textContent = `
-            @keyframes fadeInOut {
-                0% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
-                20% { opacity: 1;

 <!DOCTYPE html>
 <html lang="ar" dir="rtl">
 <head>
     <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+    <title>EATER HOLE 3D ULTRA - لعبة الحفرة الآكلة</title>
     <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
     <style>
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
+            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
             overflow: hidden;
+            background: linear-gradient(135deg, #0f0c29, #302b63, #24243e);
+            height: 100vh;
+            color: white;
             touch-action: none;
         }
         #gameContainer {
             position: relative;
+            width: 100%;
             height: 100vh;
         }
         #gameCanvas {
+            position: absolute;
+            top: 0;
+            left: 0;
             width: 100%;
             height: 100%;
+            z-index: 1;
         }
+        #menuScreen {
             position: absolute;
             top: 0;
             left: 0;
             width: 100%;
             height: 100%;
             display: flex;
             flex-direction: column;
             justify-content: center;
             align-items: center;
+            background: rgba(0, 0, 0, 0.8);
+            z-index: 10;
+            transition: opacity 0.5s;
         }
         .gameTitle {
+            font-size: 3.5rem;
+            margin-bottom: 1rem;
+            text-align: center;
+            background: linear-gradient(45deg, #ff00cc, #3333ff);
             -webkit-background-clip: text;
             background-clip: text;
+            color: transparent;
+            text-shadow: 0 0 10px rgba(255, 0, 204, 0.5);
+            font-weight: bold;
+            letter-spacing: 2px;
         }
         .developer {
             font-size: 1.2rem;
+            margin-bottom: 2rem;
+            color: #aaa;
         }
+        .btn {
+            background: linear-gradient(45deg, #ff00cc, #3333ff);
             color: white;
+            border: none;
+            padding: 15px 30px;
+            font-size: 1.2rem;
+            margin: 10px;
             border-radius: 50px;
             cursor: pointer;
+            width: 250px;
+            text-align: center;
             transition: all 0.3s;
+            box-shadow: 0 0 15px rgba(255, 0, 204, 0.5);
         }
+        .btn:hover {
+            transform: scale(1.05);
+            box-shadow: 0 0 20px rgba(255, 0, 204, 0.8);
         }
+        .skinSelection {
+            display: flex;
+            margin: 20px 0;
         }
+        .skinOption {
             width: 60px;
             height: 60px;
+            margin: 0 10px;
             border-radius: 50%;
+            cursor: pointer;
+            border: 2px solid transparent;
+            transition: all 0.3s;
         }
+        .skinOption.selected {
+            border-color: #ff00cc;
+            transform: scale(1.1);
+            box-shadow: 0 0 10px #ff00cc;
+        }
+        #classicSkin {
+            background: linear-gradient(45deg, #000, #333);
+        }
+        #fireSkin {
+            background: linear-gradient(45deg, #ff0000, #ff9900);
+        }
+        #discoSkin {
+            background: linear-gradient(45deg, #00ff00, #0000ff);
+        }
+        #hud {
+            position: absolute;
+            top: 20px;
             left: 20px;
+            z-index: 5;
+            background: rgba(0, 0, 0, 0.6);
+            padding: 15px;
+            border-radius: 15px;
+            min-width: 200px;
+        }
+        .hudItem {
+            margin: 5px 0;
             display: flex;
+            justify-content: space-between;
         }
+        .hudLabel {
+            color: #aaa;
         }
+        .hudValue {
+            color: #ff00cc;
+            font-weight: bold;
         }
+        #mobileControls {
             position: absolute;
+            bottom: 30px;
             left: 0;
             width: 100%;
+            display: flex;
+            justify-content: space-around;
+            z-index: 5;
         }
+        .controlBtn {
             width: 80px;
             height: 80px;
+            background: rgba(255, 255, 255, 0.2);
             border-radius: 50%;
+            display: flex;
+            justify-content: center;
+            align-items: center;
             font-size: 2rem;
             color: white;
+            user-select: none;
+            touch-action: none;
+            backdrop-filter: blur(5px);
+            border: 2px solid rgba(255, 0, 204, 0.5);
         }
+        #levelComplete {
             position: absolute;
             top: 50%;
             left: 50%;
             transform: translate(-50%, -50%);
+            background: rgba(0, 0, 0, 0.8);
             padding: 30px;
             border-radius: 20px;
+            text-align: center;
+            z-index: 20;
             display: none;
         }
+        .levelTitle {
+            font-size: 2.5rem;
+            color: #ff00cc;
             margin-bottom: 20px;
         }
+        .credits {
+            position: absolute;
+            bottom: 20px;
+            right: 20px;
+            color: #aaa;
+            font-size: 0.9rem;
+            z-index: 5;
         }
+        .credits a {
+            color: #ff00cc;
+            text-decoration: none;
         }
         @media (max-width: 768px) {
             .gameTitle {
+                font-size: 2.5rem;
             }
+            .btn {
+                width: 200px;
+                padding: 12px 20px;
                 font-size: 1rem;
             }
+            .controlBtn {
+                width: 70px;
+                height: 70px;
+                font-size: 1.5rem;
             }
+            #hud {
+                top: 10px;
+                left: 10px;
+                padding: 10px;
+                min-width: 160px;
             }
         }
     </style>
 </head>
 <body>
     <div id="gameContainer">
+        <canvas id="gameCanvas"></canvas>
+        <div id="menuScreen">
             <h1 class="gameTitle">EATER HOLE 3D ULTRA</h1>
+            <p class="developer">تم التطوير بواسطة: أدهم ياسر محمد</p>
+            <div class="skinSelection">
+                <div id="classicSkin" class="skinOption selected"></div>
+                <div id="fireSkin" class="skinOption"></div>
+                <div id="discoSkin" class="skinOption"></div>
             </div>
+            <button id="startBtn" class="btn">بدء اللعبة</button>
+            <button id="howToPlayBtn" class="btn">كيفية اللعب</button>
+            <button id="contactBtn" class="btn">الاتصال بالمطور</button>
         </div>
+        <div id="hud">
+            <div class="hudItem">
+                <span class="hudLabel">المستوى:</span>
+                <span id="levelValue" class="hudValue">1</span>
+            </div>
+            <div class="hudItem">
+                <span class="hudLabel">حجم الحفرة:</span>
+                <span id="sizeValue" class="hudValue">1.0</span>
+            </div>
+            <div class="hudItem">
+                <span class="hudLabel">الأجسام المتبقية:</span>
+                <span id="objectsValue" class="hudValue">50</span>
+            </div>
+            <div class="hudItem">
+                <span class="hudLabel">النقاط:</span>
+                <span id="scoreValue" class="hudValue">0</span>
             </div>
         </div>
         <div id="mobileControls">
+            <div class="controlBtn" id="upBtn">↑</div>
+            <div class="controlBtn" id="leftBtn">←</div>
+            <div class="controlBtn" id="downBtn">↓</div>
+            <div class="controlBtn" id="rightBtn">→</div>
+        </div>
+        <div id="levelComplete">
+            <h2 class="levelTitle">تهانينا! أكملت المستوى</h2>
+            <p>تم التهام <span id="eatenCount">0</span> جسم</p>
+            <p>حصلت على <span id="pointsEarned">0</span> نقطة</p>
+            <button id="nextLevelBtn" class="btn">المستوى التالي</button>
+        </div>
+        <div class="credits">
+            Built with <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank">anycoder</a>
         </div>
     </div>
     <script>
+        // Game variables
         let scene, camera, renderer;
+        let player, npcs = [];
         let objects = [];
+        let ground;
         let level = 1;
+        let playerSize = 1;
         let score = 0;
+        let objectsToEat = 50;
         let currentSkin = 'classic';
+        let gameStarted = false;
+        let playerVelocity = { x: 0, z: 0 };
+        const playerSpeed = 0.1;
+        // Initialize the game
+        function init() {
+            // Create scene
             scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x0a0a2a);
+            scene.fog = new THREE.Fog(0x0a0a2a, 20, 100);
+            // Create camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(0, 20, 0);
             camera.lookAt(0, 0, 0);
+            // Create renderer
             renderer = new THREE.WebGLRenderer({
+                canvas: document.getElementById('gameCanvas'),
                 antialias: true
             });
             renderer.setSize(window.innerWidth, window.innerHeight);
+            renderer.setPixelRatio(window.devicePixelRatio);
+            // Add lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
             scene.add(ambientLight);
             const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(10, 20, 10);
             scene.add(directionalLight);
+            // Create ground
             createGround();
+            // Create player
+            createPlayer();
+            // Create NPCs
             createNPCs();
+            // Create objects
+            createObjects();
+            // Event listeners
+            setupEventListeners();
+            // Start game loop
+            animate();
         }
+        // Create ground
         function createGround() {
+            const groundGeometry = new THREE.PlaneGeometry(100, 100);
+            const groundMaterial = new THREE.MeshStandardMaterial({
+                color: level === 1 ? 0xffffff : 0xdddddd,
+                roughness: 0.8,
+                metalness: 0.2
             });
             ground = new THREE.Mesh(groundGeometry, groundMaterial);
             ground.rotation.x = -Math.PI / 2;
             scene.add(ground);
+            // Add grid helper for level 1
+            if (level === 1) {
+                const gridHelper = new THREE.GridHelper(100, 20, 0x444444, 0x222222);
+                scene.add(gridHelper);
+            }
         }
+        // Create player
+        function createPlayer() {
+            const geometry = new THREE.CylinderGeometry(1, 1, 0.5, 32);
+            const material = new THREE.MeshStandardMaterial({
                 color: 0x000000,
+                emissive: 0x111111,
+                roughness: 0.7,
+                metalness: 0.3
             });
+            player = new THREE.Mesh(geometry, material);
+            player.position.y = 0.25;
+            scene.add(player);
         }
+        // Create NPCs
+        function createNPCs() {
+            for (let i = 0; i < 20; i++) {
+                const geometry = new THREE.CylinderGeometry(0.5, 0.5, 0.4, 32);
+                const material = new THREE.MeshStandardMaterial({
+                    color: 0xff0000,
+                    emissive: 0x220000,
+                    roughness: 0.7,
+                    metalness: 0.3
+                });
+                const npc = new THREE.Mesh(geometry, material);
+                // Random position
+                npc.position.x = (Math.random() - 0.5) * 80;
+                npc.position.z = (Math.random() - 0.5) * 80;
+                npc.position.y = 0.2;
+                // Random direction
+                npc.userData.direction = new THREE.Vector3(
+                    Math.random() - 0.5,
+                    0,
+                    Math.random() - 0.5
+                ).normalize();
+                npc.userData.speed = 0.02 + Math.random() * 0.03;
+                npc.userData.size = 0.5;
+                scene.add(npc);
+                npcs.push(npc);
+            }
+        }
+        // Create objects to eat
         function createObjects() {
+            objects = [];
+            for (let i = 0; i < objectsToEat; i++) {
+                let object;
+                // Random object type (building, tree, rock)
+                const objectType = Math.floor(Math.random() * 3);
+                switch(objectType) {
+                    case 0: // Building
+                        const width = 1 + Math.random() * 3;
+                        const height = 2 + Math.random() * 5;
+                        const depth = 1 + Math.random() * 3;
+                        const geometry = new THREE.BoxGeometry(width, height, depth);
+                        const material = new THREE.MeshStandardMaterial({
+                            color: 0x3498db,
+                            roughness: 0.8
+                        });
+                        object = new THREE.Mesh(geometry, material);
+                        object.position.y = height / 2;
+                        object.userData.size = Math.max(width, depth);
+                        break;
+                    case 1: // Tree
+                        const trunkGeometry = new THREE.CylinderGeometry(0.3, 0.4, 2, 8);
+                        const trunkMaterial = new THREE.MeshStandardMaterial({ color: 0x8B4513 });
+                        const trunk = new THREE.Mesh(trunkGeometry, trunkMaterial);
+                        trunk.position.y = 1;
+                        const leavesGeometry = new THREE.ConeGeometry(1.5, 3, 8);
+                        const leavesMaterial = new THREE.MeshStandardMaterial({ color: 0x27ae60 });
+                        const leaves = new THREE.Mesh(leavesGeometry, leavesMaterial);
+                        leaves.position.y = 3.5;
+                        object = new THREE.Group();
+                        object.add(trunk);
+                        object.add(leaves);
+                        object.userData.size = 1.5;
+                        break;
+                    case 2: // Rock
+                        const rockGeometry = new THREE.DodecahedronGeometry(0.5 + Math.random() * 1, 0);
+                        const rockMaterial = new THREE.MeshStandardMaterial({
+                            color: 0x7f8c8d,
+                            roughness: 0.9
+                        });
+                        object = new THREE.Mesh(rockGeometry, rockMaterial);
+                        object.userData.size = 0.8 + Math.random() * 0.7;
+                        break;
+                }
+                // Random position
+                object.position.x = (Math.random() - 0.5) * 80;
+                object.position.z = (Math.random() - 0.5) * 80;
+                // Random rotation for variety
+                object.rotation.y = Math.random() * Math.PI * 2;
                 scene.add(object);
                 objects.push(object);
             }
+            // Update HUD
+            document.getElementById('objectsValue').textContent = objects.length;
+        }
+        // Update NPCs
+        function updateNPCs() {
+            for (const npc of npcs) {
+                // Move NPC
+                npc.position.x += npc.userData.direction.x * npc.userData.speed;
+                npc.position.z += npc.userData.direction.z * npc.userData.speed;
+                // Boundary check
+                if (Math.abs(npc.position.x) > 45 || Math.abs(npc.position.z) > 45) {
+                    npc.userData.direction.x = -npc.userData.direction.x;
+                    npc.userData.direction.z = -npc.userData.direction.z;
+                }
+                // Random direction change
+                if (Math.random() < 0.01) {
+                    npc.userData.direction = new THREE.Vector3(
+                        Math.random() - 0.5,
+                        0,
+                        Math.random() - 0.5
+                    ).normalize();
+                }
+                // Check if NPC can eat objects
+                for (let i = objects.length - 1; i >= 0; i--) {
+                    const object = objects[i];
+                    const distance = npc.position.distanceTo(object.position);
+                    if (distance < npc.userData.size + 0.5 && object.userData.size < npc.userData.size) {
+                        // NPC eats the object
+                        scene.remove(object);
+                        objects.splice(i, 1);
+                        // NPC grows
+                        npc.userData.size += 0.05;
+                        npc.scale.set(
+                            npc.userData.size / 0.5,
+                            1,
+                            npc.userData.size / 0.5
+                        );
+                        // Update HUD
+                        document.getElementById('objectsValue').textContent = objects.length;
+                    }
+                }
             }
         }
+        // Check collisions
+        function checkCollisions() {
+            for (let i = objects.length - 1; i >= 0; i--) {
+                const object = objects[i];
+                const distance = player.position.distanceTo(object.position);
+                if (distance < playerSize + 1 && object.userData.size < playerSize) {
+                    // Player eats the object
+                    scene.remove(object);
+                    objects.splice(i, 1);
+                    // Player grows
+                    playerSize += 0.1;
+                    player.scale.set(playerSize, 1, playerSize);
+                    // Update score
+                    score += Math.floor(object.userData.size * 10);
+                    // Play sound
+                    playEatSound();
+                    // Update HUD
+                    document.getElementById('sizeValue').textContent = playerSize.toFixed(1);
+                    document.getElementById('objectsValue').textContent = objects.length;
+                    document.getElementById('scoreValue').textContent = score;
+                    // Check level completion
+                    if (objects.length === 0) {
+                        completeLevel();
+                    }
+                }
             }
         }
+        // Complete level
+        function completeLevel() {
+            gameStarted = false;
+            document.getElementById('levelComplete').style.display = 'block';
+            document.getElementById('eatenCount').textContent = objectsToEat;
+            document.getElementById('pointsEarned').textContent = score;
+        }
+        // Play sound when eating
+        function playEatSound() {
             try {
+                // Create audio context
+                const audioContext = new (window.AudioContext || window.webkitAudioContext)();
+                // Create oscillator
                 const oscillator = audioContext.createOscillator();
                 const gainNode = audioContext.createGain();
                 oscillator.connect(gainNode);
                 gainNode.connect(audioContext.destination);
+                // Configure sound
+                oscillator.type = 'sine';
+                oscillator.frequency.setValueAtTime(300, audioContext.currentTime);
+                oscillator.frequency.exponentialRampToValueAtTime(50, audioContext.currentTime + 0.3);
+                gainNode.gain.setValueAtTime(0.3, audioContext.currentTime);
+                gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.3);
+                // Play sound
+                oscillator.start();
+                oscillator.stop(audioContext.currentTime + 0.3);
+            } catch (e) {
+                console.log("Audio not supported:", e);
             }
         }
+        // Setup event listeners
+        function setupEventListeners() {
+            // Start button
+            document.getElementById('startBtn').addEventListener('click', () => {
+                document.getElementById('menuScreen').style.display = 'none';
+                gameStarted = true;
+            });
+            // Skin selection
+            document.getElementById('classicSkin').addEventListener('click', () => {
+                selectSkin('classic');
+            });
+            document.getElementById('fireSkin').addEventListener('click', () => {
+                selectSkin('fire');
+            });
+            document.getElementById('discoSkin').addEventListener('click', () => {
+                selectSkin('disco');
+            });
+            // Contact button
+            document.getElementById('contactBtn').addEventListener('click', () => {
+                window.location.href = 'https://wa.me/201097399624';
+            });
+            // Next level button
+            document.getElementById('nextLevelBtn').addEventListener('click', () => {
+                level++;
+                objectsToEat = 50 + level * 5;
+                document.getElementById('levelComplete').style.display = 'none';
+                document.getElementById('levelValue').textContent = level;
+                // Reset scene
+                while(scene.children.length > 0) {
+                    scene.remove(scene.children[0]);
+                }
+                // Recreate game elements
+                createGround();
+                createPlayer();
+                createNPCs();
+                createObjects();
+                // Reset player size
+                playerSize = 1;
+                player.scale.set(1, 1, 1);
+                // Update HUD
+                document.getElementById('sizeValue').textContent = playerSize.toFixed(1);
+                document.getElementById('objectsValue').textContent = objects.length;
+                gameStarted = true;
+            });
+            // Mobile controls
+            const controlBtns = document.querySelectorAll('.controlBtn');
+            controlBtns.forEach(btn => {
+                btn.addEventListener('touchstart', (e) => {
+                    e.preventDefault();
+                    handleControl(btn.id);
+                });
+            });
             // Keyboard controls
+            window.addEventListener('keydown', (e) => {
+                if (!gameStarted) return;
                 switch(e.key) {
                     case 'ArrowUp':
                     case 'w':
                     case 'W':
+                        playerVelocity.z = -playerSpeed;
                         break;
                     case 'ArrowDown':
                     case 's':
                     case 'S':
+                        playerVelocity.z = playerSpeed;
                         break;
                     case 'ArrowLeft':
                     case 'a':
                     case 'A':
+                        playerVelocity.x = -playerSpeed;
                         break;
                     case 'ArrowRight':
                     case 'd':
                     case 'D':
+                        playerVelocity.x = playerSpeed;
                         break;
                 }
             });
+            window.addEventListener('keyup', (e) => {
                 switch(e.key) {
                     case 'ArrowUp':
                     case 'w':
                     case 'W':
+                    case 'ArrowDown':
                     case 's':
                     case 'S':
+                        playerVelocity.z = 0;
                         break;
                     case 'ArrowLeft':
                     case 'a':
                     case 'A':
+                    case 'ArrowRight':
                     case 'd':
                     case 'D':
+                        playerVelocity.x = 0;
                         break;
                 }
             });
+            // Window resize
+            window.addEventListener('resize', () => {
+                camera.aspect = window.innerWidth / window.innerHeight;
+                camera.updateProjectionMatrix();
+                renderer.setSize(window.innerWidth, window.innerHeight);
             });
         }
+        // Handle mobile controls
+        function handleControl(btnId) {
+            if (!gameStarted) return;
+            switch(btnId) {
+                case 'upBtn':
+                    playerVelocity.z = -playerSpeed;
+                    break;
+                case 'downBtn':
+                    playerVelocity.z = playerSpeed;
+                    break;
+                case 'leftBtn':
+                    playerVelocity.x = -playerSpeed;
+                    break;
+                case 'rightBtn':
+                    playerVelocity.x = playerSpeed;
+                    break;
             }
+            // Reset velocity after a short time
+            setTimeout(() => {
+                playerVelocity.x = 0;
+                playerVelocity.z = 0;
+            }, 200);
         }
+        // Select skin
+        function selectSkin(skin) {
             currentSkin = skin;
+            // Update UI
+            document.querySelectorAll('.skinOption').forEach(option => {
+                option.classList.remove('selected');
+            });
+            document.getElementById(skin + 'Skin').classList.add('selected');
+            // Update player material (in a real game, you'd change the player's appearance)
         }
+        // Game loop
         function animate() {
+            requestAnimationFrame(animate);
+            if (gameStarted) {
+                // Update player position
+                player.position.x += playerVelocity.x;
+                player.position.z += playerVelocity.z;
+                // Boundary check
+                if (player.position.x < -45) player.position.x = -45;
+                if (player.position.x > 45) player.position.x = 45;
+                if (player.position.z < -45) player.position.z = -45;
+                if (player.position.z > 45) player.position.z = 45;
+                // Update camera to follow player
+                camera.position.x = player.position.x;
+                camera.position.z = player.position.z + 10;
+                camera.lookAt(player.position.x, 0, player.position.z);
+                // Update NPCs
+                updateNPCs();
+                // Check collisions
+                checkCollisions();
             }
             renderer.render(scene, camera);
         }
+        // Start the game when page loads
+        window.onload = init;
+    </script>
+</body>
+</html>