Kartentrick
Merkt euch eine von sechs Spielkarten — und das Script lässt genau eure Karte auf magische Weise verschwinden.
Von unserem User Freddus stammt dieser kleine Zaubertrick für eure Homepage. Das Script zeigt euch sechs Spielkarten und bittet euch, euch eine davon zu merken und euch fest auf sie zu konzentrieren. Dann verschwinden die Karten kurz — und beim nächsten Blick ist ausgerechnet eure Karte aus dem Blatt herausgenommen. Gedankenlesen per JavaScript!
Die Bedienung ist denkbar einfach: Klickt euch mit dem Knopf durch die Ansage-Texte. Erst werden euch die Karten gezeigt, dann flüstert ihr den Namen eurer Karte vor euch hin, und am Ende präsentiert euch das Script das Blatt ohne eure Karte. Mit „nochmal!" beginnt der Trick von vorn — probiert ruhig eine andere Karte, es klappt wieder.
Einige von euch werden die Idee dahinter bereits kennen; es ist ein Klassiker unter den Kartentricks, der ganz ohne Magie auskommt. Wie er funktioniert, verraten wir im Code-Walkthrough weiter unten — wer sich nicht spoilern will, probiert erst die Demo aus.
Wer noch mehr Gedankenleserei mag: Der Gedankenleser errät eine gedachte Zahl zwischen 1 und 63, und im Mathematik-Fach wartet Gedanken lesen nach demselben Prinzip.
So funktioniert das Script
Das Script ist ein Zustandsautomat mit fünf Stationen: Eine Zählvariable merkt sich, an welcher Stelle des Tricks wir gerade sind, und bei jedem Klick auf den Knopf werden Ansagetext, Knopfbeschriftung und Kartenbild passend zur nächsten Station umgeschaltet. Es gibt also keinen Zufall und keine Erkennung eurer Karte — nur eine feste Abfolge.
let position = 0;
function spiel() {
switch (position) {
case 0:
...
case 1:
...
}
}Die Variable position zählt die Stationen von 0 bis 4. Die switch-Anweisung ist eine übersichtliche Alternative zu vielen if-Abfragen: Sie springt direkt zu dem case-Block, der zum aktuellen Wert von position passt, und das break am Ende jedes Blocks verhindert, dass die folgenden Blöcke gleich mit ausgeführt werden.
case 1:
position++;
text.textContent = "Du siehst hier einige Karten. ...";
knopf.textContent = "weiter";
bild.style.visibility = "visible";
break;Jede Station macht dreierlei: Sie schaltet mit position++ eine Station weiter (damit der nächste Klick im nächsten case landet), sie tauscht per textContent den Ansagetext und die Knopfbeschriftung aus, und sie blendet über style.visibility das Kartenbild ein oder aus. visibility hat gegenüber display den Vorteil, dass das unsichtbare Bild seinen Platz behält — die Seite springt beim Ein- und Ausblenden nicht.
case 3:
...
bild.src = "/_files/images/karten2.gif";
bild.style.visibility = "visible";
break;Und hier passiert die „Magie": Bei der Auflösung wird einfach die Bilddatei ausgetauscht, indem das src-Attribut des img-Elements neu gesetzt wird. Der Witz des Tricks: Das zweite Bild zeigt nicht das erste Blatt minus eure Karte, sondern sechs komplett andere Karten — ähnliche Bilder und Werte, aber keine einzige Karte aus dem ersten Blatt. Welche Karte ihr euch auch merkt, sie ist hinterher garantiert verschwunden. Weil man sich nur auf die eine Karte konzentriert, fällt das fast niemandem auf.
case 4:
position = 0;
...Die letzte Station setzt position wieder auf 0 und stellt Ausgangstext und erstes Kartenbild her — der Trick lässt sich damit beliebig oft wiederholen. Verbunden wird alles am Ende mit addEventListener("click", spiel): Das Original von 2007 hatte den Aufruf noch als onclick-Attribut direkt im HTML, heute trennt man Markup und Verhalten sauber.
Zum Anpassen: Die Ansagetexte stehen als normale Zeichenketten in den case-Blöcken und lassen sich frei umformulieren. Wer eigene Kartenbilder verwenden will, tauscht die beiden Bildpfade aus — wichtig ist nur, dass sich die Blätter der beiden Bilder keine Karte teilen, sonst fliegt der Trick auf.
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.