Reine HTML5-Produktion des Nervous Cat Game – mit Quellcode-Download_Javascript-Kenntnissen

Die Webversion des HTML5 Surround the Nervous Cat-Spiels ist ein Spiel, das auf HTML5, jquery, Typescript und anderen Technologien basiert.

Im Anhang finden Sie die Demo und den Download des Quellcodes. Klicken Sie hier Demo ansehen Laden Sie den Quellcode herunter

Ich habe auch versucht, das Minispiel „Surround Nervous Cat“ zu spielen, das letztes Jahr bei WeChat Moments beliebt war. Das Spiel wurde mit der Egret-Engine entwickelt, und da Egret mit der Typescript-Sprache erstellt wurde, wird das Spiel hier auch mit Typescript entwickelt.

Spielregeln:

Klicken Sie auf das graue Gitter auf dem Bildschirm, um die nervöse Katze langsam zu umgeben und zu fangen. Das Spiel ist verloren, wenn die Katze den Rand des Spielfeldes erreicht.

Materialien vorbereiten

Suchen Sie im Internet nach dem Spiel „Surround the Nervous Cat“, öffnen Sie eines und öffnen Sie die Debugging-Oberfläche. Entfernen Sie die Bilder von Katzen, grauen Kreisen, orangefarbenen Kreisen usw. aus dem Netzwerk oder den Ressourcen und speichern Sie sie lokal.

Es ist zu beachten, dass sich das neue MovieCilp-Architekturdesign und der MovieClip-Datenformatstandard etwas von den früheren unterscheiden. Die JSON-Datei von MC ist nach der Änderung gemäß den neuen Daten nicht mehr anwendbar Der Formatstandard lautet wie folgt:

{"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}
 }}

Code schreiben

Fassen Sie hauptsächlich die beiden Hauptprobleme zusammen, auf die ich während des Entwicklungsprozesses gestoßen bin.

Frage 1: Wie soll eine Katze entkommen?

In diesem Spiel kann jeder Kreis drei Zustände haben

ist passierbar, grauer Kreis zeigt

an

Es gibt eine Straßensperre, die nicht durchführbar ist, angezeigt durch einen orangefarbenen Kreis

Besetzt von einer Katze, grauer Kreis mit überlagerter Katzenanimation

Immer wenn Sie auf den grauen Kreis klicken, verwandelt er sich in einen orangefarbenen Kreis, der den Straßensperrzustand darstellt. Gleichzeitig folgt die Katze dem Klick und macht einen Schritt in die Umgebung.

Laufrichtung

Der Spielbereich besteht aus 9*9 Kreisen, und die geraden Linien sind um die Breite des Kreisradius eingerückt. Diese Anordnung führt dazu, dass die Katze theoretisch 6 Laufrichtungen haben kann (nur einen Schritt). einmal), nämlich links, oben links, oben rechts, rechts, unten rechts, unten links. Wenn es sich bei den Kreisen an diesen Positionen um Straßensperren handelt, sind die entsprechenden Richtungen unpassierbar.

Wenn fünf der sechs Nachbarn in den sechs Richtungen Straßensperren sind, dann ist es natürlich einfach, eine Route zu wählen, und der verbleibende ist der einzige Ausweg, aber so einfach kann die Situation natürlich nicht sein. Die häufigere Situation, auf die wir stoßen, ist, dass sich unter den Nachbarn in den sechs Richtungen einige direkt im Straßensperrzustand befinden (diesen Schritt werden wir natürlich nie unternehmen) und andere im passierbaren Zustand sind, aber die Zugänglichkeit zu den Rändern jedes einzelnen besteht andere ist anders.

Zum Beispiel kann die Katze im Bild oben derzeit den Rand erreichen, indem sie drei Schritte in die linke Richtung macht, vier Schritte in die obere rechte und untere rechte Richtung, sie kann den Rand erreichen, indem sie einen Schritt in die Richtung macht Sie können in die obere linke und rechte Richtung gehen, stoßen jedoch auf eine Straßensperre und können den Rand erreichen, indem Sie drei Schritte in die untere linke Richtung gehen und auf eine Straßensperre stoßen. Zu diesem Zeitpunkt sollten wir natürlich die Prioritäten dieser sechs Richtungen ordnen.

Priorität

So setze ich meine Prioritäten:

Die Verkehrsrichtung> zeigt die Richtung der Straßensperre an, wie im Bild gezeigt: links, oben rechts, unten rechts> links oben, rechts, unten links

In Verkehrsrichtung gilt: Je näher am Rand, desto höher die Priorität, wie im Bild gezeigt: links > rechts, oben rechts, unten rechts

In der Richtung, in der Straßensperren auftauchen, gilt: Je mehr Schritte Sie unternehmen können, desto höher ist die Priorität, wie im Bild unten links > rechts, oben links gezeigt

Die Zugänglichkeit dieser Vereinbarungen wird zum Vergleich als numerischer Wert ausgedrückt. Je größer der Wert, desto höher die Priorität.

Fahrtrichtung

accessibility = 1/stepToEdge; //stepToEdge gibt an, wie viele Schritte vom Rand noch übrig sind

Die Richtung, in der die Straßensperre angezeigt wird

accessibility = (-1)/stepToBlock;//stepToBlock stellt die Entfernung von der Straßensperre dar

Überlegen Sie als nächstes, was zu tun ist, wenn der Nenner 0 ist. Im ersten Fall ist der Nenner 0, was bedeutet, dass die Katze derzeit am Rande ist, sodass keine Beurteilung der Priorität erforderlich ist und das Spiel dies getan hat fehlgeschlagen. Im zweiten Fall bedeutet ein Nenner von 0, dass Sie beim Verlassen auf eine Straßensperre stoßen. Diese Richtung ist ohne Berücksichtigung dieser absolut unerreichbar, daher ist ihre Priorität auf -1 gesetzt.

Nach dieser Berechnung sind die Zugänglichkeitswerte in den sechs Richtungen:

Links: 1/3

Oben links: -1

Oben rechts: 1/4

Rechts: -1

Unten rechts: 1/4

Unten links: -1/3

Bei diesem Vergleich sollte die Priorität links > oben rechts > unten rechts > unten links > oben links > rechts sein.

Warum sind die Werte in den Gruppen oben links und rechts, oben rechts und unten rechts eindeutig gleich, wir ordnen sie aber trotzdem in der richtigen Reihenfolge an? Nur weil unsere Berechnung von links ausgeht und sich im Uhrzeigersinn dreht. Wenn die Werte gleich sind, dann kommt es auf die Reihenfolge an, in der sie erscheinen.

In dieser Situation im Bild oben macht die Katze also einen Schritt nach links.

Frage 2: Wie erkennt man, ob eine Katze umzingelt ist?

Als ich dieses Spiel online gespielt habe, habe ich herausgefunden, dass, wenn eine Katze umzingelt ist, sie zu einer „umzingelten“ Aktion wechselt. Wie kann ich also beurteilen, dass die Katze umzingelt ist, und dann ihre Aktionsanimation ändern?

„Belagert“ ist nicht dasselbe wie „gefangen“, es geht dem Zustand „gefangen“ voraus. Wenn die Katze nirgendwo hingehen kann, wird sie „gefangen“ und das Spiel ist gewonnen. „Umzingelt“ bedeutet, dass die Katze noch einen Weg vor sich hat, aber umzingelt ist und bis zum Tod kämpft, wie im Bild unten gezeigt.

Meine Idee ist diese:

Suchen Sie die passierbaren Nachbarn in den sechs Richtungen von der aktuellen Position der Katze aus und beginnen Sie dann mit der Suche nach ihren jeweiligen passierbaren Nachbarn. Suchen Sie auf diese Weise weiter und beurteilen Sie während der Suche die bisher gefundenen. Befinden sich Nachbarn am Rand des Spielbereichs? Wenn ja, endet der Suchvorgang vorzeitig und das Urteilsergebnis lautet: Die Katze ist nicht umzingelt. Werden alle passierbaren Nachbarn gefunden und befindet sich keiner davon am Rand des Spielfeldes, so lautet das Urteilsergebnis: Die Katze ist umzingelt.
Als nächstes verwenden Sie Code, um diesen Beurteilungsprozess zu implementieren.

首先，需要准备一个方法，判断圆圈是否已经处在圆圈边缘了，假设这个方法名及参数如下，内部实现比较简单这里就不贴了。

/*
判断传入的circle是否在边界上
 */
private isCircleAtEdge(circle:Circle):boolean {
 ...
}

再准备一个方法，获取某圆圈周围某方向的邻居。

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

最后，是判断的核心方法。

/*
能否在circle位置出发找到路线到达边缘
*/
private canExitAt(circle:Circle):boolean{
 var ignoreArr=[];//不用再处理的circle集合
 var toDealWithArr=[circle];//还需进行判断的circle集合
 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);
     }
    }
   }
  }
 }
}

在方法体的最开始，准备好两个数组，一个用来存储不用再处理的圆圈集合ignoreArr，另一个用来存储还需要进行判断的圆圈集合toDealWithArr。每找到一个可通行的邻居，首先要判断它是不是第一次出现（因为几个圆圈可能会有共同的邻居，所以一个圆圈可能因为它是多个圆圈的邻居而被找到多次），判断的标准就是它有没有出现在ignoreArr或toDealWithArr里，如果没有那么就是第一次出现，如果它是路障，那么塞到ignoreArr，如果不是路障，那么推入toDealWithArr尾部等待判断。

每次循环开始时，我们会从toDealWithArr头部弹出一个圆圈对象，对它是否在边缘做判断，如果是，那么返回true跳出循环，猫没有被围住，它可以通过某条路线到达边缘。如果toDealWithArr全部判断完了都不在边缘，那么返回false，猫被围住了，它的直接邻居及众多间接邻居中没有一个是在边缘的。