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>AbschlussEs 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:
|
<<: So fahren Sie nginx herunter/starten es neu
>>: Detaillierte Erklärung der allgemeinen Verwendung von MySQL-Abfragebedingungen
Artikel empfehlen
js realisiert horizontale und vertikale Slider
Als ich kürzlich an einem Übungsprojekt arbeitete...
setup+ref+reactive implementiert Vue3-Reaktionsfähigkeit
Das Setup wird zum Schreiben kombinierter APIs ve...
Erste Schritte mit Front-End-Vue-Unit-Tests
Inhaltsverzeichnis 1. Warum brauchen wir Unit-Tes...
Warum sollte CSS im Head-Tag platziert werden?
Denken Sie darüber nach: Warum sollte css im head...
Eine kurze Einführung in React
Inhaltsverzeichnis 1. CDN-Einführung 1.1 reagiere...
Detaillierte Erläuterung der Ausführung von SQL-Anweisungen (Übersicht über die MySQL-Architektur -> Abfrageausführungsprozess -> SQL-Analysereihenfolge)
Vorwort: Ich wollte schon immer wissen, wie eine ...
Verschiedene Front-End-Druckmethoden des Webs: CSS steuert den Druckstil von Webseiten
CSS steuert den Druckstil von Webseiten : Verwende...
Ein Artikel, der Ihnen hilft, die Grundlagen von VUE zu verstehen
Inhaltsverzeichnis Was ist VUE Kern-Plugins in Vu...
JavaScript-Farbbetrachter
In diesem Artikelbeispiel wird der spezifische Ja...
Eine kurze Erläuterung der Lösung für den Fehler beim Starten der Serverinstallation in MySQL
Wenn Sie MySQL zum ersten Mal auf Ihrem Computer ...
Beispiel zum Deaktivieren der Browser-Cache-Konfiguration im Vue-Projekt
Beim Freigeben eines Projekts müssen Sie häufig d...
Detaillierter Prozess der Bereitstellung von Docker für WSL2 in IDEA
Die lokale Umgebung ist Windows 10 + WSL2 (Ubuntu...
Beschreibung der HTML-Meta-Viewport-Attribute
Was ist ein Ansichtsfenster? Mobile Browser platz...
Detaillierte Schritte zum Konfigurieren des Tomcat-Servers in IDEA 2020
Die Schritte zum Konfigurieren von Tomcat in IDEA...
Verwenden Sie Elasticsearch, um Indexdaten regelmäßig zu löschen
1. Manchmal verwenden wir ES Aufgrund begrenzter ...