HTML5 Canvas game development practice mainly explains the ideas and skills of using HTML5 Canvas to develop and design various common games. While introducing the relevant features of HTML5 Canvas, it also deeply analyzes its internal principles through game development examples, so that readers not only know it , and know why. In this book, in addition to introducing the basic API of HTML5 Canvas, it also focuses on how to use object-oriented programming ideas in JavaScript to develop games.
When this book introduces the process of each game development, it will include game analysis, development process, code analysis and summary to help readers understand the detailed steps of each type of game development, so that readers can thoroughly grasp the various types of games. develop ideas. Finally, through data comparison and analysis, it guides readers to improve the performance of the program, write efficient code, and develop games that run smoothly.
HTML5 Canvas game development combat catalog:
foreword
Preparatory work for the first part
Chapter 1 Preparations / 2
1.1 Introduction to HTML5 / 2
1.1.1 What is HTML5/2
1.1.2 New features of HTML5 / 2
1.2 Introduction to Canvas / 5
1.2.1 History of the Canvas Tag / 5
1.2.2 Definition and usage of Canvas / 6
1.2.3 How to use Canvas to draw / 6
1.2.4 Limitations of Canvas / 7
1.3 Preparation of development and operating environment / 7
1.3.1 Browser Support / 7
1.3.2 Prepare a local server / 8
1.4 Selection of development tools / 8
1.5 Testing and uploading code / 12
1.6 Object Orientation in JavaScript / 13
1.6.1 Classes / 13
1.6.2 Static classes / 16
1.6.3 Inheritance / 16
1.7 Summary / 17
The second part of basic knowledge
Chapter 2 Basic Functions of Canvas / 20
2.1 Drawing basic graphics / 20
2.1.1 Drawing lines / 20
2.1.2 Drawing rectangles / 22
2.1.3 Drawing circles / 24
2.1.4 Drawing a Rounded Rectangle / 26
2.1.5 Erasing the Canvas artboard / 27
2.2 Drawing complex graphics / 28
2.2.1 Drawing Curves / 28
2.2.2 Use clip to draw in a specified area / 30
2.2.3 Drawing custom graphics / 31
2.3 Drawing text / 32
2.3.1 Drawing text / 32
2.3.2 Text Settings / 33
2.3.3 Alignment of text / 38
2.4 Image manipulation / 41
2.4.1 Drawing pictures with drawImage / 41
2.4.2 Drawing pictures using getImageData and putImageData / 45
2.4.3 Using createImageData to create new pixels / 47
2.5 Summary / 49
Chapter 3 Advanced Canvas Features / 50
3.1 Morph / 50
3.1.1 Zoom in and out / 50
3.1.2 Panning / 53
3.1.3 Rotation / 54
3.1.4 Using the transform matrix to achieve diverse deformations / 56
3.2 Rendering of graphics / 65
3.2.1 Drawing a graph with a color gradient / 65
3.2.2 The globalCompositeOperation attribute of color composition / 67
3.2.3 Color Inversion / 69
3.2.4 Grayscale Control / 70
3.2.5 Shadow effects / 71
3.3 Custom Artboards / 72
3.3.1 Creating an Artboard / 72
3.3.2 Canvas Canvas Export Function / 79
3.4 Summary / 81
Chapter 4 Lufylegend Open Source Libraries / 82
4.1 Introduction to the lufylegend library / 82
4.1.1 How it works / 82
4.1.2 Library use flow / 83
4.2 Loading and Displaying of Pictures / 84
4.2.1 Image display example / 84
4.2.2 The LBitmapData Object / 86
4.2.3 LBitmap Objects / 87
4.3 The Concept of Layers / 88
4.4 Drawing with LGraphics objects / 90
4.4.1 Drawing rectangles / 90
4.4.2 Drawing circles / 91
4.4.3 Drawing any polygon / 92
4.4.4 Drawing using Canvas' primitive drawing functions / 93
4.4.5 Drawing with LSprite Objects / 94
4.4.6 Drawing pictures using LGraphics objects / 95
4.5 Text / 101
4.5.1 Text properties / 101
4.5.2 Input box / 102
4.6 Events / 103
4.6.1 Mouse events / 103
4.6.2 Cyclic events / 104
4.6.3 Keyboard Events / 105
4.7 Buttons / 106
4.8 Animation / 108
4.9 Summary / 113
The third part of the development of practical articles
Chapter 5 Start Simple - The Game of Rock Paper Scissors / 116
5.1 Game Analysis / 116
5.2 Necessary JavaScript knowledge / 117
5.2.1 Random numbers / 117
5.2.2 Conditional branches / 117
5.3 Layered Implementation / 117
5.4 Basic functions of each layer / 119
5.4.1 Basic screen display / 119
5.4.2 Display of the result layer / 126
5.4.3 Display of the Control Layer / 127
5.5 Punch / 129
5.6 Result determination / 131
5.7 Summary / 137
Chapter 6 Developing the "Tetris" Game / 138
6.1 Game Analysis / 138
6.2 Necessary JavaScript knowledge / 138
6.3 Game title screen display / 139
6.4 Adding blocks to the game / 141
6.5 Controlling the movement of blocks / 152
6.5.1 Keyboard events / 152
6.5.2 Touch screen events / 155
6.6 Block elimination and score display / 157
6.7 Summary / 160
Chapter 7 Development of the "One Hundred Floors" Game / 161
7.1 Game Analysis / 161
7.2 Game title screen display / 161
7.3 Reading pictures and background display / 162
7.4 Adding a stationary floor / 167
7.5 Adding game protagonists / 170
7.5.1 Making the main character of the game appear on the screen / 170
7.5.2 Controlling the movement of the main character through keyboard events / 177
7.5.3 Controlling the movement of the protagonist through touch events / 178
7.6 Adding a Variety of Floors / 179
7.6.1 The disappearing floor / 179
7.6.2 Barbed floors / 181
7.6.3 Floors with resilience / 182
7.6.4 Floor moving left and right / 184
7.7 Display of game data / 187
7.8 Game over and restart / 190
7.9 Summary / 192
Chapter 8 Developing Shooting Games / 193
8.1 Game Analysis / 193
8.2 Adding a controllable plane / 194
8.2.1 Adding an aircraft class / 194
8.2.2 Controllable aircraft category / 197
8.3 Adding Diversified Bullets to Aircraft / 203
8.3.1 Building a Bullet class / 203
8.3.2 Single Shot / 205
8.3.3 Multiple rounds / 207
8.3.4 Ring Bullets / 208
8.3.5 Reverse Bullets / 209
8.4 Adding enemy aircraft / 209
8.4.1 Creating a Bandit Class / 210
8.4.2 Creating an Enemy Boss Class / 214
8.5 Collision Detection / 217
8.5.1 The collision of an aircraft with a bullet / 217
8.5.2 Collision between my plane and the enemy plane / 220
8.6 Bullet changes / 221
8.6.1 Creating an Ammo class / 222
8.6.2 Collision between ammunition and my machine / 223
8.7 Display of aircraft health / 225
8.8 Game victory and defeat determination / 226
8.9 Summary / 228
Chapter 9 Developing Physics Games / 229
9.1 Introduction to Box2D / 229
9.2 The use of Box2dWeb in the lufylegend library / 229
9.3 Creating Various Objects / 234
9.3.1 Rectangular objects / 234
9.3.2 Circular objects / 237
9.3.3 Polygon Objects / 239
9.4 Responding to mouse dragging objects / 242
9.5 Joint / 243
9.5.1 Distance Joint (b2DistanceJointDef) / 243
9.5.2 Revolute Joint (b2RevoluteJointDef) / 245
9.5.3 Pulley Joint (b2PulleyJointDef) / 247
9.5.4 Moving a joint (b2PrismaticJoint) / 248
9.5.5 Gear Joint (b2GearJoint) / 250
9.5.6 Suspension joint (b2LineJoint) / 252
9.5.7 Weld Joint (b2WeldJoint) / 253
9.5.8 Mouse Joint / 254
9.6 force / 254
9.7 Collision Detection / 256
9.8 Lens shift / 260
9.9 Making a Simple Physics Game / 263
9.10 Summary / 267
Chapter 10 Developing Online Games / 268
10.1 HTTP Communication / 268
10.1.1 How to implement HTTP communication / 268
10.1.2 Disadvantages of HTTP Communication / 275
10.2 Socket communication / 275
10.2.1 Distinguishing Socket Communication from HTTP Communication / 276
10.2.2 server side / 276
10.2.3 Client / 281
10.3 Implementing a Simple Chat Room Using WebSockets / 283
10.4 Make a multiplayer online tank battle / 293
10.4.1 Servers/293
10.4.2 Client / 293
10.5 Summary / 307
Part 4 Skill Improvement
Chapter 11 Analysis for Improving Efficiency / 310
11.1 Effects of using decimals when plotting / 310
11.2 Efficiency comparison of drawImage and putImageData / 311
11.3 The Effect of Region Update and Image Size on Drawing Efficiency / 311
11.4 The Effect of Image Format on Drawing Efficiency / 313
11.5 Optimizing Code for Overall Efficiency / 314
11.5.1 Using Bit Operations / 314
11.5.2 Use Math static classes sparingly / 316
11.5.3 Optimization Algorithms / 319
11.6 Summary / 322
Tutorial address:
HTML5 Canvas game development combat PDF scan version