Pure HTML5 production surround nerve cat game-source Download _javascript Tips

HTML5 surround the nerve Cat game Web version is a HTML5, jquery, typescript and other techniques made by the surround nerve cat game.

First of all, please attach demo and source download, click here to view demo download source code

Last year, the popularity of micro-trust Friends Circle Games "surround the nerve cat", I also tried to do a bit. The game is developed with the Egret engine, because the Egret is built with typescript language, so the game is also developed with Typescript.

Rules of the game:

Click on the screen gray lattice, slowly around the nerve cat caught. The game fails if the cat reaches the edge of the game area.

Prepare material

On the internet search "surround the nerve cat" game, open one, and open the debugging interface, from the network or resource in the cat, Gray Circle, Orange circle and other pictures to the local.

It should be noted that Egret new MOVIECILP architecture design and MOVIECLIP data format standards are somewhat different from the early, I was stripped down from the internet has not been applicable, according to the new data format standard to do after the modified MC JSON file as follows:

{"MC": {"Stay": {"framerate": "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}, {"Re S ":" 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}, {" R Es ":" 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 ":" stay0001 ": {" x ":" Y ": 0," W ":" Stay, "H": " 0002 ": {" X ": 122," Y ": 0," W ": M," H ":" stay0003 ": {" X ": 183," Y ": 0," W ": 0," H ":" M "," stay0004 ": {" x ":," y ":", "W": 61, " H ":", "stay0005": {"x": Y ": X," W ": 183," H ":" "," stay0006 ": {" × ": 122," Y ":" "," W ":", "" H ":" X "," stay0007 ":" {":" {"] "Y": "A", "W": "The", "H": "The", "stay0008 ": {" X ": 0," y ": 186," W ": The" H ":" X "," stay0009 ": {" × ": *," Y ": 186," W ":"-"," H ":" "," stay0010 ": {" X ": 122," Y ": 186," W ":", "H": "stay0011": {"X": 183, "Y": 186, "w": *, "H": "X", "stay0012": {"×": 0, "y": 279, "W":, "H": "," "stay0013": { "X": "Y": 279, "w": *, "H": "stay0014": {"X": 122, "Y": 279, "W": M, "H": "X", "stay0015": {"×": 183, "Y": 279, "W": "H." ': 93}}}

Writing code

The main summary I encountered in the development process of the two major problems.

Question one, how should a cat escape?

In this game, each circle can have three different states.

Passable, gray Circle representation

There are roadblocks, not feasible, the orange circle indicates

was occupied by the cat, the gray circle, the cat's animated stack placed on its

Whenever you click on a gray circle, it turns it into an orange circle, a roadblock, and the cat will follow the action of the Click and take a step toward the perimeter.

Walking direction

The game area is made up of 9*9 circles, and even rows are indented to the width of the circle radius size, such a layout causes, the cat theoretically can have 6 walking directions (only one step at a time), is left, upper left, upper right, right, lower right, lower left, such as the circle of these positions as a roadblock, the corresponding direction is not passable.

If these six neighbors have five roadblocks, then of course it is good to choose the line, the remaining one is the only way out, but obviously the situation is not so simple. More often than not, we are confronted by six of neighbors with a direct roadblock (which naturally does not take this step) and have a passable state, but the accessibility to the edge is different.

For example, in the picture above, at present, the cat's left direction to walk three steps to reach the edge, right up and down to walk four steps up to the left, right direction can take a step but that is the roadblock, left the next direction three steps to meet roadblocks. At this point, of course, we should order the priority of these six directions.

Priority level

This is how I set the order of precedence:

In the direction of the road > will appear in the direction of roadblocks, such as the left, right, bottom right > left, right, lower left

In the direction of the way, the higher the priority from the edge, so the left > right and lower right

In the direction of roadblocks, the more steps you can take, the higher the priority, the lower left > right and upper Left

The following are the agreed accessibility values for comparison, set this value to accessibility, and the higher the value the greater the priority.

The way through

accessibility = 1/steptoedge; Steptoedge says it's a few steps from the edge.

There's going to be a roadblock.

accessibility = ( -1)/steptoblock;//steptoblock indicates the distance from the roadblock

Next consider the denominator if 0 how to do, in the first case, the denominator is 0, indicating that the cat is now on the edge, then do not have to judge the priority, the game has failed. In the second case, the denominator of 0 means that the way out is a roadblock, this direction does not take into account is absolutely not go, then its priority is set to 1.

In such a round, the accessibility values in the six directions are:

Left: 1/3

Top left:-1

Top right: 1/4

Right:-1

Bottom right: 1/4

Lower left: -1/3

This compares the priority should be left > right top > Right down > Left down > Left upper > Right.

Why the upper left and right, right upper and lower right, these two groups of internal values clearly the same, we are still out of order? Just because our calculations are rotated clockwise from the left direction. If the values are the same, see the order in which they appear.

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

Question two, how can you tell if a cat is surrounded?

When playing the game online, I found that when the cat was surrounded by a "surround" action, how to judge the cat is surrounded, and then change its motion animation?

"Surrounded" is not the same as "caught", it is earlier than "caught" state. When the cat has no way to go, it is "caught", the game wins. and "surrounded" means that the cat has a temporary way to go, but has been surrounded by the death throes, the following figure.

My idea is this:

Find a six-way neighbor from the cat's current position, and then from these neighbors, and then find their own passable neighbors, have been looking for, while looking for the process, one side to determine whether the current found in the neighborhood of the game area, if there is, then the search process ended prematurely, The verdict: The cat was not surrounded. If all the passable neighbors were found, and none of them were on the edge of the game area, the verdict was: the cat was surrounded.
Then use the code to implement this process of judgment.

First, you need to prepare a method to determine whether the circle is already on the edge of the circle, assuming that the method name and parameters are as follows, the internal implementation is relatively simple here is not posted.

/* To determine whether the incoming circle is on the boundary
/Private Iscircleatedge (Circle:circle): boolean {
 ...
}

Then prepare a method to get a neighbor in a direction around a circle.

Private Getcircleneighbor (circle:circle,direction:direction): circle{
  ...
}

Finally, it is the core method of judgment.

 * * can find the route to reach the edge at the circle position * * Private Canexitat (circle:circle): boolean{var ignorearr=[];/ /No more processing of the circle set Var todealwitharr=[circle];//also need to be judged circle set while (true) {if (todealwitharr.length<1) {return FAL
  Se
   }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, two arrays are prepared, one to store the Ignorearr of the circle without reprocessing, and the other to store a circle set of todealwitharr that need to be judged. Every time a passable neighbor is found, it is first to be judged whether it first appears (since several circles may have a common neighbor, so a circle may be found multiple times because it is a neighbor of several circles), and the criterion is whether it appears in Ignorearr or Todealwitharr, If it is not the first time to appear, if it is a roadblock, then Ignorearr, if not a roadblock, then pushed into the Todealwitharr tail to wait for judgment.

Each time the loop starts, we pop a circle object from the Todealwitharr head, determine whether it's on the edge, and if so, return true to jump out of the loop, the cat is not surrounded, it can reach the edge through a certain route. If Todealwitharr is not at the edge of all judgment, then returns False, the cat is surrounded, and none of its immediate neighbors and many of its indirect neighbors are on the edge.