It selects 10 common game types and provides an in-depth analysis of game engine and tool selection techniques through typical examples. It explains the production process of each game in detail, providing a systematic and practical guide for quickly mastering web game development.

Web game development tips Table of Contents:

Translator's Preface
Foreword
preface
Chapter 1 Quiz Game 1
1.1 Step One: Question 1
1.2 Step 2: Hidden question 8
1.3 Step Three: Reproduce Question 9
1.4 Step 4: Introduce various program libraries 11
1.5 Step 5: Determine whether the answer chosen by the player is correct 15
1.6 Summary 19
Chapter 2 Text Adventure Game 20
2.1 Step One: Design Page Style 21
2.2 Step 2: Implement page jump 25
2.3 Step 3: Add prop bar and prop drag-and-drop function 27
2.4 Step 4: Add complex interactive functions 35
2.5 Step 5: Add history navigation function 44
2.6 Step 6: Add a wonderful ending 46
2.7 Summary 48
Chapter 3 Party Games 50
3.1 Step One: Create a sample game using atom.js 50
3.2 Step 2: Drawing with canvas element 56
3.3 The third step: Drawing the mouse hole 58
3.4 Step 4: Draw the Mole 60
3.5 Step 5: Put the mole into the mouse hole 63
3.6 Step 6: Make the mole come out of the hole 65
3.7 Step 7: Allow players to fight moles by tapping the keyboard 67
3.8 The [audio] tag of HTML5 is not satisfactory 70
3.9 Summary 72
Chapter 4 Puzzle Game 73
4.1 Step 1: Use easel.js to render 74
4.2 Step 2: Render multiple blocks 78
4.3 Step 3: Create pairs of blocks of the same color 81
4.4 Step 4: Match and eliminate blocks of the same color 83
4.5 Step 5: Hide and flip images 85
4.6 Step 6: Determining the outcome 87
4.7 Step Seven: Caching and Performance Optimization 91
4.8 Step 8: Change the block matching game to a letter recognition game 93
4.9 Summary 99
Chapter 5 Platform Game 100
5.1 First introduction to melon.js 100
5.2 Step One: Create Tile Map 101
5.3 Step 2: Start the game 102
5.4 Step 3: Add game characters 105
5.5 Step 4: Build collision layer 107
5.6 Step Five: Walking and Jumping 108
5.7 Step Six: Title Screen 110
5.8 Step 7: Add items for players to collect 112
5.9 Step 8: Add enemies 113
5.10 Step 9: Add ability-enhancing props 115
5.11 Step 10: Add a victory or defeat determination mechanism and display game information 116
5.12 Summary 118
Chapter 6 Fighting Game 120
6.1 The first step: getting to know game.js 120
6.2 Step 2: Draw each sprite in the sprite sheet individually 123
6.3 Step 3: Process the input of two players 124
6.4 Step 4: Movement and Transformation 127
6.5 Step 5: Don’t let the two players’ inputs block each other 130
6.6 Step 6: Use bit mask to record key status 134
6.7 Step 7: Use mask to detect collision 137
6.8 Step 8: Let the two game characters attack each other 140
6.9 Summary 145
Chapter 7 Flight Shooting Game 146
7.1 Preparatory knowledge related to rendering 146
7.2 The first step: getting to know gameQuery 148
7.3 Step 2: Add “enemy aircraft” 150
7.4 Step Three: Create your own fighter 153
7.5 Step 4: Handling collisions between players and enemies 156
7.6 Step Five: Fire Bullets 157
7.7 Step Six: Provide players with a variety of weapons 159
7.8 Summary 162
Chapter 8 First Person Shooter 164
8.1 The first step: getting to know Jaws 164
8.2 Step 2: Create a two-dimensional map 166
8.3 Step Three: Add Players 169
8.4 Step 4: Use ray casting technology to draw a top view 173
8.5 Step 5: Use light projection technology to achieve pseudo-3D effect 177
8.6 Step 6: Equip players with cameras 180
8.7 Step 7: Decorate the game scene 184
8.8 Step 8: Add companions 188
8.9 Summary 195
Chapter 9 Role Playing Game 197
9.1 The first step: getting to know enchant.js 197
9.2 Step 2: Create a map 199
9.3 Step Three: Add Players 202
9.4 Step 4: Add collision layer 207
9.5 Step 5: Draw status screen 209
9.6 Step Six: Talk to NPC 212
9.7 Step 7: Draw the prop bar 215
9.8 Step 8: Open a prop store 218
9.9 Step 9: Implement the combat interface 226
9.10 Step 10: Store game progress through HTML5’s local storage API 236
9.11 Summary 238
Chapter 10 Real-time Strategy Game 240
10.1 Server 240
10.2 Step One: Configure Node 243
10.3 Step 2: Use socket.io to achieve instant communication 246
10.4 Step 3: Create Isometric map with crafty.js 249
10.5 Step 4: Draw chess pieces 251
10.6 Step 5: Move the pieces 255
10.7 Step Six: Allow players to only control their own chess pieces and hide the patterns on the opponent’s chess pieces 258
10.8 Step 7: Implement collision detection so that players can capture the opponent’s pieces and see their patterns 264
10.9 Summary 268
Chapter 11 How to continue to improve the level of game development 270
11.1 Contents already discussed in this book 270
11.2 What should be learned next 271
Appendix A JavaScript Basics 273
Appendix B Code Quality Control 280
Appendix C Resources 285