Spaces:

Dembo
/

spellbound-word-wizardry

Running

App Files Files Community

Dembo commited on Oct 13, 2025

Commit

563274e

verified ·

1 Parent(s): 643c3a4

build a 3d snake game

Browse files

Files changed (2) hide show

index.html +14 -10
snake-game.html +289 -0

index.html CHANGED Viewed

@@ -137,19 +137,19 @@
             <!-- Practice Area -->
             <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
-                <div class="p-8 hovered-element">
                     <h2 class="text-2xl font-bold text-center text-indigo-800 mb-6">Practice Zone</h2>
                     <div class="mb-6">
                         <label for="practice-word" class="block text-sm font-medium text-gray-700 mb-2">Type the word you hear:</label>
                         <div class="flex items-center space-x-2 mb-4">
                             <input type="text" id="practice-word" class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Spell the word...">
                             <button id="play-word" class="p-2 bg-indigo-100 text-indigo-600 rounded-md hover:bg-indigo-200 transition-colors">
-                                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-volume-2 w-5 h-5 hovered-element"><polygon points="11 5 6 9 2 9 2 15 6 15 11 19 11 5"></polygon><path d="M19.07 4.93a10 10 0 0 1 0 14.14M15.54 8.46a5 5 0 0 1 0 7.07"></path></svg>
                             </button>
                         </div>
-                        <div id="feedback" class="bg-red-100 text-red-800 mt-2 p-3 rounded-md hovered-element"><svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="feather feather-x-circle w-5 h-5 inline mr-2"><circle cx="12" cy="12" r="10"></circle><line x1="15" y1="9" x2="9" y2="15"></line><line x1="9" y1="9" x2="15" y2="15"></line></svg> Not quite right. Try again!</div>
                     </div>
-                    <div class="flex justify-center space-x-4 hovered-element">
                         <button id="check-spelling" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-md transition-colors">
                             Check Spelling
                         </button>
@@ -158,7 +158,7 @@
                         </button>
                     </div>
                 </div>
-</div>
         </main>
         <!-- Footer -->
@@ -174,13 +174,17 @@
                     <a href="#" class="hover:text-indigo-200 transition-colors">
                         <i data-feather="award"></i>
                     </a>
-                    <a href="#" class="hover:text-indigo-200 transition-colors">
-                        <i data-feather="settings"></i>
-                    </a>
-                </div>
                 <p class="text-indigo-200">© 2023 SpellBound - Making spelling magical</p>
                 <p class="text-indigo-300 text-sm mt-2">Created with <i data-feather="heart" class="w-4 h-4 inline text-pink-300"></i> for word enthusiasts</p>
-            </div>
         </footer>
     </div>

             <!-- Practice Area -->
             <div class="mt-12 bg-white rounded-xl shadow-md overflow-hidden">
+                <div class="p-8">
                     <h2 class="text-2xl font-bold text-center text-indigo-800 mb-6">Practice Zone</h2>
                     <div class="mb-6">
                         <label for="practice-word" class="block text-sm font-medium text-gray-700 mb-2">Type the word you hear:</label>
                         <div class="flex items-center space-x-2 mb-4">
                             <input type="text" id="practice-word" class="flex-1 px-4 py-2 border border-gray-300 rounded-md focus:ring-indigo-500 focus:border-indigo-500" placeholder="Spell the word...">
                             <button id="play-word" class="p-2 bg-indigo-100 text-indigo-600 rounded-md hover:bg-indigo-200 transition-colors">
+                                <i data-feather="volume-2" class="w-5 h-5"></i>
                             </button>
                         </div>
+                        <div id="feedback" class="hidden mt-2 p-3 rounded-md"></div>
                     </div>
+                    <div class="flex justify-center space-x-4">
                         <button id="check-spelling" class="bg-indigo-600 hover:bg-indigo-700 text-white font-medium py-2 px-6 rounded-md transition-colors">
                             Check Spelling
                         </button>
                         </button>
                     </div>
                 </div>
+            </div>
         </main>
         <!-- Footer -->
                     <a href="#" class="hover:text-indigo-200 transition-colors">
                         <i data-feather="award"></i>
                     </a>
+                <a href="#" class="hover:text-indigo-200 transition-colors">
+                    <i data-feather="settings"></i>
+                </a>
+                <a href="snake-game.html" class="hover:text-indigo-200 transition-colors">
+                    <i data-feather="gamepad"></i>
+                </a>
+</div>
                 <p class="text-indigo-200">© 2023 SpellBound - Making spelling magical</p>
                 <p class="text-indigo-300 text-sm mt-2">Created with <i data-feather="heart" class="w-4 h-4 inline text-pink-300"></i> for word enthusiasts</p>
+                <p class="text-indigo-300 text-sm mt-2"><a href="snake-game.html" class="underline hover:text-white">Play 3D Snake Game</a></p>
+</div>
         </footer>
     </div>

snake-game.html ADDED Viewed

	@@ -0,0 +1,289 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>3D Snake Game - SpellBound</title>
+    <link rel="icon" type="image/x-icon" href="/static/favicon.ico">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r128/three.min.js"></script>
+    <style>
+        body { margin: 0; padding: 0; background: #1a202c; }
+        #game-container { position: relative; width: 100vw; height: 100vh; }
+        #ui-overlay {
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            pointer-events: none;
+            z-index: 10;
+        }
+        .ui-element { pointer-events: auto; }
+        #score-display {
+            position: absolute;
+            top: 20px;
+            left: 20px;
+            color: white;
+            font-size: 24px;
+            background: rgba(0,0,0,0.5);
+            padding: 10px 20px;
+            border-radius: 10px;
+        }
+        #game-controls {
+            position: absolute;
+            bottom: 20px;
+            left: 50%;
+            transform: translateX(-50%);
+            display: flex;
+            gap: 10px;
+        }
+    </style>
+</head>
+<body>
+    <div id="game-container">
+        <div id="ui-overlay">
+            <div id="score-display" class="ui-element">Score: 0</div>
+            <div id="game-controls" class="ui-element">
+                <button id="start-btn" class="bg-green-500 hover:bg-green-600 text-white font-bold py-3 px-6 rounded-lg transition-colors">
+                Start Game
+                </button>
+                <button id="pause-btn" class="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-3 px-6 rounded-lg transition-colors">
+                Pause
+                </button>
+                <button id="reset-btn" class="bg-red-500 hover:bg-red-600 text-white font-bold py-3 px-6 rounded-lg transition-colors">
+                Reset
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Three.js 3D Snake Game
+        let scene, camera, renderer;
+        let snake = [];
+        let food;
+        let direction = { x: 1, y: 0, z: 0 };
+        let gameSpeed = 150;
+        let score = 0;
+        let gameRunning = false;
+        let gameInterval;
+        // Initialize Three.js
+        function init() {
+            // Scene
+            scene = new THREE.Scene();
+            scene.background = new THREE.Color(0x1a202c);
+            // Camera
+            camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
+            camera.position.set(15, 15, 15);
+            camera.lookAt(0, 0, 0);
+            // Renderer
+            renderer = new THREE.WebGLRenderer({ antialias: true });
+            renderer.setSize(window.innerWidth, window.innerHeight);
+            document.getElementById('game-container').appendChild(renderer.domElement);
+            // Lighting
+            const ambientLight = new THREE.AmbientLight(0xffffff, 0.6);
+            scene.add(ambientLight);
+            const directionalLight = new THREE.DirectionalLight(0xffffff, 0.8);
+            directionalLight.position.set(10, 20, 15);
+            scene.add(directionalLight);
+            // Grid helper
+            const gridHelper = new THREE.GridHelper(30, 30);
+            scene.add(gridHelper);
+            // Create initial snake
+            createSnake();
+            createFood();
+            // Event listeners
+            window.addEventListener('resize', onWindowResize);
+            document.addEventListener('keydown', handleKeyPress);
+            // UI event listeners
+            document.getElementById('start-btn').addEventListener('click', startGame);
+            document.getElementById('pause-btn').addEventListener('click', pauseGame);
+            document.getElementById('reset-btn').addEventListener('click', resetGame);
+            animate();
+        }
+        function createSnake() {
+            // Clear existing snake
+            snake.forEach(segment => scene.remove(segment));
+            snake = [];
+            // Create initial snake segments
+            for (let i = 0; i < 3; i++) {
+                const geometry = new THREE.BoxGeometry(1, 1, 1);
+                const material = new THREE.MeshPhongMaterial({ color: 0x00ff00 });
+                const segment = new THREE.Mesh(geometry, material);
+                segment.position.set(-i, 0, 0);
+                scene.add(segment);
+                snake.push(segment);
+            }
+        }
+        function createFood() {
+            if (food) scene.remove(food);
+            const geometry = new THREE.SphereGeometry(0.5, 16, 16);
+            const material = new THREE.MeshPhongMaterial({ color: 0xff0000 });
+            food = new THREE.Mesh(geometry, material);
+            // Random position within bounds (-14 to 14)
+            food.position.set(
+                Math.floor(Math.random() * 29) - 14,
+                0,
+                Math.floor(Math.random() * 29) - 14
+            );
+            scene.add(food);
+        }
+        function moveSnake() {
+            if (!gameRunning) return;
+            // Calculate new head position
+            const head = snake[0];
+            const newHead = head.clone();
+            newHead.position.x += direction.x;
+            newHead.position.z += direction.z;
+            // Check boundaries
+            if (newHead.position.x > 14 || newHead.position.x < -14 ||
+                newHead.position.z > 14 || newHead.position.z < -14) {
+                gameOver();
+                return;
+            }
+            // Check self collision
+            for (let i = 0; i < snake.length; i++) {
+                if (newHead.position.distanceTo(snake[i].position) < 0.5) {
+                    gameOver();
+                    return;
+                }
+            }
+            // Check food collision
+            if (newHead.position.distanceTo(food.position) < 1) {
+                score += 10;
+                document.getElementById('score-display').textContent = `Score: ${score}`;
+                // Increase speed slightly
+                if (score % 50 === 0 && gameSpeed > 50) {
+                    gameSpeed -= 10;
+                    clearInterval(gameInterval);
+                    gameInterval = setInterval(moveSnake, gameSpeed);
+                }
+                createFood();
+            } else {
+                // Remove tail if no food eaten
+                const tail = snake.pop();
+                scene.remove(tail);
+            }
+            // Add new head
+            scene.add(newHead);
+            snake.unshift(newHead);
+        }
+        function handleKeyPress(event) {
+            if (!gameRunning) return;
+            switch(event.key) {
+                case 'ArrowUp':
+                    if (direction.z !== 1) direction = { x: 0, y: 0, z: -1 };
+                    break;
+                case 'ArrowDown':
+                    if (direction.z !== -1) direction = { x: 0, y: 0, z: 1 };
+                    break;
+                case 'ArrowLeft':
+                    if (direction.x !== 1) direction = { x: -1, y: 0, z: 0 };
+                    break;
+                case 'ArrowRight':
+                    if (direction.x !== -1) direction = { x: 1, y: 0, z: 0 };
+                    break;
+                case 'w':
+                case 'W':
+                    if (direction.z !== 1) direction = { x: 0, y: 0, z: -1 };
+                    break;
+                case 's':
+                case 'S':
+                    if (direction.z !== -1) direction = { x: 0, y: 0, z: 1 };
+                    break;
+                case 'a':
+                case 'A':
+                    if (direction.x !== 1) direction = { x: -1, y: 0, z: 0 };
+                    break;
+                case 'd':
+                case 'D':
+                    if (direction.x !== -1) direction = { x: 1, y: 0, z: 0 };
+                    break;
+            }
+        }
+        function startGame() {
+            if (!gameRunning) {
+                gameRunning = true;
+                gameInterval = setInterval(moveSnake, gameSpeed);
+            }
+        }
+        function pauseGame() {
+            gameRunning = !gameRunning;
+            if (gameRunning) {
+                gameInterval = setInterval(moveSnake, gameSpeed);
+            } else {
+                clearInterval(gameInterval);
+            }
+        }
+        function resetGame() {
+            clearInterval(gameInterval);
+            gameRunning = false;
+            score = 0;
+            document.getElementById('score-display').textContent = `Score: ${score}`;
+            direction = { x: 1, y: 0, z: 0 };
+            createSnake();
+            createFood();
+        }
+        function gameOver() {
+            gameRunning = false;
+            clearInterval(gameInterval);
+            alert(`Game Over! Your score: ${score}\nPress OK to play again!`);
+            resetGame();
+        }
+        function onWindowResize() {
+            camera.aspect = window.innerWidth / window.innerHeight;
+            camera.updateProjectionMatrix();
+            renderer.setSize(window.innerWidth, window.innerHeight);
+        }
+        function animate() {
+            requestAnimationFrame(animate);
+            // Rotate camera slowly for better 3D effect
+            if (gameRunning) {
+                camera.position.x = 15 * Math.cos(Date.now() * 0.0001);
+            camera.position.z = 15 * Math.sin(Date.now() * 0.0001);
+                camera.lookAt(0, 0, 0);
+            }
+            renderer.render(scene, camera);
+        }
+        // Initialize the game
+        init();
+        feather.replace();
+    </script>
+</body>
+</html>