388 Kapitel 9
Ein Spiel mit Events planen
Events verstehen … indem wir ein Spiel programmieren
Am besten versteht man Events durch Erfahrung. Dafür schreiben wir ein kleines Spiel,
das so funktioniert: Beim Laden der Seite wird ein Bild angezeigt. Nicht irgendein Bild,
sondern ein stark weichgezeichnetes. Sie müssen raten, was auf dem Bild zu sehen ist. Um
Ihre Lösung zu testen, klicken Sie auf das Bild, damit die scharfe Version angezeigt wird.
So wie hier:
Hier ist die
weichgezeichnete
Version. Was mag
das sein?
Wenn Sie glauben, Sie
wissen es, klicken Sie,
um das scharfe Bild
anzuzeigen.
Fangen wir mit dem Markup an. Wir benutzen zwei JPEG-Bilder. Eines ist weichgezeichnet,
das andere scharf. Wir nennen sie »zeroblur.jpg« und »zero.jpg«. Hier das Markup:
<!doctype html>
<html lang="de">
<head>
<meta charset="utf-8">
<title>Bilderrätsel</title>
<style> body { margin: 20px; } </style>
</head>
<body>
<img id="zero" src="zeroblur.jpg">
</body>
</html>
Und hier wird das unscharfe
Bild in der Seite platziert.
Es erhält die ID "zero". Die
Verwendung der ID zeigen
wir Ihnen sofort …
Nur ein bisschen schlichter HTML-Code
mit einem <script>-Element für unseren
Code. Anstatt den JavaScript-Code in
eine eigene Datei auszulagern, schreiben
wir das Skript einfach direkt in die
HTML-Datei. Wie Sie sehen, benötigt die
Implementierung nur relativ wenig Code.
Singen Sie die
Titelmelodie von
Wer wird Millionär
vor sich hin und
versuchen Sie es
herauszukriegen …
Get JavaScript-Programmierung von Kopf bis Fuß now with the O’Reilly learning platform.
O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.
