Spaces:
Running
Running
| <html lang="de"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Noras Wortratespiel</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .hangman-part { | |
| opacity: 0; | |
| transition: opacity 0.3s ease; | |
| } | |
| .hangman-part.visible { | |
| opacity: 1; | |
| } | |
| .letter-tile { | |
| transition: all 0.3s ease; | |
| } | |
| .letter-tile:hover:not(.guessed) { | |
| transform: scale(1.1); | |
| box-shadow: 0 0 10px rgba(59, 130, 246, 0.5); | |
| } | |
| @keyframes bounce { | |
| 0%, 100% { transform: translateY(0); } | |
| 50% { transform: translateY(-10px); } | |
| } | |
| .bounce { | |
| animation: bounce 0.5s; | |
| } | |
| .confetti { | |
| position: absolute; | |
| width: 10px; | |
| height: 10px; | |
| background-color: #f00; | |
| opacity: 0; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-blue-50 min-h-screen flex flex-col items-center font-sans"> | |
| <header class="w-full bg-blue-600 text-white py-4 shadow-md"> | |
| <div class="container mx-auto px-4"> | |
| <h1 class="text-3xl font-bold text-center">Noras Wortratespiel</h1> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8 flex-grow flex flex-col items-center"> | |
| <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6 mb-8"> | |
| <div class="flex flex-col md:flex-row gap-8"> | |
| <!-- Hangman Drawing --> | |
| <div class="w-full md:w-1/2 flex flex-col items-center"> | |
| <div class="relative w-48 h-48 mb-6"> | |
| <!-- Gallows --> | |
| <div class="absolute top-0 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-gray-800"></div> | |
| <div class="absolute top-0 left-1/4 w-1/2 h-1 bg-gray-800"></div> | |
| <div class="absolute top-0 left-1/4 w-1 h-48 bg-gray-800"></div> | |
| <div class="absolute bottom-0 left-0 w-32 h-1 bg-gray-800"></div> | |
| <!-- Hangman Parts --> | |
| <div id="head" class="hangman-part absolute top-8 left-1/2 transform -translate-x-1/2 w-10 h-10 rounded-full border-4 border-gray-800"></div> | |
| <div id="body" class="hangman-part absolute top-18 left-1/2 transform -translate-x-1/2 w-1 h-12 bg-gray-800"></div> | |
| <div id="left-arm" class="hangman-part absolute top-20 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-8 bg-gray-800 origin-top rotate-45"></div> | |
| <div id="right-arm" class="hangman-part absolute top-20 left-1/2 transform -translate-x-1/2 -translate-y-1/2 w-1 h-8 bg-gray-800 origin-top -rotate-45"></div> | |
| <div id="left-leg" class="hangman-part absolute top-30 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-gray-800 origin-top rotate-30"></div> | |
| <div id="right-leg" class="hangman-part absolute top-30 left-1/2 transform -translate-x-1/2 w-1 h-8 bg-gray-800 origin-top -rotate-30"></div> | |
| <div id="face" class="hangman-part absolute top-10 left-1/2 transform -translate-x-1/2 flex justify-between w-6"> | |
| <div class="w-2 h-2 rounded-full bg-gray-800"></div> | |
| <div class="w-2 h-2 rounded-full bg-gray-800"></div> | |
| </div> | |
| <div id="mouth" class="hangman-part absolute top-14 left-1/2 transform -translate-x-1/2 w-4 h-1 bg-gray-800 rounded-full"></div> | |
| </div> | |
| <div class="text-center"> | |
| <p class="text-lg font-semibold mb-2">Fehler: <span id="mistakes">0</span>/8</p> | |
| <div class="w-full bg-gray-200 rounded-full h-4"> | |
| <div id="progress-bar" class="bg-green-500 h-4 rounded-full" style="width: 100%"></div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Game Area --> | |
| <div class="w-full md:w-1/2 flex flex-col"> | |
| <div class="mb-6"> | |
| <p class="text-gray-600 mb-2">Kategorie: <span id="category" class="font-semibold">Tiere</span></p> | |
| <div id="word-display" class="flex justify-center gap-2 mb-6 flex-wrap"></div> | |
| </div> | |
| <div class="mb-6"> | |
| <p class="text-gray-600 mb-2">Verfügbare Buchstaben:</p> | |
| <div id="keyboard" class="flex flex-wrap gap-2 justify-center"></div> | |
| </div> | |
| <div id="hint-area" class="mb-4 p-3 bg-yellow-50 rounded-lg border border-yellow-200 hidden"> | |
| <p class="text-yellow-800 font-medium"><i class="fas fa-lightbulb mr-2"></i>Tipp: <span id="hint-text"></span></p> | |
| </div> | |
| <button id="hint-button" class="mb-6 bg-yellow-400 hover:bg-yellow-500 text-yellow-800 font-medium py-2 px-4 rounded-lg transition-colors"> | |
| <i class="fas fa-lightbulb mr-2"></i>Tipp anzeigen | |
| </button> | |
| <div id="message" class="hidden mb-4 p-3 rounded-lg text-center font-bold"></div> | |
| <button id="new-game-button" class="mt-auto bg-blue-600 hover:bg-blue-700 text-white font-bold py-3 px-6 rounded-lg transition-colors hidden"> | |
| Neues Spiel starten | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="w-full max-w-4xl bg-white rounded-xl shadow-lg p-6"> | |
| <h2 class="text-xl font-bold mb-4 text-center">Wie spielt man?</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-3 gap-4"> | |
| <div class="bg-blue-100 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-blue-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">1</div> | |
| <h3 class="font-semibold">Wort erraten</h3> | |
| </div> | |
| <p class="text-gray-700">Klicke auf die Buchstaben, um das geheime Wort zu erraten.</p> | |
| </div> | |
| <div class="bg-green-100 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-green-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">2</div> | |
| <h3 class="font-semibold">Achtung Fehler</h3> | |
| </div> | |
| <p class="text-gray-700">Jeder falsche Buchstabe bringt den Strichmännchen näher zum Galgen.</p> | |
| </div> | |
| <div class="bg-yellow-100 p-4 rounded-lg"> | |
| <div class="flex items-center mb-2"> | |
| <div class="bg-yellow-600 text-white rounded-full w-8 h-8 flex items-center justify-center mr-3">3</div> | |
| <h3 class="font-semibold">Tipps nutzen</h3> | |
| </div> | |
| <p class="text-gray-700">Wenn du nicht weiter weißt, klicke auf den Tipp-Button für Hilfe.</p> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| <footer class="w-full bg-blue-600 text-white py-4 mt-8"> | |
| <div class="container mx-auto px-4 text-center"> | |
| <p>Viel Spaß beim Spielen, liebe Nora! ❤️</p> | |
| </div> | |
| </footer> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Game words with categories and hints (easy German words) | |
| const wordCategories = { | |
| tiere: { | |
| name: "Tiere", | |
| words: [ | |
| { word: "HUND", hint: "Bellt und ist der beste Freund des Menschen" }, | |
| { word: "KATZE", hint: "Schnurrt und hat weiche Pfoten" }, | |
| { word: "FISCH", hint: "Schwimmt im Wasser und atmet durch Kiemen" }, | |
| { word: "VOGEL", hint: "Hat Federn und kann fliegen" }, | |
| { word: "MAUS", hint: "Klein, schnell und mag Käse" } | |
| ] | |
| }, | |
| schule: { | |
| name: "Schule", | |
| words: [ | |
| { word: "BUCH", hint: "Hat viele Seiten mit Geschichten oder Wissen" }, | |
| { word: "STIFT", hint: "Damit schreibt oder malt man" }, | |
| { word: "TASCHE", hint: "Trägt man auf dem Rücken mit Schulmaterial" }, | |
| { word: "LEHRER", hint: "Bringt Kindern etwas bei" }, | |
| { word: "KREIDE", hint: "Damit schreibt man an die Tafel" } | |
| ] | |
| }, | |
| spielzeug: { | |
| name: "Spielzeug", | |
| words: [ | |
| { word: "BALL", hint: "Rund und man kann damit werfen oder kicken" }, | |
| { word: "PUPPE", hint: "Sieht aus wie ein Baby oder eine Person" }, | |
| { word: "AUTO", hint: "Hat Räder und man kann es schieben" }, | |
| { word: "BAUER", hint: "Damit kann man Türme und Häuser bauen" }, | |
| { word: "PUZZLE", hint: "Viele Teile, die zusammengesetzt werden müssen" } | |
| ] | |
| } | |
| }; | |
| // Game state | |
| let currentWord = ""; | |
| let guessedLetters = []; | |
| let mistakes = 0; | |
| let maxMistakes = 8; | |
| let hintUsed = false; | |
| let currentCategory = ""; | |
| let gameActive = true; | |
| // DOM elements | |
| const wordDisplay = document.getElementById('word-display'); | |
| const keyboard = document.getElementById('keyboard'); | |
| const mistakesDisplay = document.getElementById('mistakes'); | |
| const progressBar = document.getElementById('progress-bar'); | |
| const message = document.getElementById('message'); | |
| const newGameButton = document.getElementById('new-game-button'); | |
| const hintButton = document.getElementById('hint-button'); | |
| const hintArea = document.getElementById('hint-area'); | |
| const hintText = document.getElementById('hint-text'); | |
| const categoryDisplay = document.getElementById('category'); | |
| const hangmanParts = [ | |
| 'head', 'body', 'left-arm', 'right-arm', | |
| 'left-leg', 'right-leg', 'face', 'mouth' | |
| ]; | |
| // Initialize the game | |
| function initGame() { | |
| // Reset game state | |
| guessedLetters = []; | |
| mistakes = 0; | |
| hintUsed = false; | |
| gameActive = true; | |
| // Clear displays | |
| wordDisplay.innerHTML = ''; | |
| keyboard.innerHTML = ''; | |
| message.classList.add('hidden'); | |
| newGameButton.classList.add('hidden'); | |
| hintArea.classList.add('hidden'); | |
| // Reset hangman | |
| hangmanParts.forEach(part => { | |
| document.getElementById(part).classList.remove('visible'); | |
| }); | |
| // Select a random category | |
| const categories = Object.keys(wordCategories); | |
| currentCategory = categories[Math.floor(Math.random() * categories.length)]; | |
| categoryDisplay.textContent = wordCategories[currentCategory].name; | |
| // Select a random word from the category | |
| const words = wordCategories[currentCategory].words; | |
| const randomWordObj = words[Math.floor(Math.random() * words.length)]; | |
| currentWord = randomWordObj.word; | |
| hintText.textContent = randomWordObj.hint; | |
| // Update UI | |
| updateMistakesDisplay(); | |
| createWordDisplay(); | |
| createKeyboard(); | |
| } | |
| // Create the word display with blanks | |
| function createWordDisplay() { | |
| wordDisplay.innerHTML = ''; | |
| for (let i = 0; i < currentWord.length; i++) { | |
| const letter = currentWord[i]; | |
| const letterElement = document.createElement('div'); | |
| letterElement.className = 'w-10 h-10 flex items-center justify-center text-2xl font-bold border-b-2 border-gray-800'; | |
| if (guessedLetters.includes(letter)) { | |
| letterElement.textContent = letter; | |
| letterElement.classList.add('text-blue-600'); | |
| } else { | |
| letterElement.textContent = ' '; | |
| } | |
| wordDisplay.appendChild(letterElement); | |
| } | |
| } | |
| // Create the keyboard | |
| function createKeyboard() { | |
| const letters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZÄÖÜ'.split(''); | |
| letters.forEach(letter => { | |
| const button = document.createElement('button'); | |
| button.textContent = letter; | |
| button.className = 'letter-tile w-10 h-10 flex items-center justify-center bg-blue-100 hover:bg-blue-200 text-blue-800 font-bold rounded-lg transition-all'; | |
| if (guessedLetters.includes(letter)) { | |
| button.classList.add('guessed'); | |
| button.classList.remove('bg-blue-100', 'hover:bg-blue-200'); | |
| button.classList.add('bg-gray-200', 'cursor-not-allowed'); | |
| } | |
| button.addEventListener('click', () => handleLetterClick(letter, button)); | |
| keyboard.appendChild(button); | |
| }); | |
| } | |
| // Handle letter clicks | |
| function handleLetterClick(letter, button) { | |
| if (!gameActive || guessedLetters.includes(letter)) return; | |
| guessedLetters.push(letter); | |
| button.classList.add('guessed'); | |
| button.classList.remove('bg-blue-100', 'hover:bg-blue-200'); | |
| button.classList.add('bg-gray-200', 'cursor-not-allowed'); | |
| if (currentWord.includes(letter)) { | |
| // Correct guess | |
| button.classList.remove('bg-gray-200'); | |
| button.classList.add('bg-green-100', 'text-green-800'); | |
| button.classList.add('bounce'); | |
| setTimeout(() => button.classList.remove('bounce'), 500); | |
| createWordDisplay(); | |
| checkWin(); | |
| } else { | |
| // Wrong guess | |
| button.classList.remove('bg-gray-200'); | |
| button.classList.add('bg-red-100', 'text-red-800'); | |
| button.classList.add('bounce'); | |
| setTimeout(() => button.classList.remove('bounce'), 500); | |
| mistakes++; | |
| updateMistakesDisplay(); | |
| showHangmanPart(); | |
| checkLose(); | |
| } | |
| } | |
| // Show the next hangman part | |
| function showHangmanPart() { | |
| if (mistakes <= hangmanParts.length) { | |
| const part = hangmanParts[mistakes - 1]; | |
| document.getElementById(part).classList.add('visible'); | |
| } | |
| } | |
| // Update mistakes display | |
| function updateMistakesDisplay() { | |
| mistakesDisplay.textContent = mistakes; | |
| const progressPercentage = 100 - (mistakes / maxMistakes * 100); | |
| progressBar.style.width = `${progressPercentage}%`; | |
| if (mistakes >= 5) { | |
| progressBar.classList.remove('bg-green-500'); | |
| progressBar.classList.add('bg-yellow-500'); | |
| } | |
| if (mistakes >= 7) { | |
| progressBar.classList.remove('bg-yellow-500'); | |
| progressBar.classList.add('bg-red-500'); | |
| } | |
| } | |
| // Check if player won | |
| function checkWin() { | |
| const wordGuessed = currentWord.split('').every(letter => guessedLetters.includes(letter)); | |
| if (wordGuessed) { | |
| gameActive = false; | |
| message.textContent = 'Herzlichen Glückwunsch! Du hast gewonnen! 🎉'; | |
| message.classList.remove('hidden'); | |
| message.classList.add('bg-green-100', 'text-green-800'); | |
| newGameButton.classList.remove('hidden'); | |
| createConfetti(); | |
| } | |
| } | |
| // Check if player lost | |
| function checkLose() { | |
| if (mistakes >= maxMistakes) { | |
| gameActive = false; | |
| message.textContent = `Schade! Das Wort war: ${currentWord}`; | |
| message.classList.remove('hidden'); | |
| message.classList.add('bg-red-100', 'text-red-800'); | |
| newGameButton.classList.remove('hidden'); | |
| // Reveal the word | |
| revealWord(); | |
| } | |
| } | |
| // Reveal the word when game is lost | |
| function revealWord() { | |
| wordDisplay.innerHTML = ''; | |
| for (let i = 0; i < currentWord.length; i++) { | |
| const letter = currentWord[i]; | |
| const letterElement = document.createElement('div'); | |
| letterElement.className = 'w-10 h-10 flex items-center justify-center text-2xl font-bold border-b-2 border-gray-800'; | |
| letterElement.textContent = letter; | |
| if (guessedLetters.includes(letter)) { | |
| letterElement.classList.add('text-blue-600'); | |
| } else { | |
| letterElement.classList.add('text-red-600'); | |
| } | |
| wordDisplay.appendChild(letterElement); | |
| } | |
| } | |
| // Show hint | |
| hintButton.addEventListener('click', function() { | |
| if (!hintUsed && gameActive) { | |
| hintArea.classList.remove('hidden'); | |
| hintButton.classList.add('hidden'); | |
| hintUsed = true; | |
| } | |
| }); | |
| // New game button | |
| newGameButton.addEventListener('click', initGame); | |
| // Create confetti effect | |
| function createConfetti() { | |
| const colors = ['#f00', '#0f0', '#00f', '#ff0', '#f0f', '#0ff']; | |
| const container = document.querySelector('main'); | |
| for (let i = 0; i < 100; i++) { | |
| const confetti = document.createElement('div'); | |
| confetti.className = 'confetti'; | |
| confetti.style.backgroundColor = colors[Math.floor(Math.random() * colors.length)]; | |
| confetti.style.left = `${Math.random() * 100}%`; | |
| confetti.style.top = '-10px'; | |
| confetti.style.transform = `rotate(${Math.random() * 360}deg)`; | |
| container.appendChild(confetti); | |
| setTimeout(() => { | |
| confetti.style.opacity = '1'; | |
| confetti.style.top = `${Math.random() * 100}%`; | |
| confetti.style.left = `${Math.random() * 100}%`; | |
| confetti.style.transition = `all ${3 + Math.random() * 5}s ease-out`; | |
| setTimeout(() => { | |
| confetti.style.opacity = '0'; | |
| setTimeout(() => confetti.remove(), 1000); | |
| }, 3000); | |
| }, 0); | |
| } | |
| } | |
| // Start the game | |
| initGame(); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=ThetaPhiPsi/noras-hangman" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |