Natives JS zur Implementierung des Spiels 2048

2048 Minispiel, zu Ihrer Information, der spezifische Inhalt ist wie folgt

Zunächst einmal kann das Spiel 2048 nicht von 16 Gittern getrennt werden. Wir erstellen die entsprechenden Tags und Stile über HTML und CSS und starten dann die JS-Logik

<div id="box">//16 kleine Divs in einer Box
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
 <div id="Sohn"></div>
</div>

Stellen Sie den entsprechenden Stil ein: (nur als Referenz)

#Kasten{
 Breite: 450px;
 Höhe: 450px;
 Hintergrundfarbe: braun;
 Anzeige: Flex;
 Flex-Wrap: Umwickeln;
 Inhalt ausrichten: gleichmäßiger Abstand;
 Rand: 1px durchgezogen #000;
 Rand: 100px automatisch;
 Rahmenradius: 10px;
 }
 div>div{
 Rand oben: 5px;
 Breite: 100px;
 Höhe: 100px;
 Rahmenradius: 5px;
 Hintergrundfarbe: Biskuit;
 Textausrichtung: zentriert;
 Zeilenhöhe: 100px;
 Schriftgröße: 40px;
 }

Die Wirkung ist wie folgt:

Dann beginnt der eigentliche JS-Teil. Verwenden Sie zunächst den CSS-Selektor, um alle kleinen Raster-Divs abzurufen.

var divs = document.querySelectorAll('[id == Sohn]');

Erstellen Sie dann ein zweidimensionales Array, um die DOM-Objekte dieser 16 kleinen Raster-Divs zu empfangen

var arr = [[],[],[],[]];
var a = 0;
für(var i=0;i < 4; i++){
 für(var j=0; j < 4; j++){
 arr[i][j] = divs[a];
 ein++;
 }
}

Dies bildet die i- und j-Achse:

Dies erleichtert unseren späteren mobilen Einsatz

Nun schreiben wir ein Programm, dass aus den 16 Zellen per Zufallsprinzip eine Zufallszahl 2 und 4 generiert und diese in eine leere Zelle einträgt. Wir rufen es später auf!

function sj(){ //Zufallszahlen generieren var a = Math.floor(Math.random() * 4);
 var b = Math.floor(Math.random() * 4);
 wenn(arr[a][b].innerHTML == ""){
 wenn(Math.random()>0.5){
 arr[a][b].innerHTML = 2;
 }anders{
 arr[a][b].innerHTML = 4;
 }
 
 }else{ //Wenn das Raster nicht leer ist, führen wir die Funktion sj() aus;
 }
}

Die Zweite ist die Funktion, um festzustellen, ob das Spiel vorbei ist: Das Spiel endet, wenn alle Werte des Rasters nicht leer sind! (Später aufgerufen)

function js(){ //Ist das Spiel vorbei? var bool = true;
 für(var i=0;i < 4; i++){
 für(var j=0; j < 4; j++){
 wenn(arr[i][j].innerHTML == ""){
  bool = falsch;
 }anders{
  
 }
 }
 } 
 wenn(bool){
 Alarm("Spiel vorbei");
 für(var i=0;i < 4; i++){
 für(var j=0; j < 4; j++){
 arr[i][j] = null;
 }
 }
 
 }
}

Dann schreiben wir Funktionen, die durch Drücken der Auf-, Ab-, Links- und Rechts-Tasten ausgeführt werden sollen:

Nehmen wir als Beispiel das Drücken der Aufwärtstaste:

①Wenn die obere Zahl leer und die untere Zahl nicht leer ist, werden die oberen und unteren Werte vertauscht.
②Wenn der obere eine Zahl ist und gleich dem unteren ist, dann ist die obere Zahl * 2 und der Wert darunter leer. Die übrigen Bedingungen bleiben unverändert.

function downtop(){ //Funktion wird durch Drücken der Taste „nach oben“ ausgeführt for(var i=0;i < 4; i++){
 für(var j=0; j < 4; j++){
 wenn(arr[i][j].innerHTML == "" && i<3 &&arr[i+1][j].innerHTML != ""){
 arr[i][j].innerHTML = arr[i+1][j].innerHTML ;
 arr[i+1][j].innerHTML = "";
 downtop(); // Ausführen, wenn die Bedingung erfüllt ist // Wenn sie nicht erfüllt ist, wird die if-Anweisung nicht ausgeführt }else if(i<3&&arr[i][j].innerHTML !="" && arr[i+1][j].innerHTML !="" &&arr[i][j].innerHTML == arr[i+1][j].innerHTML){
 arr[i][j].innerHTML = 2*arr[i+1][j].innerHTML;
 arr[i+1][j].innerHTML = "";
 }anders{
 
 }
 }
 }

}

Ebenso müssen Sie nur (einige Parameter) ändern, um die Logik der anderen 3 Schlüssel zu vervollständigen:

Funktion downbottom(){
 für(var i=3 ;i > 0 ; i--){
 für(var j=0; j < 4; j++){
 wenn(arr[i-1][j].innerHTML != "" && i>0 &&arr[i][j].innerHTML == "" ){ 
 arr[i][j].innerHTML = arr[i-1][j].innerHTML ;
 arr[i-1][j].innerHTML = "";
 unten unten();
 }
 sonst wenn (arr[i-1][j].innerHTML !=""&& arr[i][j].innerHTML !="" && i>0 &&arr[i-1][j].innerHTML == arr[i][j].innerHTML){
 arr[i][j].innerHTML = 2*arr[i-1][j].innerHTML;
 arr[i-1][j].innerHTML = "";
 }
 }
 }
}

Funktion untenlinks(){
 für(var i=0;i < 4; i++){
 für(var j=0; j < 4; j++){
 wenn(arr[i][j].innerHTML == "" && j<3 &&arr[i][j+1].innerHTML != ""){
 arr[i][j].innerHTML = arr[i][j+1].innerHTML ;
 arr[i][j+1].innerHTML = "";
 unten links();
 }sonst wenn( j<3&& arr[i][j].innerHTML !=""&& arr[i][j+1].innerHTML !="" &&arr[i][j].innerHTML == arr[i][j+1].innerHTML){
 arr[i][j].innerHTML = 2*arr[i][j+1].innerHTML;
 arr[i][j+1].innerHTML = "";
 }
 }
 }

}


Funktion geradeheraus(){
 
 für(var i=0;i < 4; i++){
 für(var j = 3 ;j > 0; j--){
 wenn(j > 0 && arr[i][j].innerHTML == ""&&arr[i][j-1].innerHTML != ""){
 arr[i][j].innerHTML = arr[i][j-1].innerHTML ;
 arr[i][j-1].innerHTML = "";
 geradezu();
 }sonst wenn( j>0 && arr[i][j].innerHTML !=""&& arr[i][j-1].innerHTML !="" &&arr[i][j].innerHTML == arr[i][j-1].innerHTML){
 arr[i][j].innerHTML = 2*arr[i][j-1].innerHTML;
 arr[i][j-1].innerHTML = "";
 }
 }
 }

 }

Fügen Sie für unterschiedliche Werte unterschiedliche Hintergrundfarben hinzu: (optional)

Funktion Farbe(){

für(var i=0;i < 4; i++){
 für(var j=0; j < 4; j++){
 Schalter(arr[i][j].innerHTML){
 Fall "": arr[i][j].style.backgroundColor = "bisque";Pause; 
 Fall "2": arr[i][j].style.backgroundColor = "rot";break; 
 Fall "4": arr[i][j].style.backgroundColor = "orange";unterbrechen; 
 Fall "8": arr[i][j].style.backgroundColor = "gelb";unterbrechen; 
 Fall "16": arr[i][j].style.backgroundColor = "grün";break; 
 Fall "32": arr[i][j].style.backgroundColor = "blau";unterbrechen; 
 Fall "64": arr[i][j].style.backgroundColor = "#000";unterbrechen; 
 Fall "128": arr[i][j].style.backgroundColor = "aqua";unterbrechen; 
 Fall "256": arr[i][j].style.backgroundColor = "pink";unterbrechen; 
 }
 
 
 }
}

}

Richten Sie dann Tastaturüberwachungsereignisse für das gesamte Fenster ein:

Schlüsselcode: 38
Der Schlüsselcode lautet: 40
Linker SchlüsselCode: 37
Rechter SchlüsselCode: 39
Bei jedem Drücken der Taste ① ruft die Funktion in die entsprechende Richtung auf. ② ruft die Funktion mit einem zufälligen Parameter auf. ③ ruft die Funktion auf, um zu bestimmen, ob das Spiel vorbei ist. ④ ruft die Funktion mit unterschiedlichen Werten und unterschiedlichen Elementen auf. ⑤ ruft 2 Mal auf, wenn das Spiel beginnt (standardmäßig 2 Mal).

Fenster.onkeydown = Funktion(e){
 Schalter(e.Schlüsselcode){
 Fall 37: downleft(); sj(); color(); js(); break; //links Fall 38: downtop(); sj(); color(); js(); break; //groß Fall 39: downright(); sj(); color(); js(); break; //rechts Fall 40: downbottom(); sj(); color(); js(); break; //unten}

}
sj(); //Das Spiel beginnt mit zwei Standardzahlen sj();

Das einfache 2048-Spiel ist fertig!

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:

AngularJS-Implementierung der 2048-Spielfunktion [mit Quellcode-Download]
2048-Minispiel mit nativem JS schreiben
2048-Spiel in Javascript geschrieben
2048-Spiel mit Javascript schreiben
Javascript-Version des Spiels 2048
Teilen des JS-nativen Quellcodes des Spiels 2048 (das Neueste im Internet)

<<: So konfigurieren Sie SSH/SFTP und legen Berechtigungen unter dem Linux-Betriebssystem fest

>>: Was tun, wenn Sie Ihr Linux/Mac MySQL-Passwort vergessen?

So implementieren Sie ein responsives Layout mit CSS

Natives JS zur Implementierung des Spiels 2048

So implementieren Sie ein responsives Layout mit CSS

Detaillierte Erklärung der Beziehung zwischen React und Redux

So ändern Sie das Passwort und legen die Richtlinie zur Passwortkomplexität in Ubuntu fest

Erläuterung der Ausführungspriorität von mySQL-Schlüsselwörtern

Lernen Sie den Funktionsmechanismus von jsBridge in einem Artikel kennen

Mysql NULL verursachte die Grube

So reduzieren Sie den Speicherverbrauch und die CPU-Auslastung von Webseiten

Sieben Lösungen für klassische verteilte Transaktionen zwischen MySQL und Golan

Installation und Verwendung von MySQL unter Ubuntu (allgemeine Version)

Analyse des Framework-Prinzips des Linux-Eingabesubsystems

Artikel empfehlen

Zwei spezielle Werte in CSS werden verwendet, um die Vererbungs- und Initialisierungsmethoden der Kaskade zu steuern

So stellen Sie Spring Boot mit Docker bereit

Neonlichteffekte mit reinem CSS3 umgesetzt

Mehrere Möglichkeiten zur Implementierung bildadaptiver Container mit CSS (Zusammenfassung)

Zusammenfassung der Kompatibilitätsprobleme beim Flex-Layout

Lösen Sie das domänenübergreifende Problem von Vue + SpringBoot + Shiro

Detaillierte Erklärung der Datentypen und Schemaoptimierung in MySQL

JavaScript zum Erzielen eines Vollbild-Seiten-Scrolleffekts

So stellen Sie zabbix_agent in Docker bereit

Eine kurze Diskussion über 12 klassische Probleme in Angular

So beenden Sie den MySQL-Prozess ordnungsgemäß und sicher

Erläuterung der Verwendungsszenarien von SQL und verschiedenen NoSQL-Datenbanken

So verwenden Sie CSS-Medienabfragen mit einem geringeren Seitenverhältnis

Tutorial zur Verwendung des iostat-Befehls unter Linux

Zusammenfassung der zehn häufigsten Probleme bei MySQL-Indexfehlern