Es wählt 10 gängige Spieltypen aus und bietet anhand typischer Beispiele eine detaillierte Analyse der Spiel-Engine- und Tool-Auswahltechniken. Es erklärt den Produktionsprozess jedes Spiels im Detail und bietet einen systematischen und praktischen Leitfaden für die schnelle Beherrschung der Webspielentwicklung.

Tipps für die Entwicklung von Webspielen Inhaltsverzeichnis:

Vorwort des Übersetzers
Vorwort
Einführung
Kapitel 1 Quizspiel 1
1.1 Schritt eins: Frage 1
1.2 Schritt 2: Versteckte Frage 8
1.3 Schritt 3: Frage 9 wiedergeben
1.4 Schritt 4: Verschiedene Programmbibliotheken vorstellen 11
1.5 Schritt 5: Bestimmen Sie, ob die vom Spieler gewählte Antwort richtig ist 15
1.6 Zusammenfassung 19
Kapitel 2 Text-Abenteuerspiel 20
2.1 Der erste Schritt: Gestalten Sie den Seitenstil 21
2.2 Schritt 2: Seitensprung 25 implementieren
2.3 Schritt 3: Requisitenleiste und Requisiten-Drag-and-Drop-Funktion hinzufügen 27
2.4 Schritt 4: Komplexe interaktive Funktionen hinzufügen 35
2.5 Schritt 5: Verlaufsnavigationsfunktion hinzufügen 44
2.6 Schritt 6: Fügen Sie einen wunderbaren Schluss hinzu 46
2.7 Zusammenfassung 48
Kapitel 3 Partyspiele 50
3.1 Schritt eins: Erstellen Sie ein Beispielspiel mit atom.js 50
3.2 Schritt 2: Zeichnen Sie mit Leinwandelement 56
3.3 Schritt drei: Zeichnen Sie das Rattenloch 58
3.4 Schritt 4: Zeichnen Sie den Maulwurf 60
3.5 Schritt 5: Setzen Sie den Maulwurf in das Mauseloch 63
3.6 Schritt 6: Lassen Sie den Maulwurf aus dem Loch 65
herauskommen 3.7 Schritt 7: Ermöglichen Sie den Spielern, gegen Maulwürfe zu kämpfen, indem Sie auf die Tastatur tippen 67
3,8　HTML5s [Audio]-Tag ist nicht zufriedenstellend 70
3.9 Zusammenfassung 72
Kapitel 4 Puzzlespiel 73
4.1 Schritt 1: Verwenden Sie Easel.js, um 74
zu rendern 4.2 Schritt 2: Mehrere Blöcke rendern 78
4.3 Schritt 3: Erstelle gleichfarbige Blockpaare 81
4.4 Schritt 4: Kombiniere und eliminiere Blöcke derselben Farbe 83
4.5 Schritt 5: Bilder ausblenden und spiegeln 85
4.6 Schritt 6: Feststellung von Sieg oder Niederlage 87
4.7 Schritt sieben: Caching und Leistungsoptimierung 91
4.8 Schritt 8: Ändern Sie das Blockzuordnungsspiel in ein Buchstabenerkennungsspiel 93
4.9 Zusammenfassung 99
Kapitel 5 Plattformspiel 100
5.1 Erste Einführung in melon.js 100
5.2 Schritt eins: Kachelkarte erstellen 101
5.3 Schritt 2: Starten Sie das Spiel 102
5.4 Schritt 3: Spielfiguren hinzufügen 105
5.5 Schritt 4: Kollisionsschicht 107 erstellen
5.6 Schritt fünf: Gehen und Springen 108
5.7 Schritt sechs: Titelbildschirm 110
5.8 Schritt 7: Gegenstände hinzufügen, damit die Spieler 112
sammeln können 5.9 Schritt 8: Feinde hinzufügen 113
5.10 Schritt 9: Fähigkeitensteigernde Requisiten hinzufügen 115
5.11 Schritt 10: Fügen Sie einen Mechanismus zur Bestimmung von Sieg oder Niederlage hinzu und zeigen Sie Spielinformationen an 116
5.12 Zusammenfassung 118
Kapitel 6 Kampfspiel 120
6.1 Der erste Schritt: game.js 120 kennenlernen
6.2 Schritt 2: Zeichnen Sie jedes Sprite einzeln in das Spritesheet 123
6.3 Schritt 3: Input von zwei Spielern verarbeiten 124
6.4 Schritt 4: Bewegung und Transformation 127
6.5 Schritt 5: Lassen Sie nicht zu, dass sich die Eingaben der beiden Spieler gegenseitig blockieren 130
6.6 Schritt 6: Verwenden Sie die Bitmaske, um den Tastenstatus 134 aufzuzeichnen
6.7 Schritt 7: Maske zur Kollisionserkennung verwenden 137
6.8 Schritt 8: Lassen Sie die beiden Spielcharaktere 140
gegeneinander angreifen 6.9 Zusammenfassung 145
Kapitel 7 Flugschießspiel 146
7.1 Vorbereitende Kenntnisse zum Rendern 146
7.2 Der erste Schritt: gameQuery 148 kennenlernen
7.3 Schritt 2: „Feindflugzeug“ hinzufügen 150
7.4 Schritt 3: Erstelle deinen eigenen Kämpfer 153
7.5 Schritt 4: Umgang mit Kollisionen zwischen Spielern und Feinden 156
7.6 Schritt fünf: Kugeln abfeuern 157
7.7 Schritt Sechs: Den Spielern eine Vielzahl von Waffen zur Verfügung stellen 159
7.8 Zusammenfassung 162
Kapitel 8 Ego-Shooter 164
8.1 Der erste Schritt: Jaws 164 kennenlernen
8.2 Schritt 2: Erstellen Sie eine zweidimensionale Karte 166
8.3 Schritt drei: Spieler hinzufügen 169
8.4 Schritt 4: Zeichnen Sie eine Draufsicht mithilfe der Raycasting-Technologie 173
8.5 Schritt 5: Verwenden Sie die Lichtprojektionstechnologie, um einen Pseudo-3D-Effekt zu erzielen 177
8.6 Schritt 6: Spieler mit Kameras ausrüsten 180
8.7 Schritt 7: Dekorieren Sie die Spielszene 184
8.8 Schritt 8: Begleiter hinzufügen 188
8.9 Zusammenfassung 195
Kapitel 9 Rollenspiel 197
9.1 Der erste Schritt: enchant.js 197 kennenlernen
9.2 Schritt 2: Karte erstellen 199
9.3 Schritt drei: Spieler hinzufügen 202
9.4 Schritt 4: Kollisionsebene 207 hinzufügen
9.5 Schritt 5: Statusbildschirm zeichnen 209
9.6 Schritt Sechs: Sprich mit NPC 212
9.7 Schritt 7: Zeichnen Sie die Stützenstange 215
9.8 Schritt 8: Eröffnen Sie einen Requisitenladen 218
9.9 Schritt 9: Implementieren Sie die Kampfschnittstelle 226
9.10 Schritt 10: Spielfortschritt über die lokale Speicher-API 236 von HTML5 speichern
9.11 Zusammenfassung 238
Kapitel 10 Echtzeit-Strategiespiel 240
10.1 Server 240
10.2 Schritt 1: Knoten 243 konfigurieren
10.3 Schritt 2: Verwenden Sie socket.io, um sofortige Kommunikation zu erreichen 246
10.4 Schritt 3: Isometrische Karte mit crafty.js erstellen 249
10.5 Schritt 4: Schachfiguren zeichnen 251
10.6 Schritt 5: Bewegen Sie die Schachfigur um 255
10.7 Schritt Sechs: Den Spielern erlauben, nur ihre eigenen Figuren zu kontrollieren und die Muster auf den Figuren des Gegners zu verbergen 258
10.8 Schritt 7: Kollisionserkennung implementieren, damit Spieler die Figuren des Gegners schlagen und deren Muster erkennen können 264
10.9 Zusammenfassung 268
Kapitel 11 Wie man das Niveau der Spieleentwicklung weiter verbessert 270
11.1 In diesem Buch bereits besprochene Inhalte 270
11.2 Was als nächstes gelernt werden sollte 271
Anhang A JavaScript-Grundlagen 273
Anhang B Code-Qualitätskontrolle 280
Anhang C Ressourcen 285