---

Sie möchten Browsergames und Spiele-Apps für iPhone, Android, Windows 8 und Co. entwickeln? In diesem Buch lernen Sie anhand eines attraktiven Beispiel-Spiels, wie es geht! Sie erfahren, wie Sie das Spielfeld mit dem Canvas zeichnen, die Spiellogik umsetzen, Ton hinzufügen, Spielstände speichern u.v.m. Die benötigten HTML5-Grundlagen werden Ihnen dafür ausführlich erklärt - wenn Sie also ein paar JavaScript-Kenntnisse mitbringen, steht Ihren eigenen HTML5-Spielen nichts mehr im Weg!

---

Einführung 15

Teil 1 Erste Schritte mit HTML5-Spielen

1 Spielen im Web 23

1.1 Die Geschichte von HTML5 24

1.2 HTML5 für Spiele nutzen 25

1.2.1 Canvas 25

1.2.2 Audio 27

1.2.3 WebSockets 29

1.2.4 Web Storage 30

1.2.5 WebGL 31

1.2.6 HTML5 ist (k)ein Flash-Killer 32

1.3 So sorgen Sie für Abwärtskompatibilität33

1.3.1 Unterstützte Funktionen ermitteln 33

1.3.2 Die Modernizr-Bibliothek nutzen 34

1.3.3 Die Lücken mit Polyfills stopfen 35

1.4 Die Entwicklung eines Spiels 37

1.5 Zusammenfassung 38

2 Die ersten Schritte 39

2.1 Die Spielidee 40

2.1.1 Steine tauschen 40

2.1.2 3-Gewinnt 40

2.1.3 Aufstieg in höhere Level 41

2.2 Die verschiedenen Spielphasen 41

2.2.1 Startbildschirm 41

2.2.2 Hauptmenü 42

2.2.3 Das Game spielen 43

2.2.4 Highscore-Anzeige 43

2.3 Das Anwendungsgerüst erstellen 45

2.3.1 Das HTML-Grundgerüst 46

2.3.2 Ein paar Formate hinzufügen 47

2.3.3 Scripts laden 49

2.4 Den Startbildschirm erstellen 54

2.4.1 Webfonts nutzen 55

2.4.2 Gestaltung des Startbildschirms 57

2.5 Zusammenfassung 59

3 Mobil unterwegs 61

3.1 Webanwendungen für Mobilgeräte entwickeln 62

3.1.1 Einmal geschrieben, vielfach genutzt 63

3.1.2 Herausforderungen der Mobilplattformen 63

3.2 Der Umgang mit Benutzereingaben bei Mobilgeräten 64

3.2.1 Tastatureingaben 64

3.2.2 Maus versus Fingertipp 65

3.3 Anpassung an niedrige Bildschirmauflösungen 67

3.3.1 Skalierbare Layouts erstellen 69

3.3.2 Kontrolle des Darstellungsbereichs 71

3.3.3 Die Zoomfunktion für den Nutzer deaktivieren 72

3.4 Verschiedene Ansichten erstellen 73

3.4.1 Das Hauptmenü erstellen 73

3.4.2 screen-Module hinzufügen 75

3.4.3 CSS-media-Abfragen nutzen 80

3.4.4 Die Geräteausrichtung ermitteln 82

3.4.5 Eine CSS-Datei für Mobilgeräte hinzufügen83

3.4.6 Entwicklung für iOS- und Android-Geräte 86

3.4.7 Webapps auf dem Homescreen ablegen 87

3.4.8 Eigenständige Apps erkennen 88

3.4.9 Modernizr erweitern 89

3.4.10 Einen speziellen Startbildschirm erstellen 89

3.4.11 Ein Anwendungssymbol hinzufügen 92

3.4.12 Ein Startbild hinzufügen 95

3.4.13 Die Statusleiste umgestalten 96

3.5 Den Browser beiseite schaffen 97

3.5.1 Elastisches Scrollen deaktivieren 97

3.5.2 Die Adressleiste verstecken 98

3.5.3 Das Standardverhalten des Browsers deaktivieren 99

3.6 Fehlersuche in Webapps für Mobilgeräte 100

3.6.1 Den Safari-Debugger aktivieren 101

3.6.2 Auf das Android-Protokoll zugreifen 103

3.7 Zusammenfassung 104

Teil 2 Das Spielgerüst erstellen

4 Das Spiel erstellen 107

4.1 Das Modul für die Ablauflogik des Spiels erstellen107

4.1.1 Die Spielinitialisierung 109

4.1.2 Das Spielfeld zu Beginn füllen 113

4.2 Die Spielregeln implementieren 115

4.2.1 Die Zulässigkeit von Tauschvorgängen prüfen116

4.2.2 Ketten aufspüren 118

4.2.3 Das Spielfeld erneut mit Steinen füllen 124

4.2.4 Juwelen vertauschen 128

4.3 Zusammenfassung 130

5 Tasks an Web-Worker delegieren 131

5.1 Mit Web-Workern arbeiten 131

5.1.1 Beschränkungen von Workern 132

5.1.2 Was sich mit Workern erledigen lässt 134

5.2 Worker nutzen 135

5.2.1 Nachrichten senden 136

5.2.2 Nachrichten empfangen 137

5.2.3 Fehler abfangen 137

5.2.4 Shared Worker 138

5.2.5 Ein Primzahlenbeispiel 140

5.3 Web-Worker in Spielen verwenden 144

5.3.1 Das Worker-Modul erstellen 145

5.3.2 Dieselbe Schnittstelle beibehalten 147

5.4 Zusammenfassung 153

6 Grafiken mit Canvas erzeugen 155

6.1 Grafiken im Web 156

6.1.1 Bitmap-Bilder 156

6.1.2 SVG-Grafiken 156

6.1.3 Canvas 157

6.1.4 Wann sollte Canvas gewählt werden 158

6.2 Mit Canvas zeichnen 159

6.2.1 Figuren und Pfade zeichnen 160

6.2.2 Füllungen und Umrandungen 161

6.2.3 Rechtecke 163

6.2.4 Bogen und Kreise 164

6.2.5 Bézierkurven 167

6.2.6 Beschnittpfade 170

6.3 Anspruchsvolle Umrahmunge

---