Einige globale Attribute zum Schluss - HTML5 - page 302

pointer-events: none;
background-color: hsl(60,100%,85%);
border-color: hsl(60,100%,40%);
}

An dieser Stelle des Spiels wird überprüft, ob alle Städte in der Reihenfolge
ihrer Einwohnerzahl zugewiesen sind. Korrekte Antworten werden grün mar-
kiert. Falsche Antworten werden zurückgesetzt und stehen dann für einen wei-
teren Zuweisungsversuch zur Verfügung. Für die Farbänderung bei richtigen
Antworten kommt wieder classList.add() zum Einsatz; das entsprechende
CSS-Format sieht so aus:
.aCorrect {
background-color: hsl(75,100%,85%);
border-color: hsl(75,100%,40%);
}

Sobald alle Antworten richtig sind, wird der Spielerin bzw. dem Spieler gra-
tuliert, und beim Klick auf die N EU S TARTEN -Schaltfläche werden vier weitere,

zufällig ausgewählte Städte zum Spielen angeboten. Wem Einwohnerzahlen
zu langweilig sind, der kann aus dem Pulldown-Menü zwei weitere Spielmodi
wählen: das Ordnen der Städte nach geografischer Lage von Norden nach Sü-
den beziehungsweise von Osten nach Westen . Die Details zur JavaScript- und
CSS-Implementierung entnehmen Sie bitte den folgenden Links:

http://html5.komplett.cc/code/chap_global/1234.js

»

» http://html5.komplett.cc/code/chap_global/1234.css

Das fertige Spiel in Aktion zeigt Abbildung 12.2. Wenn Sie es weiter ausbauen
wollen, sollten Sie sich gleich an die Arbeit machen und die bereits angespro-
chene Erweiterung Anzahl der Städte wählen! implementieren. Die statische
Liste auf der linken Seite müsste dann natürlich dynamisch generiert werden.
Viel Spaß!

Wir wollen uns wieder unserem eigentlichen Thema, Drag&Drop, zuwenden,
denn nach diesem einfachen, praktischen Beispiel sind noch einige Details of-
fen - so zum Beispiel drei weitere Events, die bei Drag&Drop-Operationen zur
Verfügung stehen: drag , dragend und dragleave . So wird während des Ziehens
im Abstand von 350 ms (±200 ms) ein drag -Event und nach dem Ablegen ein
dragend -Event erzeugt. Das dritte Event, dragleave , betrifft das Zielobjekt und
tritt beim Verlassen eines potenziellen Ablagebereichs auf.