Spaces:

kimhyunwoo
/

fruit3d

Running

App Files Files Community

kimhyunwoo commited on 4 days ago

Commit

d20b9cd

verified ·

1 Parent(s): 9b68ef7

Update index.html

Browse files

Files changed (1) hide show

index.html +284 -106

index.html CHANGED Viewed

@@ -1,123 +1,301 @@
 <!DOCTYPE html>
-<html lang="ko">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
-    <title>3D 망고 클리커</title>
-    <script src="https://aframe.io/releases/1.5.0/aframe.min.js"></script>
-    <script>
-        // 클릭 시 망고 반응 및 점수 처리 로직
-        AFRAME.registerComponent('clickable-mango', {
-            schema: {
-                scoreDisplay: {type: 'selector'}
-            },
-            init: function () {
-                this.score = 0;
-                this.audioContext = new (window.AudioContext || window.webkitAudioContext)();
-                this.el.addEventListener('click', () => {
-                    // 1. 점수 증가 및 표시
-                    this.score++;
-                    if (this.data.scoreDisplay) {
-                        this.data.scoreDisplay.setAttribute('value', `점수: ${this.score}`);
-                    }
-                    // 2. 망고 점프 애니메이션 (간단한 위치 변경)
-                    let currentPosition = this.el.getAttribute('position');
-                    this.el.setAttribute('animation', {
-                        property: 'position',
-                        to: {x: currentPosition.x, y: currentPosition.y + 0.5, z: currentPosition.z},
-                        dur: 150,
-                        dir: 'alternate', // 올라갔다 내려오기
-                        loop: 1
-                    });
-                    // 3. 클릭 사운드 재생
-                    this.playSound(440, 0.1, 'triangle'); // A4 note
-                    // 4. 망고 위치 랜덤 변경 (클릭 후 잠시 뒤)
-                    setTimeout(() => {
-                        const newX = (Math.random() - 0.5) * 4; // -2 to 2
-                        const newY = Math.random() * 1 + 1;   // 1 to 2 (height)
-                        const newZ = (Math.random() - 0.5) * 4 - 2; // -4 to 0 (depth)
-                        this.el.setAttribute('position', `${newX} ${newY} ${newZ}`);
-                         // 이전 애니메이션 제거 (A-Frame은 동일 property 애니메이션을 덮어쓰지만, 명시적 제거도 가능)
-                        this.el.removeAttribute('animation');
-                    }, 300);
-                });
-            },
-            playSound: function(frequency, duration, type) {
-                if (!this.audioContext) return;
-                const oscillator = this.audioContext.createOscillator();
-                const gainNode = this.audioContext.createGain();
-                oscillator.type = type;
-                oscillator.frequency.setValueAtTime(frequency, this.audioContext.currentTime);
-                gainNode.gain.setValueAtTime(0.2, this.audioContext.currentTime);
-                gainNode.gain.exponentialRampToValueAtTime(0.001, this.audioContext.currentTime + duration);
-                oscillator.connect(gainNode);
-                gainNode.connect(this.audioContext.destination);
-                oscillator.start();
-                oscillator.stop(this.audioContext.currentTime + duration);
-            }
-        });
-    </script>
     <style>
-        /* UI를 위한 간단한 스타일 (A-Frame은 캔버스 위에 HTML 요소 오버레이 가능) */
-        #ui-overlay {
             position: absolute;
-            top: 20px;
-            left: 20px;
-            z-index: 10;
             background-color: rgba(0,0,0,0.5);
             color: white;
-            padding: 10px;
             border-radius: 5px;
-            font-family: Arial, sans-serif;
         }
     </style>
 </head>
 <body>
-    <!-- A-Frame Scene -->
-    <a-scene background="color: #87CEEB"> <!-- 하늘색 배경 -->
-        <!-- 카메라 + 커서 (클릭 인터랙션용) -->
-        <a-entity camera look-controls position="0 1.6 0">
-            <a-entity cursor="fuse: false; rayOrigin: mouse;"
-                      position="0 0 -1"
-                      geometry="primitive: ring; radiusInner: 0.01; radiusOuter: 0.015"
-                      material="color: white; shader: flat; transparent: true; opacity: 0.5">
-            </a-entity>
-        </a-entity>
-        <!-- 망고 (구체로 표현) -->
-        <a-sphere id="mango"
-                  position="0 1.5 -3"
-                  radius="0.5"
-                  color="#FFBF00"  <!-- 망고 색상 -->
-                  shadow="cast: true"
-                  clickable-mango="scoreDisplay: #scoreText"> <!-- 커스텀 컴포넌트 적용 -->
-             <a-light type="point" color="yellow" intensity="0.3" position="0 0.2 0"></a-light> <!-- 망고 자체에서 약간의 빛 -->
-        </a-sphere>
-        <!-- 바닥 -->
-        <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7CFC00" shadow="receive: true"></a-plane> <!-- 잔디색 바닥 -->
-        <!-- 조명 -->
-        <a-light type="ambient" color="#888"></a-light>
-        <a-light type="directional" color="#FFF" intensity="0.6" position="-1 1 1"></a-light>
-        <!-- UI 텍스트 (A-Frame의 a-text 사용) -->
-        <a-text id="scoreText" value="점수: 0" position="-1.8 2.5 -3" color="black" width="4"></a-text>
-        <a-text value="망고를 클릭하세요!" position="-1.8 2.8 -3" color="black" width="5"></a-text>
-    </a-scene>
-    <!-- HTML UI Overlay (선택 사항, A-Frame 외부 HTML로 UI 구성) -->
-    <!--
-    <div id="ui-overlay">
-        <h2 id="score-html">점수: 0</h2>
-        <p>망고를 클릭하세요!</p>
-    </div>
-    -->
 </body>
 </html>

 <!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>