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
Nginx verwendet den Gzip-Algorithmus zum Komprimieren von Nachrichten
Was ist HTTP-Komprimierung Manchmal werden relati...
So fügen Sie Wettervorhersagen in Ihre Website ein
Wir hoffen, dass wir durch die Einbindung der Wet...
Warum sind die Bilder in mobilen Web-Apps nicht klar und sehr verschwommen?
Warum? Am einfachsten lässt es sich so ausdrücken:...
Probleme und Lösungen beim Verbinden des Knotens mit der MySQL-Datenbank
Ich habe heute eine neue Version von MySQL (8.0.2...
JavaScript-Funktion Currying
Inhaltsverzeichnis 1 Was ist Funktions-Currying? ...
Detaillierte Erläuterung der persistenten MySQL-Statistiken
1. Die Bedeutung persistenter statistischer Infor...
Vergleich von CSS-Schatteneffekten: Schlagschatten und Box-Schatten
Drop-Shadow und Box-Shadow sind beide CSS-Eigensc...
Tutorial zum Einrichten geplanter Aufgaben zum Sichern der Oracle-Datenbank unter Linux
1. Überprüfen Sie den Zeichensatz der Datenbank D...
Lösung für das Problem, dass die virtuelle Virtualbox-Maschine im NAT-Modus keine Verbindung zum externen Netzwerk herstellen kann
Hintergrund Für die virtuelle VirtualBox-Maschine...
Zusammenfassung der Verwendung von JavaScript JSON.stringify()
Inhaltsverzeichnis 1. Nutzung 1. Grundlegende Ver...
CSS erzielt farbenfrohe und intelligente Schatteneffekte
Hintergrund Haben Sie sich jemals gefragt, wie Si...
CSS3-Animation: Das Bild wird allmählich größer, wenn sich die Maus darauf befindet, und allmählich kleiner, wenn die Maus es verlässt
Wirkungsprüfungsadresse: Tourplan (uplanok.com) C...
Verwenden Sie CSS3-Hintergrundsteuerungseigenschaften + Farbübergang, um einen Farbverlaufseffekt zu erzielen
CSS3-Hintergrundbild bezogen Kompatibilität: IE9+...
Grafisches Tutorial zum Herunterladen, Installieren und Konfigurieren von MySQL 8.0.22
Laden Sie MySQL 8.0.22 zu Ihrer Information herun...
So legen Sie MySQL-Fremdschlüssel für Anfänger fest
Inhaltsverzeichnis Die Rolle von Fremdschlüsseln ...