Skip to content

34. Symulator rzutu kostką i monetą

This content is not available in your language yet.

Symulator rzutów — kostki (k4, k6, k8, k10, k12, k20), monety, ruletka. Z animacją, historią rzutów i statystykami rozkładu.

function useDiceRoller() {
const [result, setResult] = useState(null);
const [history, setHistory] = useState([]);
const [rolling, setRolling] = useState(false);
function roll(sides) {
setRolling(true);
setTimeout(() => {
const value = Math.floor(Math.random() * sides) + 1;
setResult({ sides, value });
setHistory((h) => [{ sides, value, timestamp: Date.now() }, ...h.slice(0, 49)]);
setRolling(false);
}, 600); // animacja trwa 600ms
}
const stats = useMemo(() => {
const filtered = history.filter((h) => h.sides === result?.sides);
const counts = {};
filtered.forEach((h) => { counts[h.value] = (counts[h.value] || 0) + 1; });
return counts;
}, [history, result]);
return { result, history, rolling, stats, roll };
}
  • Kostki: k4, k6, k8, k10, k12, k20 do wyboru
  • Moneta (orzeł/reszka)
  • Animacja rzutu (CSS shake lub zmieniające się liczby)
  • Historia ostatnich 20 rzutów
Ocena: 3.0

Powodzenia!

Symulator rzutów to projekt z zabawną animacją i ciekawą matematyką statystyczną. CSS shake animation jest łatwa — dodaj klasę rolling na 600ms i usuń. Wykres rozkładu po 100+ rzutach pięknie pokazuje prawo wielkich liczb — to dobry element edukacyjny projektu!