JavaScript implementiert das mobile Puzzlespiel mit neun Rastern
|
In diesem Artikel wird der spezifische Code für JavaScript zur Implementierung des mobilen Puzzlespiels Jiugongge zu Ihrer Information bereitgestellt. Der spezifische Inhalt ist wie folgt Effektbild:
Code und detaillierte Logik:
<!doctype html>
<html>
<Kopf>
<meta charset="UTF-8">
<title>Neun-Gitter-Puzzle</title>
<Stil>
*{
Polsterung: 0;
Rand: 0;
Rand: 0;
}
/* * ist ein Platzhalter, der die Standardstile aus allen Elementen entfernt, da einige Browser standardmäßig einige Stile hinzufügen, was zu Problemen beim Layout führen kann*/
Körper{
Breite: 100 %;
Höhe: 100%;
}
/* Setze die Höhe und Breite des Textkörpers auf 100 %, damit er sich automatisch an die Bildschirmgröße des Browsers anpasst*/
#Container{
Position: relativ;
Breite: 620px;
Höhe: 450px;
Rand: 0 automatisch;
Rand oben: 100px;
Rahmenradius: 1px;
}
/* Dies ist das DIV, das alle Elemente umschließt. Stellen Sie es auf 620 Pixel Breite und 450 Pixel Höhe ein. Diese Größe kann größer, aber nicht kleiner eingestellt werden. Es sollte zumindest alle Elemente darin enthalten können.*/
#Spiel{
Position: absolut;
Breite: 450px;
Höhe: 450px;
Rahmenradius: 5px;
Anzeige: Inline-Block;
Hintergrundfarbe: #ffe171;
Kastenschatten: 0 0 10px #ffe171;
}
/* Dies ist das DIV des Spielbereichs. Die Größe wird berechnet und hängt von der Größe Ihres kleinen Quadrats ab. Hier setzen wir die Größe des kleinen Quadrats auf 150px 150px, also beträgt die Größe 150px*3, also 450px */
#Spiel div{
Position: absolut;
Breite: 149px;
Höhe: 149px;
Kastenschatten: 1px 1px 2px #777;
Hintergrundfarbe: #20a6fa;
Farbe: weiß;
Textausrichtung: zentriert;
Schriftgröße: 150px;
Zeilenhöhe: 150px;
Cursor: Zeiger;
-webkit-transition: 0,3 s;/*Browserpräfix, kompatibel mit anderen Chrome-Browsern*/
-moz-Übergang: 0,3 s;/*Firefox*/
-ms-Übergang: 0,3 s;/*dh*/
-o-Übergang: 0,3 s;/*Oper*/
Übergang: 0,3 s;
}
/* Dies ist die Größe des kleinen Quadrats. Es ist absolut positioniert, sodass eine Änderung seiner Position keine Auswirkungen auf die Positionen anderer Elemente hat. Die Breite und Höhe betragen beide 149px. Beachten Sie, dass wir auch Box-Shadow festlegen: 1px 1px 2px #777;
Es hat auch einen Randschatten, also 149px plus Rand 1px, seine Gesamtbreite beträgt 150px. Der Übergang unten: 0,3 s legt die Übergangszeit fest, das ist eine CSS3-Eigenschaft, die die Eigenschaft ändert, um eine Übergangsanimation darzustellen, also wenn wir die Position des Quadrats ändern, wird es eine Animation haben, wir müssen die Animationsfunktion nicht selbst schreiben, das wird Sie verrückt machen */
#Spiel div:hover{
Farbe: #ffe171;
}
/*Legen Sie die Mouseover-Animation für das Quadrat fest. Wenn die Maus über das Element fährt, ersetzen die Attribute hier die obigen Attribute. Wenn die Maus wegbewegt wird, kehrt sie in den ursprünglichen Zustand zurück. Hier ändern wir die Schriftfarbe*/
#Kontrolle{
Breite: 150px;
Höhe: 450px;
Anzeige: Inline-Block;
schweben: rechts;
}
/*Kontrollbereich, display:inline-block verleiht dem Element die Eigenschaften eines Blockelements, sodass seine Größe geändert werden kann und es außerdem die Eigenschaften eines Inline-Elements besitzt, sodass es keinen Zeilenabstand einnimmt, float:right lässt das Element nach rechts schweben*/
#Zeilenspanne steuern{
Höhe: 25px;
Schriftgröße: 20px;
Farbe: #222;
Rand oben: 10px;
}
/*Den allgemeinen Stil der Schaltflächen im Kontrollbereich festlegen*/
#Start{
Anzeige: Inline-Block;
Schriftgröße: 28px;
Breite: 100px;
Höhe: 28px;
Hintergrundfarbe: #20a6fa;
Farbe: #ffe171;
Textschatten: 1px 1px 2px #ffe171;
Rahmenradius: 5px;
Kastenschatten: 2px 2px 5px #4c98f5;
Textausrichtung: zentriert;
Cursor: Zeiger;
}
/*Eigenschaften für die Start-Schaltfläche festlegen. Cursor: Das Zeigerattribut sorgt dafür, dass die Maus verschiedene Mausformen anzeigt, wenn sie über ein Element bewegt wird. Der Zeiger hat die Form einer Hand*/
#zurücksetzen{
Anzeige: Inline-Block;
Schriftgröße: 28px;
Breite: 100px;
Höhe: 28px;
Hintergrundfarbe: #20a6fa;
Farbe: #ffe171;
Textschatten: 1px 1px 2px #ffe171;/*Schriftschatten*/
border-radius: 5px;/*abgerundetes Eckenattribut*/
Box-Schatten: 2px 2px 5px #4c98f5;/*Box-Schatten*/
text-align: center;/*Text zentriert*/
Cursor: Zeiger;
}
/*Eigenschaften für die Schaltfläche „Zurücksetzen“ festlegen*/
#d1{
links: 0px;
}
#d2{
links: 150px;
}
#d3{
links: 300px;
}
#d4{
oben: 150px;
}
#d5{
oben: 150px;
links: 150px;
}
#d6{
oben: 150px;
links: 300px;
}
#d7{
oben: 300px;
}
#d8{
links: 150px;
oben: 300px;
}
/*Dadurch werden die Positionen der einzelnen kleinen Quadrate im Voraus in der richtigen Reihenfolge angeordnet*/
</Stil>
</Kopf>
<Text>
<div id="Behälter">
<!--Das äußerste DIV wird verwendet, um die Struktur darin einzuschließen-->
<div id="Spiel">
<!--Spielbereich, großer DIV-Block-->
<div id="d1" onclick="verschieben(1)">1</div>
<!--Kleines DIV, also 8 kleine Quadrate. Beim Klicken wird die Funktion move() ausgeführt und der Parameter ist die angezeigte Nummer, sodass wir wissen, auf welches Quadrat geklickt wurde -->
<div id="d2" onclick="verschieben(2)">2</div>
<div id="d3" onclick="bewegen(3)">3</div>
<div id="d4" onclick="bewegen(4)">4</div>
<div id="d5" onclick="bewegen(5)">5</div>
<div id="d6" onclick="bewegen(6)">6</div>
<div id="d7" onclick="bewegen(7)">7</div>
<div id="d8" onclick="bewegen(8)">8</div>
</div>
<div id="Steuerung">
<!--Spielkontrollbereich-->
<p>
<rowspan id="timeText">Gesamtzeit</rowspan>
<rowspan id="timer"></rowspan>
</p>
<!--Spielzeitbereich anzeigen-->
<p>
<rowspan id="start" onclick="start()">Starten</rowspan>
<rowspan id="reset" onclick="reset()">Neustart</rowspan>
</p>
<!--Bereich der Steuerschaltfläche anzeigen-->
</div>
</div>
<Skript>
var time=0; //Zeit speichern var pause=true; //Pausen-Flag setzen, true bedeutet Pause var set_timer; //Zeitfunktion setzen var d=new Array(10); //Nummer des aktuell im großen DIV installierten kleinen DIV speichern var d_direct=new Array(
[0], //Um die Logik einfacher zu machen, verwenden wir das erste Element nicht. Wir beginnen bei Index 1 [2,4], //Die Position, an die das DIV mit der großen DIV-Nummer 1 gehen kann, beispielsweise kann der erste Block an Position 2,4 [1,3,5] gehen,
[2,6],
[1,5,7],
[2,4,6,8],
[3,5,9],
[4,8],
[5,7,9],
[6,8]
); //Speichere die verschiebbare Positionsnummer der großen DIV-Nummer var d_posXY=new Array(
[0], // Ebenso verwenden wir das erste Element nicht [0,0], // Das erste steht für links, das zweite für oben, beispielsweise lautet die Position des ersten Blocks let: 0px, top: 0px
[150,0],
[300,0],
[0,150],
[150,150],
[300,150],
[0,300],
[150,300],
[300,300]
); //Die Position der großen DIV-Nummer d[1]=1;d[2]=2;d[3]=3;d[4]=4;d[5]=5;d[6]=6;d[7]=7;d[8]=8;d[9]=0; //Die Standardreihenfolge ist sortiert. Im neunten Block gibt es kein großes DIV, also ist es 0. Wir verwenden 0, um den leeren Block darzustellen. Funktion move(id){
//Verschiebefunktion, wir haben bereits darüber gesprochen, var i=1;
für(i=1; i<10; ++i){
wenn (d[i] == id)
brechen;
}
//Diese For-Schleife dient dazu, die Position des kleinen DIV im großen DIV zu finden. var target_d=0;
//Speichern Sie die Nummer, an die das kleine DIV passt. 0 bedeutet, dass es nicht verschoben werden kann. target_d=whereCanTo(i);
//Wird verwendet, um herauszufinden, wohin das kleine DIV gehen kann. Wenn es 0 zurückgibt, bedeutet dies, dass es nicht verschoben werden kann. Wenn es verschoben werden kann, gibt es die Positionsnummer zurück, zu der es gehen kann, wenn (target_d != 0) {
d[i]=0;
//Setze die aktuelle große DIV-Nummer auf 0, da das aktuelle kleine DIV verschoben wurde und das aktuelle große DIV daher kein kleines DIV hat d[target_d]=id;
//Setze das große Ziel-DIV auf die Nummer des angeklickten kleinen DIVs document.getElementById("d"+id).style.left=d_posXY[target_d][0]+"px";
document.getElementById("d"+id).style.top=d_posXY[target_d][1]+"px";
//Legen Sie abschließend die Position des angeklickten kleinen DIV fest und verschieben Sie es an die Position des großen Ziel-DIV}
//Wenn target_d ungleich 0 ist, bedeutet dies, dass es verschoben werden kann, und target_d ist die Positionsnummer des großen DIV, zu dem das kleine DIV geht, var finish_flag=true;
//Setze das Flag für den Spielabschluss, „true“ bedeutet Abschluss für (var k=1; k<9; ++k){
wenn( d[k] != k){
Zielflagge=falsch;
brechen;
//Wenn die im großen DIV gespeicherte Nummer von seiner eigenen Nummer abweicht, bedeutet dies, dass nicht alle in der richtigen Reihenfolge angeordnet sind. Setzen Sie es daher auf „false“, springen Sie aus der Schleife und müssen Sie später nicht erneut beurteilen, da das Spiel nicht beendet ist, solange eine nicht übereinstimmt}
}
// Beginnen Sie bei 1 und durchlaufen Sie die in jedem großen DIV gespeicherte Nummer, um festzustellen, ob es abgeschlossen ist, wenn (finish_flag == true) {
wenn(!pause)
Start();
alert("Herzlichen Glückwunsch");
}
//Wenn wahr, bedeutet dies, dass das Spiel beendet ist. Wenn es derzeit nicht pausiert ist, wird die Pausenmethode aufgerufen und ein Eingabeaufforderungsfenster angezeigt, um das Spiel zu beenden.
//start() ist eine Funktion, die gleichzeitig startet und pausiert. Wenn sie pausiert ist, wird sie nach dem Aufruf gestartet. Wenn sie gestartet ist, wird sie nach dem Aufruf pausiert.}
Funktion whereCanTo(cur_div){
//Funktion zur Bestimmung, ob es verschoben werden kann. Der Parameter ist die Nummer des großen DIV, nicht die Nummer des kleinen DIV, da die Nummer des kleinen DIV nichts damit zu tun hat, wohin es gehen kann. Das kleine DIV kann verschoben werden. var j=0;
var move_flag = false;
für (j = 0; j <d_direct [cur_div].length; ++j) {
//Durchlaufe alle möglichen Positionen, wenn (d[d_direct[cur_div][j]] == 0) {
Verschiebeflagge=wahr;
brechen;
}
//Wenn der Zielwert 0 ist, bedeutet das, dass sich an der Zielposition kein kleines DIV befindet. Dann kann es verschoben werden und die Schleife wird beendet}
wenn(move_flag == true){
gibt d_direct[aktuelles_div][j] zurück;
}anders{
gebe 0 zurück;
}
//Wenn es verschoben werden kann, gibt es die Nummer der Zielposition zurück, andernfalls gibt es 0 zurück, was bedeutet, dass es nicht verschoben werden kann}
// Zeitfunktion, die jede Sekunde ausgeführt wird function timer(){
time+=1;//Eine Sekunde plus eins, die Einheit ist Sekunden var min=parseInt(time/60);//Sekunden in Minuten umrechnen, eine Minute sind 60 Sekunden, der Quotient ist Minuten var sec=time%60;//Der Rest sind Sekunden document.getElementById("timer").innerHTML=min+"分"+sec+"秒";//Dann die Zeit aktualisieren und anzeigen }
//Funktion anhalten starten function start(){
wenn (Pause) {
document.getElementById("start").innerHTML="Pause"; //Setze den Buttontext auf Pause pause=false; //Pause bedeutet auf false setzen
set_timer=setInterval(timer,1000);//Zeitmessung starten//Wenn aktuell pausiert, starte}else{
document.getElementById("start").innerHTML="start";
Pause=wahr;
Intervall löschen(Timer setzen);
}
}
//Funktion zurücksetzen Funktion reset(){
time=0; //Setze die Zeit auf 0
random_d(); //Blöcke nach dem Zufallsprinzip mischen if(pause) //Bei Pause die Zeitmessung starten start();
}
//Die Blöcke nach dem Zufallsprinzip mischen. Unsere Idee ist, mit dem neunten Block zu beginnen, eine zufällige Zahl zu generieren und dann die beiden Blöcke zu vertauschen. function random_d(){
für(var i=9; i>1; --i){
var to=parseInt(Math.random()*(i-1)+1); //Generiere eine Zufallszahl im Bereich von 1 bis i. Sie kann den Bereich nicht überschreiten, da es kein DIV mit dieser ID gibt.
wenn(d[i]!=0){
document.getElementById("d"+d[i]).style.left=d_posXY[bis][0]+"px";
document.getElementById("d"+d[i]).style.top=d_posXY[bis][1]+"px";
}
//Setze die aktuelle DIV-Position auf die zufällig generierte DIV-Position if(d[to]!=0){
document.getElementById("d"+d[to]).style.left=d_posXY[i][0]+"px";
document.getElementById("d"+d[to]).style.top=d_posXY[i][1]+"px";
}
//Setze die Position des zufällig generierten DIV auf die Position des aktuellen DIV var tem = d[to];
d[bis]=d[i];
d[i]=Element;
//Dann vertausche die in den beiden DIVs gespeicherten Zahlen}
}
// Initialisierungsfunktion, rufe die Reset-Funktion auf, wenn die Seite geladen ist, und beginne von vorne window.onload=function(){
zurücksetzen();
}
</Skript>
</body>
</html>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 beheben Sie den Startfehler des Docker-Containers
>>: Implementierung der MySQL-Datensortierung (aufsteigend und absteigend)
Artikel empfehlen
Erstellen Sie einen neuen Benutzer in Linux und erteilen Sie Berechtigungen für das angegebene Verzeichnis
1 Erstellen Sie einen Benutzer und geben Sie den ...
Ein Beispiel für die dynamische Implementierung verschiedener Datenstile in einer Spalte der el-Tabelle des Elements ui
Problembeschreibung Im Rahmen der Ele.me-Benutzer...
Verwendung von MySQL-Triggern
Inhaltsverzeichnis 1. Trigger-Einführung 1. Was i...
Sprechen Sie über implizite Konvertierung in MySQL
Im Laufe der Arbeit werden Sie auf viele Fälle im...
Detaillierte Erläuterung der WordPress-Multisite-Konfiguration in der Nginx-Umgebung
Mit der Multisite-Funktion von WordPress können S...
So implementieren Sie die Eingabeaufforderung für das H5-Eingabefeld + die Eingabeaufforderung für das normale Textfeld
XML/HTML-CodeInhalt in die Zwischenablage kopiere...
Erkunden Sie die Eigenschaften und Ausdrücke verschiedener Räume in HTML (empfohlen)
I. Überblick Beim Schreiben von HTML-Vorlagen wer...
Detaillierte Erklärung der Verwendung des Positionsattributs in HTML (vier Typen)
Die vier Eigenschaftswerte von Position sind: 1.V...
Einige Methoden zur Dateiberechtigungsverwaltung unter Linux, die Sie möglicherweise nicht kennen
Warum brauchen wir ein Berechtigungsmanagement? 1...
Beispiele für die Verwendung von ungeordneten Listen-Tags und geordneten Listen-Tags im HTML-Format
1. Obere und untere Listen-Tags: <dl>..<...
Eine kurze Analyse des Unterschieds zwischen statisch und selbst in PHP-Klassen
Verwenden Sie self:: oder __CLASS__, um eine stat...
Beispiele für die Implementierung und Verwendung von geplanten MySQL-Aufgaben
Dieser Artikel veranschaulicht anhand von Beispie...
10 Minuten, um das Single-Page-Anwendungsrouting des WeChat-Applets gründlich zu verstehen
Merkmale einer Single-Page-Anwendung „Annahme:“ A...
Zusammenfassung der allgemeinen Bedienungskenntnisse der MySQL-Datenbank
Dieser Artikel fasst gängige Betriebstechniken fü...
So stellen Sie mit einem Zertifikat eine Verbindung zu einem Remote-Docker-Server her
Inhaltsverzeichnis 1. Verwenden Sie Skripte, um T...