Peter123/Kinderspiele
Template
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit - Kinderspiele

Browse Source
This commit is contained in:
OpenClaw
2026-04-26 09:44:19 +02:00
commit 35817527c8
29 changed files with 10949 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
game-server/public/spiele/wuerfel.html
+251
View File
@@ -0,0 +1,251 @@
<!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>Würfel - KinderWelt</title>
<style>
* { margin: 0; padding: 0; box-sizing: border-box; user-select: none; }
body {
background: linear-gradient(135deg, #667eea 0%, #764ba2 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; font-size: 26px; }
.dice-container {
perspective: 1000px; margin: 30px 0;
}
.dice {
width: 100px; height: 100px; position: relative;
transform-style: preserve-3d; transition: transform 1s ease-out;
}
.dice.rolling { animation: roll 1s ease-out; }
@keyframes roll {
0% { transform: rotateX(0) rotateY(0) rotateZ(0); }
100% { transform: rotateX(720deg) rotateY(720deg) rotateZ(360deg); }
}
.face {
position: absolute; width: 100px; height: 100px;
background: white; border: 3px solid #333; border-radius: 15px;
box-shadow: inset 0 0 20px rgba(0,0,0,0.2);
}
.face-1 { transform: rotateY(0deg) translateZ(50px); }
.face-2 { transform: rotateY(90deg) translateZ(50px); }
.face-3 { transform: rotateY(180deg) translateZ(50px); }
.face-4 { transform: rotateY(-90deg) translateZ(50px); }
.face-5 { transform: rotateX(90deg) translateZ(50px); }
.face-6 { transform: rotateX(-90deg) translateZ(50px); }
.dot {
width: 20px; height: 20px; background: #333; border-radius: 50%;
position: absolute; box-shadow: inset 2px 2px 4px rgba(0,0,0,0.3);
}
/* Seite 1: Eins in der Mitte */
.face-1 .dot1 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
/* Seite 2: Zwei in diagonalen Ecken */
.face-2 .dot1 { top: 20%; left: 20%; }
.face-2 .dot2 { bottom: 20%; right: 20%; }
/* Seite 3: Drei diagonal */
.face-3 .dot1 { top: 20%; left: 20%; }
.face-3 .dot2 { top: 50%; left: 50%; transform: translate(-50%, -50%); }
.face-3 .dot3 { bottom: 20%; right: 20%; }
/* Seite 4: Vier in allen Ecken */
.face-4 .dot1 { top: 20%; left: 20%; }
.face-4 .dot2 { top: 20%; right: 20%; }
.face-4 .dot3 { bottom: 20%; left: 20%; }
.face-4 .dot4 { bottom: 20%; right: 20%; }
/* Seite 5: Fünf (Vier Ecken + Mitte) */
.face-5 .dot1 { top: 20%; left: 20%; } /* Oben links */
.face-5 .dot2 { top: 20%; right: 20%; } /* Oben rechts */
.face-5 .dot3 { top: 50%; left: 50%; transform: translate(-50%, -50%); } /* Mitte */
.face-5 .dot4 { bottom: 20%; left: 20%; } /* Unten links */
.face-5 .dot5 { bottom: 20%; right: 20%; } /* Unten rechts */
/* Seite 6: Sechs (zwei Reihen zu je drei) */
.face-6 .dot1 { top: 20%; left: 25%; }
.face-6 .dot2 { top: 20%; right: 25%; }
.face-6 .dot3 { top: 50%; left: 25%; transform: translateY(-50%); }
.face-6 .dot4 { top: 50%; right: 25%; transform: translateY(-50%); }
.face-6 .dot5 { bottom: 20%; left: 25%; }
.face-6 .dot6 { bottom: 20%; right: 25%; }
.result {
color: white; font-size: 48px; margin: 20px 0; min-height: 60px;
text-shadow: 2px 2px 4px rgba(0,0,0,0.3); font-weight: bold;
}
.stats {
color: white; font-size: 18px; margin: 10px 0;
}
.history {
display: flex; gap: 10px; flex-wrap: wrap; justify-content: center;
max-width: 300px; margin: 15px 0;
}
.history-item {
width: 40px; height: 40px; background: white; border-radius: 8px;
display: flex; align-items: center; justify-content: center;
font-size: 20px; font-weight: bold; box-shadow: 0 3px 10px rgba(0,0,0,0.3);
}
.controls { display: flex; gap: 15px; margin-top: 20px; }
.btn {
background: white; border: none; border-radius: 10px; padding: 15px 40px;
font-size: 18px; cursor: pointer; font-family: inherit; font-weight: bold;
}
.btn-roll { background: #4ade80; color: white; }
.btn-roll:hover { transform: scale(1.05); }
.btn-roll:active { transform: scale(0.95); }
.btn-back { background: #ff6b6b; color: white; text-decoration: none; padding: 15px 25px; }
.space-hint { color: #ccc; margin-top: 10px; font-size: 14px; }
</style>
</head>
<body>
<h1>🎲 Würfel</h1>
<div class="dice-container">
<div class="dice" id="dice" onclick="roll()">
<!-- Seite 1: 1 Punkt -->
<div class="face face-1">
<div class="dot dot1"></div>
</div>
<!-- Seite 2: 2 Punkte -->
<div class="face face-2">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
</div>
<!-- Seite 3: 3 Punkte -->
<div class="face face-3">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
</div>
<!-- Seite 4: 4 Punkte -->
<div class="face face-4">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
</div>
<!-- Seite 5: 5 Punkte (Vier Ecken + Mitte) -->
<div class="face face-5">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
</div>
<!-- Seite 6: 6 Punkte -->
<div class="face face-6">
<div class="dot dot1"></div>
<div class="dot dot2"></div>
<div class="dot dot3"></div>
<div class="dot dot4"></div>
<div class="dot dot5"></div>
<div class="dot dot6"></div>
</div>
</div>
</div>
<div class="result" id="result">Klicke oder drücke Leertaste!</div>
<div class="stats">Würfe: <span id="rolls">0</span> | Summe: <span id="total">0</span></div>
<div class="history" id="history"></div>
<div class="controls">
<button class="btn btn-roll" id="rollBtn" onclick="roll()">🎲 Würfeln</button>
<a href="../index.html" class="btn btn-back">⬅️ Zurück</a>
</div>
<p class="space-hint">💡 Tipp: Du kannst auch die LEERTASTE drücken!</p>
<script>
let rolling = false;
let rollCount = 0;
let total = 0;
const rotations = {
1: 'rotateX(0deg) rotateY(0deg)',
2: 'rotateX(0deg) rotateY(-90deg)',
3: 'rotateX(0deg) rotateY(180deg)',
4: 'rotateX(0deg) rotateY(90deg)',
5: 'rotateX(-90deg) rotateY(0deg)',
6: 'rotateX(90deg) rotateY(0deg)'
};
const dice = document.getElementById('dice');
const result = document.getElementById('result');
const rollBtn = document.getElementById('rollBtn');
function roll() {
if (rolling) return;
rolling = true;
rollBtn.disabled = true;
// Animation
dice.classList.add('rolling');
result.textContent = '🎲...';
// Zufällige Zahl
const roll = Math.floor(Math.random() * 6) + 1;
setTimeout(() => {
dice.classList.remove('rolling');
dice.style.transform = rotations[roll];
// Ergebnis anzeigen
result.innerHTML = `<span style="font-size:60px">${roll}</span>`;
// Statistik
rollCount++;
total += roll;
document.getElementById('rolls').textContent = rollCount;
document.getElementById('total').textContent = total;
// Historie
const history = document.getElementById('history');
const item = document.createElement('div');
item.className = 'history-item';
item.textContent = roll;
// Farben: Grün für 5-6, Gelb für 3-4, Rot für 1-2
if (roll >= 5) item.style.background = '#86efac';
else if (roll >= 3) item.style.background = '#feca57';
else item.style.background = '#fca5a5';
history.insertBefore(item, history.firstChild);
if (history.children.length > 10) {
history.removeChild(history.lastChild);
}
// TTS
if ('speechSynthesis' in window) {
const utterance = new SpeechSynthesisUtterance(roll.toString());
utterance.lang = 'de-DE';
speechSynthesis.speak(utterance);
}
rolling = false;
rollBtn.disabled = false;
}, 1000);
}
// Leertaste
document.addEventListener('keydown', (e) => {
if (e.code === 'Space') {
e.preventDefault();
roll();
}
});
</script>
</body>
</html>