Detailed introduction to cnGameJS

Since the entire game occurs in a game loop, the game loop can be said to be the core part of the game. Each time through the loop, the game object's properties are updated, and game elements are drawn. As mentioned in the previous resource loading article, after the resource loading is completed, a game loop will be started when starting the game. Now let’s review this part of the code: /***Processing program for image loading completion **/ var imgLoad=function(self){          return function(){ &

1. HTML5 Game Framework cnGameJS Development Record-Game Loop

Introduction: Since the entire game takes place in a game loop, the game loop can be said to be the core part of the game. Each time through the loop, the game object's properties are updated, and game elements are drawn.

2. HTML5 Game Framework cnGameJS Development Record - Elf Object

##Introduction: The so-called elf object is an element with behavior in the game. Taking Super Mario as an example, Mary and the enemy are all considered to be an elf object. In the cnGameJS framework, the sprite object has the following characteristics:

3. HTML5 Game Framework cnGameJS Development Record - Game Map Object

#Introduction: The game map object is suitable for games like tank battles and push box games. The maps of these games are composed of small grids. This kind of map can be easily generated using the game map object.

4. HTML5 Game Framework cnGameJS Development Record-Basic Graphics Module

Introduction: This module is also very simple, mainly including the drawing of three basic graphics: rectangular and circular text. We encapsulate each image in the constructor mode. For example, when we need to draw a rectangular object, we first create a new rectangular object, and then call the draw method of the object to draw. For example:

5. HTML5 Game Framework cnGameJS Development Record-External Input Module

Introduction: In games, we often use operations like this: when the mouse clicks on a certain position, the player object moves to that position, or when the mouse direction keys are pressed, the player moves in different directions, etc. . All of these operations involve dealing with external input devices. As game designers, we need to know the current position of the mouse, the click status of the keyboard, etc. at any time, so that we can control the game elements conveniently. Therefore, as a game framework, external input modules are also essential.

6. HTML5 Game Framework cnGameJS Development Record-Collision Detection Module

Introduction: The collision check of this module is limited to the detection between points and rectangles, (parallel) rectangles and rectangles, points and circles, circles and circles, so this module is also very Simple, let’s take a look directly with the code:

7. HTML5 game framework cnGameJS development record-implementation animation principle

Introduction: In games, the animation effects of game characters are an essential part of the game. In this section, we take the construction of Super Mario characters as an example to explain the implementation of animation in cnGameJS.

8. HTML5 Game Framework cnGameJS Development Record-Core Function Module Chapter Code Example

Introduction: The main function of the core function module is to provide convenience for subsequent framework development and user development of games. The entire framework is in a closure to avoid affecting the global scope. pollute. After that, each different module is in its own closure, making the separation of different modules clearer. Therefore, the module division of our framework will be like this:

9. HTML5 game framework cnGameJS development record-detailed explanation of resource loading module code

Introduction: This module is the entrance to the game. We load resources through this module and call the entry function of the game object after the resource loading is completed. In addition, this module also includes switching between game scenes, as well as the calculation and display of loading percentage.

10. HTML5 Game Framework cnGameJS Development Record-Game Scene Object

Introduction: Scene objects are different from the map objects introduced in the previous article. They are used in different types of games. Previous map objects were used in grid games, such as Sokoban and Tank Battle. The scene objects introduced in this section are suitable for games with specific scenes, such as Super Mario, Dinosaur Kombat, etc. This type of game usually controls a player object in a 2D scene. As the player moves, the scene moves with it.

【Related Q&A recommendations】:

The above is the detailed content of Detailed introduction to cnGameJS. For more information, please follow other related articles on the PHP Chinese website!