HTML5 game Engine Phaser official sample learning

Starter: personal blog, update & error correction & reply

Phaser official sample learning is in progress, the official example is adjusted to a concise directory structure, the learning process has added a few Chinese comments, code here.

The official full game example is now viewed in more than half,

Breakout is knocking bricks, gemmatch is diamond elimination, Invaders is a little bee, matching is paired, Simon is memory game, sliding is jigsaw puzzle, starstruck like Super Mario, tanks is tank game.

In the game scene, knock bricks, small bees are vertical version, Super Mario is horizontal version, tank game is overlooking, Diamond, pairing, memory, jigsaw puzzles These four are the chessboard.

In the interface composition, the board game basically used the tile diagram, brick bees and tanks is the basic spirit, Mario is a combination of tile and elves.

The drawing of the tile diagram uses tiled for visual drawing, and after drawing the generated JSON file, which preserves the structure of the world, this is still groping. Tile map of the material online there are many, in fact, rpgmaker each version comes with the material is good, their own effect material such as explosion can also be used in phaser, walking diagram can also be used.

Because phaser itself supports animations, when defining sprites you can specify a simple picture, and you can specify a large picture that contains many frames (in fact, only one of the frames, such as a brick diamond, or many of the frames used as an animation using a small bee's enemy), You can even specify more than one picture to form an animation (tank example shows), in addition to a number of sprites can be composed of a logical wizard (also the tank example, the body, turret, shadows are different sprites).

The behavior of the enemy Elf, simply in the main loop update method for it to write logic, such as the small bee enemy aircraft, complex points can be the enemy to define a class, the prototype way to write an instance method, in the Update method to traverse the call to a method, You might even place enemies of different classes in the same array, calling their same-name method, which is a bit like Java's polymorphic nature, but JavaScript is weakly typed.

Player's behavior, divided into mouse operation and keyboard operation, the keyboard operation in the main loop update to determine whether to press, if you do not want to respond to user action too frequently, you can use a variable to save the last operation time, and then have the operation to see if there are enough milliseconds, otherwise do not handle, this "critical value" Are common in the use of various examples.

Mouse operation can be in the main loop to determine whether the mouse button is pressed, more intuitive is to add press/release/move for the sprite. such as the response function, when the mouse on the sprite to do the operation of direct call function, Diamond Game is a good demonstration. As for the position of the mouse, the board game can convert the its first into which grid in the chessboard, get the number of rows to be processed, while the tank game uses the position of the pointer directly as the target turret and the cannon.

The game can be repeated and self-connected small images as the background, similar to the reality of the floor tiles or sheets on the pattern, is actually a genie, locked on the screen, you write code to let it scroll, such as the small bee automatically roll down the sky like a plane flying upward, while the tank game is to move the direction of the tank in the opposite direction Look at the effect is the tank and the relative position of the ground with the reality of the same, as for Super Mario game, simply do not roll, this is because the map element on the screen is enough to show the effect of moving.

Pairs, memories, puzzles have "computer know and the player may not remember" information, such as the matching game in the back of each lattice of the picture is what the memory game in the end of the question of what the number sequence is, the success of the puzzle where each fragment should be where, the information of course there is a game in the global variables, In addition, for example, the amount of enemy tanks in a tank game is saved by an attribute of the enemy tank class. What programming elements can be used to save game state, you can think of HTML5 local storage and even the database, even with Ajax or WebSocket to the server.

Memory games have the concept of "level", and the Little bee game when three lives after the death of a click to restart the game function, these enter the new level or start the game again, Of course, do not location.reload, do not reinitialize the DOM and other such a big thing, in fact, restart the game just a logical start, reset the global variable to the initial state (clearance is the number of levels plus one other data clear 0), and re-display the appropriate interaction information, such as playing the animation , prompting the user to click on what to start.

Chess game in the elves, both coordinates, but also in the first few lines, the first few columns of the concept, the game logic is of course the most reasonable to use the number of rows of the sequence of logic, when moving pieces, the use of coordinates to write animation statements gracefully sliding past, and the number of rows are directly designated, representing "where".

Small bees and tanks have shells and explosions of the temporary wizard, with the "pool" to pre-initialize a batch of such elves, use to remove, and then return, with the database connection "pool", the server thread "pool" is the same idea, to avoid too many objects. When a cannonball hits an enemy tank/plane, it detects contact in the main loop and, if contacted, does something, such as destroying shells, playing animated effects, reducing the amount of enemy blood and even dying.

At present, the key points of this summary are the main loop, the Genie, the global state, the player behavior, the sprite strategy, and of course the tile map.

Long-term welcome project Cooperation Opportunity Introduction, project income 10% to reward introducer. Sina Weibo: @ Cold Mirror, qq:908789432.

HTML5 game Engine Phaser official sample learning