js zur Realisierung eines einfachen Puzzlespiels

js zur Realisierung eines einfachen Puzzlespiels

In diesem Artikel wird der spezifische Code von js zur Implementierung eines einfachen Puzzlespiels zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt

Das Spiel ist ganz einfach: Sie müssen lediglich das Puzzle zusammensetzen und ein Teil mit der Maus ziehen, um es gegen ein anderes auszutauschen. Die Sprache ist HTML+js. Wenn Sie die Kommentare nicht verstehen, können Sie eine Nachricht hinterlassen und nachfragen.

Screenshot

Codebereich

<!DOCTYPE html>
<html>
 <Kopf>
  <meta charset="utf-8">
  <Titel></Titel>
 </Kopf>
 <style type="text/css">
  div{
   Breite: 200px;
   Höhe: 200px;
   
  }
  .tu{
   Hintergrundbild:URL(anni.jpg);
   }
  //Verwenden Sie die Hintergrundposition, um jedem Div unterschiedliche Bilder hinzuzufügen. Das heißt, 9 Divs bilden ein vollständiges Bild.
  #z-1{
   Hintergrundposition: 0px 0px;
  }
  #z-2{
   Hintergrundposition: -200px 0px;
  }
  #z-3{
   Hintergrundposition: -400px 0px;
  }
  #z-4{
   Hintergrundposition: 0 -200px;
  }
  #z-5{
   Hintergrundposition: -200px -200px;
  }
  #z-6{
   Hintergrundposition: -400px -200px;
  }
  #z-7{
   Hintergrundposition: 0px -400px;
  }
  #z-8{
   Hintergrundposition: -200px -400px;
  }
  #z-9{
   Hintergrundposition: -400px -400px;
  }
 </Stil>
 <Skript>
 //Schließen Sie den Austausch der beiden Bilder nach dem Ziehen ab.
  Funktion über(e){
   e.preventDefault(); //Standard verhindern}
  //Greifen Sie mit der Funktion drag(e){
   var id=e.ziel.id;
   // konsole.log(e.ziel.id);
   e.dataTransfer.setData("id",id);//Festlegen der erfassten ID zur Übertragung;
  }
  //Nach der Funktion drop(e){
   var beizhuaId=e.dataTransfer.getData("id");//Erfasste ID akzeptieren;
   // console.log(beizhuaId); // ID der verhafteten Person
   var fangID=e.target.id;//die ID des Standorts;
   var beizhua=document.getElementById(beizhuaId);//Erfasstes Objekt abrufen;
   var fang=document.getElementById(fangID);//Das freizugebende Objekt abrufen;
   var f_beizhua=beizhua.parentNode;//Finde die entsprechenden übergeordneten Knoten var f_fang=fang.parentNode;
   //Austausch sonsf_beizhua.appendChild(fang);
   f_fang.appendChild(beizhua);
   gewinnen();
   }
   // So wird die Gewinnmethode beurteilt: Jeder Eltern- und Kind-ID-Name hat die gleiche Seriennummer, Schleife, Anzahl akkumulieren;
   Funktion gewinnen(){
    var tus = document.getElementsByClassName('tu');
    Variablenanzahl=0;
    für(var i=0;i<tus.length;i++){
     var tu=tus[i];
     var fu=tu.parentNode;
     var tu_id=tu.getAttribute("id");
     var fu_id=fu.getAttribute("id");
     wenn(tu_id.replace("z-","")==fu_id.replace("f-","")){
      zählen++;
      konsole.log(Anzahl);
     }anders{
      zurückkehren;
     }
    }
    
    wenn(Anzahl==9){
     alert("Du gewinnst!");
    }
    
   }
   //Scramble-Schaltfläche; Zufallszahlen generieren; die appenChild-Methode verwenden, um mehrfach zu vertauschen, was ein Scramble ist;
   Funktion daluan(){
    für(var i=0;i<100;i++){
    var tus = document.getElementsByClassName('tu');
    var m = parseInt (Math.random() * 9);
    var n=parseInt(Math.random()*9);
    var tusmp=tus[m].parentNode;
    var tusnp=tus[n].parentNode;
    tusmp.appendChild(tus[n]);
    tusnp.appendChild(tus[m]);
    }
   }
 </Skript>
 <Text>
  <Tabellengrenze="1">
   <tr>
    <td>
     <div id="f-1" ondragover="über(Ereignis)" ondrop="drop(Ereignis)">
      <div id="z-1" class="tu" draggable="true" ondragstart="ziehen(Ereignis)"></div>
     </div>
    </td>
    <td>
     <div id="f-2" ondragover="über(Ereignis)" ondrop="drop(Ereignis)">
      <div id="z-2" class="tu" draggable="true" ondragstart="ziehen(Ereignis)"></div>
     </div>
    </td>
    <td>
     <div id="f-3" ondragover="über(Ereignis)" ondrop="drop(Ereignis)">
      <div id="z-3" class="tu" draggable="true" ondragstart="ziehen(Ereignis)"></div>
     </div>
    </td>
   </tr>
   <tr>
    <td>
     <div id="f-4" ondragover="über(Ereignis)" ondrop="drop(Ereignis)">
      <div id="z-4" class="tu" draggable="true" ondragstart="ziehen(Ereignis)"></div>
     </div>
    </td>
    <td>
     <div id="f-5" ondragover="über(Ereignis)" ondrop="drop(Ereignis)">
      <div id="z-5" class="tu" draggable="true" ondragstart="ziehen(Ereignis)"></div>
     </div>
    </td>
    <td>
     <div id="f-6" ondragover="über(Ereignis)" ondrop="drop(Ereignis)">
      <div id="z-6" class="tu" draggable="true" ondragstart="ziehen(Ereignis)"></div>
     </div>
    </td>
   </tr>
   <tr>
    <td>
     <div id="f-7" ondragover="über(Ereignis)" ondrop="drop(Ereignis)">
      <div id="z-7" class="tu" draggable="true" ondragstart="ziehen(Ereignis)"></div>
     </div>
    </td>
    <td>
     <div id="f-8" ondragover="über(Ereignis)" ondrop="drop(Ereignis)">
      <div id="z-8" class="tu" draggable="true" ondragstart="ziehen(Ereignis)"></div>
     </div>
    </td>
    <td>
     <div id="f-9" ondragover="über(Ereignis)" ondrop="drop(Ereignis)">
      <div id="z-9" class="tu" draggable="true" ondragstart="ziehen(Ereignis)"></div>
     </div>
    </td>
   </tr>

  </Tabelle>
  <input type="button" value="Zufällige Anzeige" onclick="daluan()" />
 </body>
</html>

Abschluss

Es gibt sehr wenig Inhalt und die Logik ist nicht besonders überzeugend, aber die Ideen müssen klar sein.

Das Obige ist der vollständige Inhalt dieses Artikels. Ich hoffe, er wird für jedermanns Studium hilfreich sein. Ich hoffe auch, dass jeder 123WORDPRESS.COM unterstützen wird.

Das könnte Sie auch interessieren:
  • js + canvas realisiert die Funktion des Schiebepuzzle-Verifizierungscodes
  • JS realisiert drei Effekte des PC-Mobilterminals und des eingebetteten Schiebepuzzle-Verifizierungscodes
  • js realisiert das Neun-Quadrat-Puzzlespiel
  • JS implementiert schnell mobile Puzzlespiele
  • JS-Puzzlespiel, objektorientiert, vollständig kommentiert.
  • js+html5 realisiert ein Puzzlespiel, das auf Mobiltelefonen gespielt werden kann
  • Digitaler Puzzlespielcode in JS geschrieben [Lernreferenz]
  • JS implementiert ein vollständiges Beispiel einer Schiebepuzzle-Verifizierungsfunktion
  • Beispielcode zur Simulation der Funktionsweise des Schiebepuzzle-Verifizierungscodes mit Node.js
  • Bilderrätsel-Gedächtnistestspiel, Web- und JS-Version

<<:  So fahren Sie nginx herunter/starten es neu

>>:  Detaillierte Erklärung der allgemeinen Verwendung von MySQL-Abfragebedingungen

Artikel empfehlen

Grafisches Tutorial zur Installation und Konfiguration von MySQL 8.0.22

Dieser Artikel dokumentiert die Installation und ...

Implementierung der Formularübermittlung in HTML

Formularübermittlungscode 1. Quellcode-Analyse &l...

Detaillierte Erklärung zum Abrufen der IP-Adresse eines Docker-Containers

1. Nach dem Betreten des Containers Katze /etc/ho...

Implementierungsbeispiel zum Schließen der Browserabmeldung in Vue

Inhaltsverzeichnis 1. beforeunload-Ereignis 2. Er...

Echarts-Tutorial zur Implementierung von Baumdiagrammen

Treemaps dienen vor allem der Visualisierung baum...

HTML5+CSS3-Codierungsstandards

Die goldene Regel Unabhängig davon, wie viele Per...

So rufen Sie einen Hyperlink auf und öffnen ihn

<br />Die unzähligen Informationen im Intern...

CSS-Ansichtsfenstereinheiten für schnelles Layout

CSS-Viewport-Einheiten gibt es schon seit einigen...

Layim in Javascript, um Freunde und Gruppen zu finden

Derzeit haben die Verantwortlichen von Layui die ...

Empfohlene Tipps für Web-Frontend-Ingenieure

Lassen Sie uns zunächst über den Wert von Web-Fro...

Detaillierte Erläuterung des Bereitstellungsprozesses eines SpringBoot-Projekts über das Docker-Plugin in IDEA

1. Konfigurieren Sie den Docker-Remoteverbindungs...

Ausrichtungsproblem zwischen Eingabetextfeld und Bildbestätigungscode (Bild ist immer einen Kopf höher als die Eingabe)

Bei der Erstellung von Webseiten werden Eingabe un...

So erstellen Sie einen MySQL-Cluster mit hoher Verfügbarkeit und Leistung

Inhaltsverzeichnis Was ist MySQL NDB Cluster? Vor...

Eine kurze Diskussion über die Typen von node.js-Middleware

Inhaltsverzeichnis Überblick 1. Middleware auf An...

Fehlerbehebung und Lösungen für das Problem der MySQL-Autoinkrement-ID-Übergröße

Einführung Xiao A war gerade dabei, Code zu schre...