Html5app Combat (1): Surround the nerve cat (ii)

The previous article analyzed the "contingency" surrounding the cat game, this article mainly introduced through Gamebuilder + CANTK to complete the game design and development.

1. New Item Delete the scene in the ball and grass, and place the background picture, and the cat moves the BLOCK:

The background of the scene and the moving circle of the cat are simple label images.

2. Place a frame animation to indicate the cat

Cat from squat to standing a total of 16 states, click on the selection of images to split the picture.

3. Picture of the screen where the game starts:

Click the start game to hide the control and animate the frame:

Gamebuilder provides a very user-friendly code editing tool, and greatly reduces the difficulty of non-programmer game development, almost no need a few lines of code, you can complete the complex operation logic:)

4. Next, implement the main program logic in the OnOpen event handler of the scene window:

This part of the code is more, mainly the shortest path and the implementation of the maximum access algorithm, which is not within our scope of discussion, it is necessary to go to the online editing interface scene OnOpen event processing to find.

5. Finally, place a picture at the end of the game screen to start the game again:

To implement the logic of the game when the user clicks the "Try again":

Here the whole of the nerve cat game is basically over. Is such a simple small game, swept the whole circle. The marvellous is also blown by people. I believe the use of GAMEBUILDER+CANTK this set of artifacts, the next blow-up circle of the small game, will come from your hand:)

Resources:

https://github.com/drawapp8/gamebuilder/wiki/%E4%B8%AD%E6%96%87%E6%96%87%E6%A1%A3

Html5app Combat (1): Surround the nerve cat (ii)