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
Detaillierte Erklärung des CSS-Pseudoelements::marker
Dieser Artikel stellt ein interessantes Pseudoele...
Umfassende Zusammenfassung der MySQL-Tabellen
Inhaltsverzeichnis 1. Erstellen Sie eine Tabelle ...
So fügen Sie ein Lua-Modul zu Nginx hinzu
Lua installieren wget http://luajit.org/download/...
MySQL-Serververbindung, Trennung und cmd-Bedienung
Verwenden Sie den Befehl mysql, um eine Verbindun...
Detailliertes Beispiel für die Verwendung von useState in React
Verwendungsstatus useState fügt einer Komponente ...
Erweiterte MySQL-Datenbankabfrage und Mehrtabellenabfrage
MySQL-Abfrage für mehrere Tabellen Hinzufügen ein...
Erste Schritte Tutorial für Anfänger⑧: Einfaches Erstellen einer Artikel-Site
In meinem letzten Beitrag habe ich darüber gesproc...
jQuery zum Erzielen eines gleitenden Treppeneffekts
In diesem Artikel wird der spezifische Code von j...
Detailliertes Tutorial zum Veröffentlichen von Springboot-Projekten über das Docker-Plugin in IDEA
1. Schreiben Sie das Dockerfile (1) Klicken Sie m...
Verwenden Sie CSS, um spezielle Logos oder Grafiken zu implementieren
1. Einleitung Da Bilder viel Platz beanspruchen u...
So konfigurieren Sie mysql5.6 zur Unterstützung von IPV6-Verbindungen in einer Linux-Umgebung
Einführung: Dieser Artikel stellt hauptsächlich v...
Einführung in die CSS-Stilklassifizierung (Grundkenntnisse)
Klassifizierung von CSS-Stilen 1. Interner Stil -...
Über das Vue Virtual Dom-Problem
Inhaltsverzeichnis 1. Was ist virtueller Dom? 2. ...
Erläuterung synthetischer React-Ereignisse
Inhaltsverzeichnis Klicken Sie zunächst auf das E...
Eine detaillierte Einführung in for/of, for/in in JavaScript
Inhaltsverzeichnis In JavaScript gibt es mehrere ...