Initial commit - Kinderspiele
This commit is contained in:
OpenClaw
@@ -0,0 +1,184 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user