Spaces:

kimhyunwoo
/

fruit3d

Running

File size: 12,080 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
    <title>Fruit Fall 3D</title>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
    <style>
        body { margin: 0; overflow: hidden; font-family: Arial, sans-serif; display: flex; justify-content: center; align-items: center; height: 100vh; background-color: #f0f0f0; }
        #gameCanvas { display: block; }
        #ui-container {
            position: absolute;
            top: 10px;
            left: 10px;
            padding: 10px;
            background-color: rgba(0,0,0,0.5);
            color: white;
            border-radius: 5px;
            z-index: 100;
        }
        #score { font-size: 1.5em; margin-bottom: 5px; }
        #start-button, #reset-button {
            padding: 8px 15px;
            font-size: 1em;
            background-color: #4CAF50;
            color: white;
            border: none;
            border-radius: 3px;
            cursor: pointer;
            margin-top: 5px;
        }
        #reset-button { background-color: #f44336; display: none;}
        #game-over-message {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            color: white;
            background-color: rgba(0,0,0,0.7);
            padding: 20px;
            border-radius: 10px;
            font-size: 2em;
            text-align: center;
            z-index: 101;
            display: none; /* Hidden by default */
        }
    </style>
</head>
<body>
    <div id="ui-container">
        <div id="score">Score: 0</div>
        <button id="start-button">Start Game</button>
        <button id="reset-button">Play Again</button>
    </div>
    <div id="game-over-message">
        Game Over!<br>
        <span id="final-score-message"></span>
    </div>
    <canvas id="gameCanvas"></canvas>

    <script>
        let scene, camera, renderer;
        let fruits = [];
        let score = 0;
        let gameActive = false;
        let raycaster, mouse; // For click detection
        let audioContext;
        let gameTimer, timeLeft;
        const GAME_DURATION = 30; // seconds

        const scoreElement = document.getElementById('score');
        const startButton = document.getElementById('start-button');
        const resetButton = document.getElementById('reset-button');
        const gameOverMessageDiv = document.getElementById('game-over-message');
        const finalScoreMessageSpan = document.getElementById('final-score-message');


        const fruitTypes = [
            { name: 'Mango', color: 0xFFBF00, size: 0.5, points: 10 },
            { name: 'Apple', color: 0xFF0000, size: 0.4, points: 10 },
            { name: 'Banana', color: 0xFFFF00, size: 0.35, points: 15 }, // Represented as sphere
            { name: 'Grapes', color: 0x800080, size: 0.3, points: 20 },
            { name: 'Watermelon', color: 0x00FF00, size: 0.7, points: 5 }
        ];

        function initAudio() {
            if (!audioContext) {
                audioContext = new (window.AudioContext || window.webkitAudioContext)();
            }
        }

        function playSound(type = 'click', freq = 440, duration = 0.05) {
            if (!audioContext) return;
            const oscillator = audioContext.createOscillator();
            const gainNode = audioContext.createGain();
            oscillator.connect(gainNode);
            gainNode.connect(audioContext.destination);

            oscillator.type = (type === 'miss') ? 'sawtooth' : 'triangle';
            oscillator.frequency.setValueAtTime(freq, audioContext.currentTime);
            gainNode.gain.setValueAtTime(0.15, audioContext.currentTime); // Lowered volume
            gainNode.gain.exponentialRampToValueAtTime(0.001, audioContext.currentTime + duration);
            
            oscillator.start();
            oscillator.stop(audioContext.currentTime + duration);
        }

        function init() {
            // Scene
            scene = new THREE.Scene();
            scene.background = new THREE.Color(0x87CEEB); // Sky blue

            // Camera
            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
            camera.position.set(0, 2, 7); // Positioned to see the falling fruits well
            camera.lookAt(0, 0, 0);

            // Renderer
            renderer = new THREE.WebGLRenderer({ canvas: document.getElementById('gameCanvas'), antialias: true });
            renderer.setSize(window.innerWidth, window.innerHeight);
            renderer.shadowMap.enabled = true;

            // Lighting
            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
            scene.add(ambientLight);
            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
            directionalLight.position.set(5, 10, 7);
            directionalLight.castShadow = true;
            scene.add(directionalLight);

            // Ground (optional, for visual reference)
            const groundGeometry = new THREE.PlaneGeometry(20, 20);
            const groundMaterial = new THREE.MeshStandardMaterial({ color: 0x228B22, side: THREE.DoubleSide }); // Forest green
            const ground = new THREE.Mesh(groundGeometry, groundMaterial);
            ground.rotation.x = -Math.PI / 2;
            ground.position.y = -5; // Fruits fall past this
            ground.receiveShadow = true;
            scene.add(ground);

            // Raycaster for mouse clicks
            raycaster = new THREE.Raycaster();
            mouse = new THREE.Vector2();

            // Event Listeners
            window.addEventListener('resize', onWindowResize, false);
            renderer.domElement.addEventListener('click', onClick, false); // For desktop
            renderer.domElement.addEventListener('touchstart', onTouch, false); // For mobile

            startButton.addEventListener('click', startGame);
            resetButton.addEventListener('click', startGame); // Reset button also starts the game
        }

        function startGame() {
            initAudio();
            score = 0;
            timeLeft = GAME_DURATION;
            updateScoreDisplay();
            gameActive = true;
            fruits.forEach(fruit => scene.remove(fruit.mesh)); // Clear existing fruits
            fruits = [];
            
            startButton.style.display = 'none';
            resetButton.style.display = 'none';
            gameOverMessageDiv.style.display = 'none';

            if (gameTimer) clearInterval(gameTimer);
            gameTimer = setInterval(() => {
                timeLeft--;
                // Optionally display timer: scoreElement.textContent = `Score: ${score} | Time: ${timeLeft}`;
                if (timeLeft <= 0) {
                    endGame();
                }
            }, 1000);

            spawnFruitLoop(); // Start spawning fruits
            if (!renderer.xr.isPresenting) animate(); // Ensure animate isn't called twice if in XR
        }
        
        function endGame() {
            gameActive = false;
            clearInterval(gameTimer);
            clearTimeout(fruitSpawnTimeout); // Stop spawning new fruits

            finalScoreMessageSpan.textContent = `Your Score: ${score}`;
            gameOverMessageDiv.style.display = 'flex';
            resetButton.style.display = 'inline-block';
        }


        let fruitSpawnTimeout;
        function spawnFruitLoop() {
            if (!gameActive) return;
            createFruit();
            const spawnInterval = Math.random() * 1500 + 500; // 0.5 to 2 seconds
            fruitSpawnTimeout = setTimeout(spawnFruitLoop, spawnInterval);
        }

        function createFruit() {
            if (!gameActive) return;

            const type = fruitTypes[Math.floor(Math.random() * fruitTypes.length)];
            const geometry = new THREE.SphereGeometry(type.size, 16, 12);
            const material = new THREE.MeshStandardMaterial({ color: type.color, roughness: 0.5, metalness: 0.1 });
            const fruitMesh = new THREE.Mesh(geometry, material);
            fruitMesh.castShadow = true;

            // Random spawn position at the top
            fruitMesh.position.x = (Math.random() - 0.5) * 10; // Range: -5 to 5
            fruitMesh.position.y = 7 + Math.random() * 3;      // Start above camera view
            fruitMesh.position.z = (Math.random() - 0.5) * 4;  // Some depth variation

            fruitMesh.userData = { type: type.name, points: type.points, fallSpeed: 0.02 + Math.random() * 0.03 };
            
            scene.add(fruitMesh);
            fruits.push({ mesh: fruitMesh, data: fruitMesh.userData });
        }

        function onWindowResize() {
            camera.aspect = window.innerWidth / window.innerHeight;
            camera.updateProjectionMatrix();
            renderer.setSize(window.innerWidth, window.innerHeight);
        }
        
        function handleInteraction(clientX, clientY) {
            if (!gameActive) return;

            mouse.x = (clientX / window.innerWidth) * 2 - 1;
            mouse.y = -(clientY / window.innerHeight) * 2 + 1;
            raycaster.setFromCamera(mouse, camera);

            const fruitMeshes = fruits.map(f => f.mesh);
            const intersects = raycaster.intersectObjects(fruitMeshes);

            if (intersects.length > 0) {
                const clickedFruitMesh = intersects[0].object;
                const fruitIndex = fruits.findIndex(f => f.mesh === clickedFruitMesh);

                if (fruitIndex !== -1) {
                    const fruitData = fruits[fruitIndex].data;
                    score += fruitData.points;
                    updateScoreDisplay();
                    playSound('click', 300 + Math.random()*200);

                    // Simple "pop" effect: shrink and remove
                    // More complex particle effects are possible but add overhead
                    clickedFruitMesh.scale.set(0.1,0.1,0.1); // Visually shrink
                    setTimeout(() => { // Remove after slight delay
                        scene.remove(clickedFruitMesh);
                    }, 50);
                    fruits.splice(fruitIndex, 1);
                }
            }
        }

        function onClick(event) {
            handleInteraction(event.clientX, event.clientY);
        }
        
        function onTouch(event) {
            if (event.touches.length > 0) {
                handleInteraction(event.touches[0].clientX, event.touches[0].clientY);
            }
        }

        function updateScoreDisplay() {
            scoreElement.textContent = `Score: ${score} | Time: ${timeLeft}`;
        }

        function animate() {
            if (!gameActive && timeLeft <= 0) { // If game ended, stop animation loop
                 return;
            }
            requestAnimationFrame(animate);

            if (gameActive) {
                // Fruit falling logic
                for (let i = fruits.length - 1; i >= 0; i--) {
                    const fruitObj = fruits[i];
                    fruitObj.mesh.position.y -= fruitObj.data.fallSpeed;
                    fruitObj.mesh.rotation.x += 0.01;
                    fruitObj.mesh.rotation.y += 0.01;

                    // Remove fruit if it falls below a certain point (miss)
                    if (fruitObj.mesh.position.y < -6) { // Below the ground plane
                        scene.remove(fruitObj.mesh);
                        fruits.splice(i, 1);
                        // playSound('miss', 150); // Optional miss sound
                        // score -= 5; // Optional penalty
                        updateScoreDisplay();
                    }
                }
            }
            renderer.render(scene, camera);
        }

        // --- Start ---
        init();
        // startGame(); // Initial call to animate if not waiting for button
    </script>
</body>
</html>