Initial commit - Kinderspiele
This commit is contained in:
OpenClaw
@@ -0,0 +1,164 @@
|
||||
<!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>Memory - KinderWelt</title>
|
||||
<style>
|
||||
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
|
||||
body {
|
||||
background: linear-gradient(135deg, #ff6b6b 0%, #feca57 100%);
|
||||
min-height: 100vh; display: flex; flex-direction: column; align-items: center;
|
||||
font-family: 'Comic Sans MS', cursive, sans-serif; padding: 10px;
|
||||
}
|
||||
h1 { color: white; margin: 10px 0; font-size: 24px; }
|
||||
.info { color: white; font-size: 16px; margin-bottom: 10px; }
|
||||
.level-select { margin-bottom: 15px; }
|
||||
.level-select button {
|
||||
background: white; border: none; border-radius: 8px; padding: 8px 15px;
|
||||
margin: 0 5px; font-size: 14px; cursor: pointer; font-family: inherit;
|
||||
}
|
||||
.level-select button.active { background: #4ade80; color: white; }
|
||||
#gameBoard {
|
||||
display: grid; gap: 10px; margin: 10px 0;
|
||||
}
|
||||
.card {
|
||||
background: linear-gradient(135deg, #667eea, #764ba2);
|
||||
border-radius: 10px; cursor: pointer; display: flex; justify-content: center; align-items: center;
|
||||
font-size: 40px; transition: transform 0.3s; box-shadow: 0 4px 10px rgba(0,0,0,0.2);
|
||||
}
|
||||
.card:hover { transform: scale(1.05); }
|
||||
.card.flipped { background: white; }
|
||||
.card.matched { background: #4ade80; pointer-events: none; }
|
||||
.card.hidden { font-size: 0; }
|
||||
.controls { margin-top: 20px; display: flex; gap: 15px; }
|
||||
.btn {
|
||||
background: white; border: none; border-radius: 10px; padding: 12px 25px;
|
||||
font-size: 16px; cursor: pointer; font-family: inherit; font-weight: bold;
|
||||
}
|
||||
.btn-back { background: #ff6b6b; color: white; text-decoration: none; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<h1>🃏 Memory</h1>
|
||||
<div class="info">Versuche: <span id="moves">0</span> | Paare: <span id="pairs">0</span>/<span id="totalPairs">0</span></div>
|
||||
|
||||
<div class="level-select">
|
||||
<button onclick="setLevel(4)" id="lvl4">Leicht (4)</button>
|
||||
<button onclick="setLevel(6)" id="lvl6">Mittel (6)</button>
|
||||
<button onclick="setLevel(8)" id="lvl8">Schwer (8)</button>
|
||||
<button onclick="setLevel(12)" id="lvl12">Profis (12)</button>
|
||||
</div>
|
||||
|
||||
<div id="gameBoard"></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>
|
||||
const emojis = ['🐶','🐱','🐭','🐹','🐰','🦊','🐻','🐼','🐨','🐯','🦁','🐷','🐸','🐵','🐔','🐧','🐦','🐤','🦆','🦅','🦉','🦇','🐺','🐗','🐴','🦄'];
|
||||
|
||||
let cards = [];
|
||||
let flippedCards = [];
|
||||
let matchedPairs = 0;
|
||||
let moves = 0;
|
||||
let gameLocked = false;
|
||||
let currentLevel = 6;
|
||||
|
||||
function setLevel(n) {
|
||||
currentLevel = n;
|
||||
document.querySelectorAll('.level-select button').forEach(b => b.classList.remove('active'));
|
||||
document.getElementById('lvl' + n).classList.add('active');
|
||||
initGame();
|
||||
}
|
||||
|
||||
function initGame() {
|
||||
const board = document.getElementById('gameBoard');
|
||||
board.innerHTML = '';
|
||||
|
||||
// Berechne Grid
|
||||
const totalCards = currentLevel * 2;
|
||||
const cols = currentLevel <= 6 ? 4 : currentLevel <= 8 ? 4 : 6;
|
||||
const rows = Math.ceil(totalCards / cols);
|
||||
|
||||
board.style.gridTemplateColumns = `repeat(${cols}, minmax(70px, 1fr))`;
|
||||
|
||||
// Wähle Emojis
|
||||
const gameEmojis = emojis.slice(0, currentLevel);
|
||||
cards = [...gameEmojis, ...gameEmojis].sort(() => Math.random() - 0.5);
|
||||
|
||||
// Erstelle Karten
|
||||
cards.forEach((emoji, index) => {
|
||||
const card = document.createElement('div');
|
||||
card.className = 'card hidden';
|
||||
card.dataset.index = index;
|
||||
card.dataset.emoji = emoji;
|
||||
card.textContent = emoji;
|
||||
card.style.height = currentLevel >= 8 ? '80px' : '100px';
|
||||
card.onclick = () => flipCard(card);
|
||||
board.appendChild(card);
|
||||
});
|
||||
|
||||
flippedCards = [];
|
||||
matchedPairs = 0;
|
||||
moves = 0;
|
||||
gameLocked = false;
|
||||
updateStats();
|
||||
document.getElementById('totalPairs').textContent = currentLevel;
|
||||
}
|
||||
|
||||
function flipCard(card) {
|
||||
if (gameLocked || card.classList.contains('flipped') || card.classList.contains('matched')) return;
|
||||
|
||||
card.classList.remove('hidden');
|
||||
card.classList.add('flipped');
|
||||
flippedCards.push(card);
|
||||
|
||||
if (flippedCards.length === 2) {
|
||||
moves++;
|
||||
updateStats();
|
||||
checkMatch();
|
||||
}
|
||||
}
|
||||
|
||||
function checkMatch() {
|
||||
gameLocked = true;
|
||||
const [card1, card2] = flippedCards;
|
||||
|
||||
if (card1.dataset.emoji === card2.dataset.emoji) {
|
||||
setTimeout(() => {
|
||||
card1.classList.add('matched');
|
||||
card2.classList.add('matched');
|
||||
matchedPairs++;
|
||||
updateStats();
|
||||
flippedCards = [];
|
||||
gameLocked = false;
|
||||
|
||||
if (matchedPairs === currentLevel) {
|
||||
setTimeout(() => alert('🎉 Gewonnen! Du hast ' + moves + ' Versuche gebraucht.'), 300);
|
||||
}
|
||||
}, 500);
|
||||
} else {
|
||||
setTimeout(() => {
|
||||
card1.classList.remove('flipped');
|
||||
card1.classList.add('hidden');
|
||||
card2.classList.remove('flipped');
|
||||
card2.classList.add('hidden');
|
||||
flippedCards = [];
|
||||
gameLocked = false;
|
||||
}, 1000);
|
||||
}
|
||||
}
|
||||
|
||||
function updateStats() {
|
||||
document.getElementById('moves').textContent = moves;
|
||||
document.getElementById('pairs').textContent = matchedPairs;
|
||||
}
|
||||
|
||||
// Init
|
||||
setLevel(6);
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user