Natives JS zur Implementierung des Spiels 2048

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?

Artikel empfehlen

15 Best Practices für HTML-Anfänger

Hier sind 30 Best Practices für HTML-Anfänger. 1....

CentOS 8.0.1905 installiert ZABBIX Version 4.4 (verifiziert)

Zabbix Server-Umgebungsplattform Version: ZABBIX ...

Linux-Betrieb und -Wartung, grundlegendes Prozessmanagement, Echtzeitüberwachung und -steuerung

Inhaltsverzeichnis 1. Im Hintergrund laufende Job...

Detailliertes Tutorial zur Installation von Nacos in Docker und zur Konfiguration der Datenbank

Umgebungsvorbereitung Docker-Umgebung MySQL 5.7 (...

So verwenden Sie Filter zur Implementierung der Überwachung in Zabbix

Als ich kürzlich an Überwachungsgeräten arbeitete...

So fügen Sie einer großen MySQL-Tabelle eine Spalte hinzu

Die Frage wird hier zitiert: https://www.zhihu.co...

Basiswissen: Was bedeutet http vor einer Website-Adresse?

Was ist HTTP? Wenn wir eine Website durchsuchen m...

MySQL-Cursorfunktionen und -Verwendung

Inhaltsverzeichnis Definition Die Rolle des Curso...

Analysieren Sie das Arbeitsprinzip von Tomcat

SpringBoot ist wie eine riesige Python, die sich ...

Detaillierte Erläuterung der Axios-Kapselung und des API-Schnittstellenmanagements im React-Projekt

Inhaltsverzeichnis Vorwort Installieren Einführun...

Detaillierter Prozess zum Zeichnen dreidimensionaler Pfeillinien mit three.js

Nachfrage: Diese Nachfrage ist ein dringender Bed...

HTML5+CSS3-Codierungsstandards

Die goldene Regel Unabhängig davon, wie viele Per...

Allgemeiner Leitfaden zur Sicherheitskonfiguration von Linux/CentOS-Servern

Linux ist ein offenes System. Im Internet sind vi...

jQuery+Ajax zum Erreichen eines einfachen Paging-Effekts

In diesem Artikel wird der spezifische Code von j...

Beispiel, wie man einen Div-Hintergrund transparent macht

Es gibt zwei gängige Möglichkeiten, den Div-Hinte...