So implementieren Sie das Minispiel 2048 mit js

Kürzlich besuchte ein Klassenkamerad ein Seminar und sagte, eine Firma habe ihn gebeten, ein 2048-Minispiel zu schreiben, nachdem er auf einige Codes im Internet verwiesen hatte, und schrieb dann selbst eines.

Die Schreibideen sind wie folgt:
1. Richten Sie das HTML-Layout ein. Zu der großen Kiste, die in der kleinen Kiste eingebettet ist, gibt es nicht viel zu sagen.
2. Implementieren Sie die Spielinitialisierung und generieren Sie die ersten beiden kleinen Blöcke. Hier müssen wir eine zufällige 2 oder 4 generieren und sie an einer zufälligen Position platzieren. Tatsächlich können Sie nach Fertigstellung des Layouts fast daran denken, Arrays zum Speichern von Zahlen zu verwenden. Dieser Block verwendet hauptsächlich Math.random(), um Zufallszahlen und zufällige X- und Y-Werte zum Einfügen in das Array zu generieren. Schreiben Sie dann eine Funktion zum Aktualisieren der Seite und verwenden Sie JS, um den Inhalt und den CSS-Stil der kleinen Box zu aktualisieren. Hier wird dieser Block, die Funktion zum Initialisieren des Arrays und zum Generieren von zwei Zufallsboxen, als newGame()-Funktion geschrieben, sodass sie beim Neustart des Spiels direkt aufgerufen werden kann.
3. Das Wichtigste kommt: Bewegen. Als ich es selbst geschrieben habe, bin ich der Idee gefolgt, sie zuerst zu verschieben und dann darüber nachzudenken, sie zusammenzuführen. Es ist erforderlich, eine Variable zu belassen, die die Position 0 aufzeichnen kann. Wenn Sie sich beispielsweise nach unten bewegen, lautet der Code wie folgt.

for(var i = 0;i<4;i++){    
    var n=3;    
    for(var j = 3;j>=0;j--){        
    if(board[j][i] == 0){            
    continue;
        }else{            
        if(board[n][i]==0){
                board[n][i] = board[j][i];
                board[j][i] = 0;
            }
            n--;
        }
    }
}

Ich habe die Funktion aufgerufen, die am Ende der Bewegungsfunktion weiterhin zufällige Kästchen generiert. Zu diesem Zeitpunkt muss ich über eine Frage nachdenken, wie ich verhindern kann, dass sie weiter zunimmt, wenn sie tatsächlich vorhanden ist keine Bewegung. Ich habe immer noch eine Schleife verwendet, um dieses Problem zu lösen. Durchlaufen Sie das Schleifenarray. Wenn vor der Bewegungsrichtung eine 0 steht, die nicht 0 ist, können Sie die Bewegung fortsetzen. Um beispielsweise festzustellen, ob es nach unten verschoben werden kann:

function canMoveDown(){
    for(var i = 0;i<4;i++){        
    for(var j = 3;j>=0;j--){            
    if(board[j][i]!=0&&j!=3){                
    if(board[j+1][i]==0){                    return false;
                }
            }
        }
    }    return true;
}

Schreiben Sie dann die zuvor beurteilte Bewegungsfunktion neu. Wenn die Rückgabe wahr ist, wird direkt false zurückgegeben, und der nachfolgende Bewegungsfunktionskörper wird zurückgegeben nicht ausgeführt werden.
4. Wenn die Bewegung abgeschlossen ist, muss über die Frage der Zusammenführung nachgedacht werden. Meine Idee ist Folgendes: Vergleichen Sie nach dem Verschieben den Wert des vorherigen Felds in der Bewegungsrichtung (falls vorhanden) mit dem Feld nach dem Verschieben. Wenn sie gleich sind, setzen Sie das vorherige Feld auf das Zweifache und verschieben Sie es auf 0 gesetzt. Um sich beispielsweise nach unten zu bewegen, ändern Sie den Code wie folgt:

for(var i = 0;i<4;i++){    
    var n=3;    
    for(var j = 3;j>=0;j--){        
    if(board[j][i] == 0){            
    continue;
        }else{            
        if(board[n][i]==0){
                board[n][i] = board[j][i];
                board[j][i] = 0;
            }            if(n<3){                
            if(board[n][i] == board[n+1][i]){
                    board[n+1][i] = board[n][i]*2;
                    board[n][i] = 0;                    
                    continue;
                }
            }
            n--;
        }
    }
}

Dies kann nur eingegeben werden, wenn n<3, mit Ausnahme des Falles, in dem es sich um das unterste Feld handelt, da es keine Felder zum Zusammenführen gibt. Hierbei ist zu beachten, dass das aktuelle Feld nach dem Zusammenführen 0 wird. Wie bereits erwähnt, dient n dazu, die Position des 0-Felds aufzuzeichnen. Daher ist hier zu beachten, dass sich der n-Wert nicht ändern muss, da der aktuelle Das Feld ist 0. Wenn noch ein Wert zum Verschieben nach unten vorhanden ist, sollten Sie hierher wechseln. Andernfalls werden Sie feststellen, dass das obere Feld ein Leerzeichen vom zusammengeführten Feld darunter ist, was anders ist, als Sie erwartet haben. Hier müssen wir auch die Beurteilungsbedingungen der vorherigen Funktion canMoveDown() ändern. Wenn sie zusammengeführt werden kann, muss auch die if-Bedingung wie folgt geändert werden:

if(board[j+1][i]==0||board[j+1][i]==board[j][i]){        
eturn false;}

5 . An diesem Punkt ist die Hauptfunktion im Grunde beendet. Es gibt auch ein kleines Urteil über das Ende. Das Ende ist, dass 1 keine Box hat und leer ist und 2 sich nicht bewegen kann. Wenn keine Box leer ist, durchlaufen Sie das Array, um zu sehen, ob alle Boxen nicht 0 sind. Wenn Sie sich nicht bewegen können, verwenden Sie die zuvor geschriebene Funktion canMoveDown() und die Funktionen zum Bewegen nach oben, zum Verschieben nach links und zum Verschieben nach rechts. Wenn diese 5 zutreffen, wird das Spielendefeld angezeigt und dann das neue newGame( aufgerufen. ) Funktion erneut starten.

Das obige ist der detaillierte Inhalt vonSo implementieren Sie das Minispiel 2048 mit js. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!