Create a neural Cat Game with pure HTML5-with source code download_javascript skills

The neural Cat Game is a game developed based on html5, jquery, typescript, and other technologies. It is very fun. If you are interested, come and watch it and try it, we will share with you how to create a neural Cat Game using html5-download the source code, if you need it, you can refer to the HTML5 neural Cat Game webpage version. It is a neural Cat Game developed based on HTML5, jquery, Typescript, and other technologies.

First, we will attach the demo and source code download. Click here to view the demo download source code.

Last year, I tried to "enclose the nervous cat", a game popular in the circle of friends. The game was developed using the Egret engine because Egret was built using the Typescript language, so the game was also developed using Typescript.

Game rules:

Click the gray lattice on the screen to slowly enclose the nervous cat. If the cat reaches the edge of the game area, the game fails.

Prepare materials

Search for the "Neural cat encirclement" game on the internet, open a game, and open the debugging interface. In the network or resource, take pictures such as CAT, gray circle, and orange circle and save them to your local device.

It should be noted that the new MovieCilp Architecture Design and MovieClip data format standards of Egret are somewhat different from those in the early stage. What I pulled from the Internet is no longer applicable, the json file of mc is modified according to the new data format standard as follows:

{"mc":{ "stay":{ "frameRate":20, "labels":[], "frames":[   {"res":"stay0000","x":0,"y":0},   {"res":"stay0001","x":0,"y":0},   {"res":"stay0002","x":0,"y":0},   {"res":"stay0003","x":0,"y":0},   {"res":"stay0004","x":0,"y":0},   {"res":"stay0005","x":0,"y":0},   {"res":"stay0006","x":0,"y":0},   {"res":"stay0007","x":0,"y":0},   {"res":"stay0008","x":0,"y":0},   {"res":"stay0009","x":0,"y":0},   {"res":"stay0010","x":0,"y":0},   {"res":"stay0011","x":0,"y":0},   {"res":"stay0012","x":0,"y":0},   {"res":"stay0013","x":0,"y":0},   {"res":"stay0014","x":0,"y":0},   {"res":"stay0015","x":0,"y":0} ] }}, "res":{  "stay0000": {"x":0,"y":0,"w":61,"h":93},  "stay0001": {"x":61,"y":0,"w":61,"h":93},  "stay0002": {"x":122,"y":0,"w":61,"h":93},  "stay0003": {"x":183,"y":0,"w":61,"h":93},  "stay0004": {"x":0,"y":93,"w":61,"h":93},  "stay0005": {"x":61,"y":93,"w":61,"h":93},  "stay0006": {"x":122,"y":93,"w":61,"h":93},  "stay0007": {"x":183,"y":93,"w":61,"h":93},  "stay0008": {"x":0,"y":186,"w":61,"h":93},  "stay0009": {"x":61,"y":186,"w":61,"h":93},  "stay0010": {"x":122,"y":186,"w":61,"h":93},  "stay0011": {"x":183,"y":186,"w":61,"h":93},  "stay0012": {"x":0,"y":279,"w":61,"h":93},  "stay0013": {"x":61,"y":279,"w":61,"h":93},  "stay0014": {"x":122,"y":279,"w":61,"h":93},  "stay0015": {"x":183,"y":279,"w":61,"h":93} }}

Write code

This article mainly summarizes the two main problems I encountered during the development process.

Question 1: How can a cat escape?

In this game, each circle can be in three states.

Passable, in a gray circle

There is a roadblock, not feasible, represented by an orange circle

Occupied by cats, gray circles, and CAT animations stacked on them

When a gray circle is clicked, it turns into an orange circle, that is, the block State. At the same time, the cat will follow the clicking action and take a step to the surrounding area.

Walking direction

The game area consists of 9*9 circles, and the even number of rows indented the width of the circle radius. As a result, the cat can theoretically have 6 walking directions (only one step at a time ), they are left, top left, top right, right, bottom right, and bottom left. If the circle in these positions is in the block status, the corresponding direction is unavailable.

If five of the neighbors in these six directions are road blocks, it would be good to choose a line. The only way out is the rest, but it is obviously impossible to make the situation so simple. We are faced with more situations where, on the six-way neighbors, there are directly in the status of a roadblock (which is definitely not going this step), and there is a passable status, however, their accessibility to the edge is different.

For example, at present, the cat can reach the edge by taking three steps in the left direction, four steps can be taken in the upper right and lower right directions, and one step can be taken in the upper left and upper right directions, but the block is met, take three steps in the lower left direction to face a roadblock. At this time, we should sort the priority of these six directions.

Priority

In this way, I set the priority order:

All the way> the direction of the roadblock appears, so that the picture is left, top right, bottom right> top left, right, bottom left

In the direction of a road, the closer the edge, the higher the priority, so that the picture is left> top right, bottom right

In the direction of the roadblock, the more steps you can take, the higher the priority. In this way, the bottom left> top right and top left

The following describes the accessibility of these conventions with numerical values for comparison. If this value is set to accessibility, the higher the value, the higher the priority.

All the way

Accessibility = 1/stepToEdge; // stepToEdge indicates that there are still several steps to the edge

The direction of the roadblock appears.

Accessibility = (-1)/stepToBlock; // stepToBlock indicates the distance from the roadblock

Next, consider what if the denominator is 0. In the first case, if the denominator is 0, it indicates that the cat is already at the edge, so you do not need to judge the priority. The game has failed. In the second case, if the denominator is 0, it indicates that a roadblock is encountered when going out. If this direction is left blank, the priority is-1.

In this case, the accessibility values in the six directions are:

Left: 1/3

Upper left:-1

Upper right: 1/4

Right:-1

Bottom right: 1/4

Bottom left:-1/3

In this case, the priority should be left> top right> bottom left> top left> right.

Why are the values in the top left, right, top right, and bottom right groups clearly the same? The reason is that the computation starts clockwise from the left direction. If the values are the same, the order of appearance is displayed.

So in this case, the cat will take a step to the left.

Question 2: How can I determine if a cat is surrounded?

When I was playing this game online, I found that when a cat is surrounded, It would be changed to a "surrounded" Action. How should I judge whether the cat is surrounded, and then change its animation?

Unlike "being caught", "being surrounded" is earlier than "being caught. When a cat has no way to go, it is "caught" and the game wins. The "surrounded" means that a cat has a road to go, but it is already surrounded, and it is struggling, for example.

My idea is as follows:

Find the passable neighbors in six directions from the current position of the cat, and then start from these neighbors and look for their respective passable neighbors. Keep searching like this while looking for them, while judging whether the current neighbor is on the edge of the game area, if yes, the search process ends before the result is: the cat is not surrounded. If all the accessible neighbors are found and there is no edge in the game area, the result is: the cat is surrounded.
Next we will use the code to implement this judgment process.

First, you need to prepare a method to determine whether the circle is already at the edge of the circle. Assuming that the method name and parameters are as follows, the internal implementation is relatively simple and will not be pasted here.

/* Determine whether the passed circle is on the boundary */private isCircleAtEdge (circle: Circle): boolean {...}

Prepare another method to obtain the neighbors in a certain direction around a circle.

private getCircleNeighbor(circle:Circle,direction:Direction):Circle{  ...}

Finally, it is the core method of judgment.

/* Can you find the route to the edge at the circle position */private canExitAt (circle: Circle): boolean {var ignoreArr = []; // The circle set var toDealWithArr = [circle] that no longer needs to be processed; // The while (true) {if (toDealWithArr. length <1) {return false;} else {var _ first = toDealWithArr. shift (); ignoreArr. push (_ first); if (_ first. getStatus ()! = CircleStatus. blocked & this. isCircleAtEdge (_ first) {return true;} else {for (var I = Direction. LEFT; I <= Direction. BOTTOM_LEFT; I ++) {var nbr = this. getCircleNeighbor (_ first, I); if (! (IgnoreArr. indexOf (nbr)>-1 | toDealWithArr. indexOf (nbr)>-1) if (nbr. getStatus ()! = CircleStatus. Available) {ignoreArr. push (nbr);} else {toDealWithArr. push (nbr );}}}}}}

At the beginning of the method body, prepare two arrays, one for storing the ignoreArr set of circles that no longer need to be processed, and the other for storing the toDealWithArr set of circles that need to be judged. Every time you find a passable neighbor, you must first determine whether it appears for the first time (because several circles may have common neighbors, so a circle may be found multiple times because it is the neighbor of multiple circles.) The criterion for judging is whether it appears in ignoreArr or toDealWithArr. If not, it is the first appearance, if it is a roadblock, it will be pushed to ignoreArr. If it is not a roadblock, it will be pushed to the end of toDealWithArr for judgment.

At the beginning of each loop, a circle object pops up from the toDealWithArr header to determine whether it is on the edge. If yes, true is returned to jump out of the loop, and the cat is not surrounded, it can reach the edge through a route. If toDealWithArr is not on the edge after all judgments, false is returned. The cat is surrounded, and none of its direct neighbors and many indirect neighbors are on the edge.