JavaScripts › Fun

Magisches Orakel

Stellt eine Ja-Nein-Frage, schüttelt die Kugel und bekommt eine von zwanzig Antworten — mehr Spiegel als Prophezeiung.

Die magische Kugel gibt es seit 1950. Man stellt ihr eine Frage, die sich mit Ja oder Nein beantworten lässt, schüttelt sie, und im Fenster erscheint eine von zwanzig Antworten. Zehn davon sind zustimmend, fünf ausweichend, fünf ablehnend — diese Verteilung ist seit der ersten Kugel unverändert.

Der eigentliche Trick ist nicht der Zufall, sondern die Reaktion darauf. Wer eine Antwort bekommt und denkt „nein, das kann nicht sein", weiß in diesem Moment genau, was er eigentlich will. Das Orakel entscheidet nichts, es macht nur sichtbar, was man schon entschieden hatte. Genau dafür wird es bis heute benutzt — halb im Scherz, halb ernsthaft.

Tippt eure Frage ein und klickt auf die Kugel. Die Frage bleibt dabei auf eurem Gerät; sie wird nirgendwohin gesendet. Und ja, das Ergebnis wird gewürfelt — mit Math.random, wie alles auf dieser Seite. Wer eine Entscheidung braucht, die nachvollziehbar zufällig ist, nimmt besser den Losentscheid.

Verwandtes im Archiv: Chinesische Glückskekse, Zitat des Tages und der Gedankenleser, der statt zu würfeln einen mathematischen Trick benutzt.

Fun Baujahr 2026 läuft in deinem Browser
?
Script von kostenlose-javascripts.de

So funktioniert das Script

Ein kurzes Script — interessant ist, wie die Kugel entsteht und wie die Animation sauber vom Ergebnis getrennt bleibt.

background: radial-gradient(circle at 32% 28%, #5a5a5a, #1c1c1c 62%);
box-shadow: inset -8px -10px 22px rgba(0,0,0,.6), 0 6px 14px rgba(0,0,0,.25);

Die Kugel ist kein Bild, sondern ein rundes div mit einem Farbverlauf. Der Verlauf beginnt nicht in der Mitte, sondern bei 32 Prozent von links und 28 Prozent von oben — dort sitzt das Glanzlicht, und genau das lässt eine Fläche räumlich wirken. Der innere Schatten unten rechts vertieft den Eindruck. Zwei CSS-Zeilen ersetzen so eine Grafikdatei, die geladen werden müsste und auf großen Bildschirmen unscharf würde.

const gewaehlt = antworten[Math.floor(Math.random() * antworten.length)];
kugel.classList.add("mo-schuettelt");
…
setTimeout(function () { … antwortfeld.textContent = gewaehlt.text; }, 520);

Wie beim Losentscheid steht das Ergebnis fest, bevor die Animation beginnt. Das ist nicht nur ehrlicher, sondern auch sicherer: Selbst wenn die Animation ruckelt oder der Reiter in den Hintergrund gerät, ist die Antwort dieselbe.

@keyframes mo-wackeln {
  0%,100% { transform: translate(0,0) rotate(0); }
  20% { transform: translate(-6px,3px) rotate(-4deg); }
  …
}

Das Schütteln übernimmt eine CSS-Animation, nicht das Script. Angegeben werden nur ein paar Zwischenstellungen in Prozent der Laufzeit; alles dazwischen rechnet der Browser aus. Wichtig ist die Kombination aus Verschiebung und leichter Drehung — eine reine Hin-und-her-Bewegung sähe mechanisch aus.

kugel.classList.add("mo-schuettelt");
setTimeout(function () { kugel.classList.remove("mo-schuettelt"); }, 520);

Eine CSS-Animation läuft nur einmal, solange die Klasse gesetzt ist. Damit sie beim nächsten Klick wieder anläuft, muss die Klasse zwischendurch entfernt werden — sonst passierte beim zweiten Schütteln sichtbar nichts. Die 520 Millisekunden liegen knapp über der Animationsdauer von 500.

kugel.addEventListener("keydown", function (ereignis) {
  if (ereignis.key === "Enter" || ereignis.key === " ") { … }
});

Weil die Kugel ein div ist und kein Knopf, versteht sie von Haus aus keine Tastatur. Mit tabindex="0", role="button" und dieser Abfrage verhält sie sich wie ein richtiger Knopf. Das ist der Preis dafür, ein beliebiges Element anklickbar zu machen — deshalb sollte man im Zweifel ein echtes <button> nehmen und es umgestalten.

{ text: "Ja, ganz sicher.", art: "zustimmend" },

Jede Antwort trägt ihre Kategorie mit sich. Das kostet nichts und macht Erweiterungen kontrollierbar: Wer Antworten ergänzt, sieht sofort, ob das Verhältnis von zehn zu fünf zu fünf noch stimmt — und dieses Verhältnis ist es, das die Kugel freundlich wirken lässt.

Zum Anpassen: Für ein Orakel mit eigenem Charakter tauscht ihr schlicht die Antworten aus — eine Vereinskugel, die immer auf das nächste Training verweist, ist zwei Minuten Arbeit. Soll dieselbe Frage immer dieselbe Antwort bekommen, ersetzt ihr den Zufall durch eine Quersumme der Buchstaben der Frage; dann wird aus dem Orakel ein verblüffend beständiges Wesen.

Script für die eigene Homepage

Kopiert euch den kompletten Code und fügt ihn an der Stelle eurer Seite ein, an der das Script erscheinen soll. Er läuft ohne weitere Dateien und ohne fremde Server.

Mehr aus der Kategorie Fun