OpenClaw
184 lines
8.2 KiB
HTML
184 lines
8.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="de">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>Zahlen raten - KinderWelt</title>
|
|
<style>
|
|
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
|
|
body {
|
|
background: linear-gradient(135deg, #a855f7 0%, #6366f1 100%);
|
|
min-height: 100vh; display: flex; flex-direction: column; align-items: center;
|
|
font-family: 'Comic Sans MS', cursive, sans-serif; padding: 20px;
|
|
}
|
|
h1 { color: white; margin-bottom: 15px; }
|
|
.game-area {
|
|
background: white; border-radius: 20px; padding: 30px; margin: 15px 0;
|
|
text-align: center; box-shadow: 0 10px 30px rgba(0,0,0,0.3); max-width: 400px; width: 100%;
|
|
}
|
|
.message { font-size: 24px; margin-bottom: 20px; color: #333; }
|
|
.attempts { color: #666; margin: 10px 0; }
|
|
.guess-display {
|
|
background: #f3f4f6; border-radius: 10px; padding: 15px; margin: 15px 0;
|
|
font-size: 36px; font-weight: bold; color: #333; min-height: 60px;
|
|
}
|
|
.pin-pad {
|
|
display: grid; grid-template-columns: repeat(3, 80px); gap: 10px;
|
|
justify-content: center; margin: 20px 0;
|
|
}
|
|
.pin-btn {
|
|
background: linear-gradient(135deg, #667eea, #764ba2); border: none; border-radius: 15px;
|
|
width: 80px; height: 80px; font-size: 28px; color: white; font-weight: bold;
|
|
cursor: pointer; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
|
}
|
|
.pin-btn:active { transform: scale(0.95); }
|
|
.pin-btn.action { background: linear-gradient(135deg, #4ade80, #22c55e); }
|
|
.pin-btn.clear { background: linear-gradient(135deg, #ff6b6b, #f5576c); }
|
|
.controls { display: flex; gap: 15px; margin-top: 20px; flex-wrap: wrap; justify-content: center; }
|
|
.btn {
|
|
background: linear-gradient(135deg, #4ade80, #22c55e); border: none; border-radius: 10px;
|
|
padding: 12px 25px; font-size: 16px; cursor: pointer; font-family: inherit; font-weight: bold;
|
|
color: white;
|
|
}
|
|
.btn-back { background: #ff6b6b; text-decoration: none; }
|
|
.range-select { margin-bottom: 15px; }
|
|
.range-select button {
|
|
background: rgba(255,255,255,0.2); border: 2px solid white; border-radius: 10px;
|
|
padding: 8px 15px; margin: 0 5px; color: white; font-size: 14px; cursor: pointer;
|
|
}
|
|
.range-select button.active { background: white; color: #a855f7; }
|
|
.hint { color: #ff6b6b; font-size: 20px; margin-top: 10px; font-weight: bold; }
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>🤔 Zahlen raten</h1>
|
|
|
|
<div class="range-select">
|
|
<button onclick="setRange(10)" id="r10" class="active">1-10</button>
|
|
<button onclick="setRange(20)" id="r20">1-20</button>
|
|
<button onclick="setRange(50)" id="r50">1-50</button>
|
|
<button onclick="setRange(100)" id="r100">1-100</button>
|
|
</div>
|
|
|
|
<div class="game-area">
|
|
<div class="message" id="message">Ich denke an eine Zahl...</div>
|
|
<div class="attempts" id="attempts">Versuch 1</div>
|
|
|
|
<div class="guess-display" id="guessDisplay">?</div>
|
|
|
|
<div class="hint" id="hint"></div>
|
|
|
|
<div class="pin-pad">
|
|
<button class="pin-btn" onclick="enterDigit(1)">1</button>
|
|
<button class="pin-btn" onclick="enterDigit(2)">2</button>
|
|
<button class="pin-btn" onclick="enterDigit(3)">3</button>
|
|
<button class="pin-btn" onclick="enterDigit(4)">4</button>
|
|
<button class="pin-btn" onclick="enterDigit(5)">5</button>
|
|
<button class="pin-btn" onclick="enterDigit(6)">6</button>
|
|
<button class="pin-btn" onclick="enterDigit(7)">7</button>
|
|
<button class="pin-btn" onclick="enterDigit(8)">8</button>
|
|
<button class="pin-btn" onclick="enterDigit(9)">9</button>
|
|
<button class="pin-btn clear" onclick="clearGuess()">⌫</button>
|
|
<button class="pin-btn" onclick="enterDigit(0)">0</button>
|
|
<button class="pin-btn action" onclick="checkGuess()">✓</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="controls">
|
|
<button class="btn" onclick="initGame()">🔄 Neues Spiel</button>
|
|
<a href="../index.html" class="btn btn-back">⬅️ Zurück</a>
|
|
</div>
|
|
|
|
<script>
|
|
let targetNumber = 0;
|
|
let currentGuess = '';
|
|
let attempts = 0;
|
|
let maxRange = 10;
|
|
const synth = window.speechSynthesis;
|
|
|
|
function setRange(range) {
|
|
maxRange = range;
|
|
document.querySelectorAll('.range-select button').forEach(btn => btn.classList.remove('active'));
|
|
document.getElementById('r' + range).classList.add('active');
|
|
initGame();
|
|
}
|
|
|
|
function initGame() {
|
|
targetNumber = Math.floor(Math.random() * maxRange) + 1;
|
|
currentGuess = '';
|
|
attempts = 0;
|
|
document.getElementById('message').textContent = `Ich denke an eine Zahl zwischen 1 und ${maxRange}...`;
|
|
document.getElementById('attempts').textContent = 'Versuch 1';
|
|
document.getElementById('guessDisplay').textContent = '?';
|
|
document.getElementById('hint').textContent = '';
|
|
speak(`Ich denke an eine Zahl zwischen 1 und ${maxRange}. Welche Zahl ist es?`);
|
|
}
|
|
|
|
function enterDigit(digit) {
|
|
if (currentGuess.length < 3) {
|
|
currentGuess += digit;
|
|
document.getElementById('guessDisplay').textContent = currentGuess;
|
|
speak(currentGuess);
|
|
}
|
|
}
|
|
|
|
function clearGuess() {
|
|
currentGuess = '';
|
|
document.getElementById('guessDisplay').textContent = '?';
|
|
}
|
|
|
|
function checkGuess() {
|
|
if (!currentGuess) return;
|
|
|
|
const guess = parseInt(currentGuess);
|
|
attempts++;
|
|
document.getElementById('attempts').textContent = `Versuch ${attempts + 1}`;
|
|
|
|
if (guess === targetNumber) {
|
|
document.getElementById('message').textContent = '🎉 Richtig! Super!';
|
|
document.getElementById('hint').textContent = `Du hast ${attempts} Versuche gebraucht.`;
|
|
document.getElementById('guessDisplay').style.background = '#4ade80';
|
|
speak(`Richtig! Die Zahl war ${targetNumber}. Du hast ${attempts} Versuche gebraucht.`);
|
|
setTimeout(() => {
|
|
document.getElementById('guessDisplay').style.background = '#f3f4f6';
|
|
}, 2000);
|
|
} else if (guess < targetNumber) {
|
|
document.getElementById('message').textContent = `${guess} ist zu klein!`;
|
|
document.getElementById('hint').textContent = '⬆️ Die Zahl ist größer!';
|
|
speak(`${guess} ist zu klein. Die Zahl ist größer.`);
|
|
currentGuess = '';
|
|
setTimeout(() => {
|
|
document.getElementById('guessDisplay').textContent = '?';
|
|
}, 1000);
|
|
} else {
|
|
document.getElementById('message').textContent = `${guess} ist zu groß!`;
|
|
document.getElementById('hint').textContent = '⬇️ Die Zahl ist kleiner!';
|
|
speak(`${guess} ist zu groß. Die Zahl ist kleiner.`);
|
|
currentGuess = '';
|
|
setTimeout(() => {
|
|
document.getElementById('guessDisplay').textContent = '?';
|
|
}, 1000);
|
|
}
|
|
}
|
|
|
|
function speak(text) {
|
|
if (!synth) return;
|
|
const utterance = new SpeechSynthesisUtterance(text);
|
|
utterance.lang = 'de-DE';
|
|
utterance.rate = 0.8;
|
|
utterance.pitch = 1.1;
|
|
synth.speak(utterance);
|
|
}
|
|
|
|
// Keyboard support
|
|
document.addEventListener('keydown', (e) => {
|
|
if (e.key >= '0' && e.key <= '9') enterDigit(parseInt(e.key));
|
|
if (e.key === 'Backspace') clearGuess();
|
|
if (e.key === 'Enter') checkGuess();
|
|
});
|
|
|
|
// Init
|
|
initGame();
|
|
</script>
|
|
</body>
|
|
</html> |