Ideen und Methoden zur Implementierung des Tetris-Spiels in Javascript

Sehen Sie sich „The Beauty of Programming“ an: „Obwohl Programme schwierig zu schreiben sind, sind sie schön. Um Programme gut zu schreiben, müssen Sie über bestimmte Grundkenntnisse verfügen, einschließlich Programmiersprachen, Datenstrukturen und Algorithmen. Wenn Sie Programme gut schreiben.“ , Es erfordert ausgeprägte logische Denkfähigkeiten und eine gute Grundlage in der Programmierung sowie Vertrautheit mit Programmierumgebungen und Programmierwerkzeugen.“

Haben Sie sich jemals in das Programmieren verliebt, nachdem Sie mehrere Jahre lang Computer studiert haben? Mit anderen Worten: Wenn Sie nicht versucht haben, selbst ein Spiel zu schreiben, lieben Sie das Programmieren nicht wirklich.

Die Sensation und der wirtschaftliche Wert, die Tetris hervorgerufen hat, können als ein bedeutendes Ereignis in der Geschichte der Spiele bezeichnet werden. Es scheint einfach, ist aber unendlich vielfältig und macht süchtig. Ich glaube, dass die meisten meiner Klassenkameraden einmal so davon besessen waren, dass sie aufgehört haben, an Essen und Tee zu denken.

Spielregeln

Ein flacher virtueller Ort zum Platzieren kleiner Quadrate. Die Standardgröße beträgt 10, die Spaltenhöhe beträgt 20, mit jeweils kleinen Quadraten Einheiten.

2. Eine Reihe regelmäßiger Grafiken, die aus 4 kleinen Quadraten bestehen. Im Englischen wird es Tetromino genannt und im Chinesischen allgemein als Quadrat bezeichnet. Es gibt 7 Arten von Quadraten, nämlich S, Z, L, J, I , O und T. Benannt nach der Form der Buchstaben.

I: Bis zu vier Schichten gleichzeitig entfernen

J (links und rechts): Bis zu drei Schichten oder zwei Schichten entfernen

L: Bis zu entfernen drei Schichten, oder zwei Schichten entfernen

O: ein bis zwei Schichten entfernen

S (links und rechts): Bis zu zwei Schichten, leicht zu Löchern

Z ( links und rechts): Bis zu zwei Schichten, leicht Löcher zu verursachen

T: Bis zu zwei Ebenen

Die Blöcke beginnen langsam von der Oberseite des Bereichs zu fallen. Spieler können den Block in Einheiten von 90 Grad drehen und den Block in Rastereinheiten nach links und rechts bewegen, um den Fall des Blocks zu beschleunigen. Wenn sich ein Block an den unteren Rand des Bereichs bewegt oder auf anderen Blöcken landet und sich nicht bewegen kann, wird er dort fixiert und neue Blöcke erscheinen über dem Bereich und beginnen zu fallen. Wenn eine Spalte aus horizontalen Gittern im Bereich vollständig mit Quadraten gefüllt ist, verschwindet die Spalte und wird zum Punktestand des Spielers. Je mehr Spalten gleichzeitig gelöscht werden, desto höher ist der Score-Index.

Analyse und Lösung

Wenn jeder Block fällt, können wir Folgendes tun:

1) In die entsprechende Richtung drehen

2 ) Horizontal zu einer bestimmten Spalte bewegen

3) Vertikal nach unten fallen lassen

Zuerst müssen Sie ein zweidimensionales Array verwenden, Bereich[18][10] stellt 18*10 dar Spielbereich. Unter diesen bedeutet ein Wert von 0 im Array, dass es leer ist, und ein Wert von 1, dass es Blöcke gibt.

Es gibt insgesamt 7 Arten von Blöcken mit jeweils 4 Richtungen. Definieren Sie activeBlock[4]. Der Wert dieses Arrays wird vor der Kompilierung vorberechnet und direkt im Programm verwendet.

Schwierigkeiten

1) Grenzprüfung.

//检查左边界,尝试着朝左边移动一个,看是否合法。
function checkLeftBorder(){ 
  for(var i=0; i<activeBlock.length; i++){ 
    if(activeBlock[i].y==0){ 
      return false; 
    } 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y-1)){ 
      return false; 
    } 
  } 
  return true; 
} //同理，需要检测右边界和底边界

2) Drehung erfordert mathematische Logik, ein Problem der Drehung eines Punktes um 90 Grad relativ zu einem anderen Punkt.
3) Der Timing- und Tastaturereignisüberwachungsmechanismus ermöglicht die automatische Ausführung des Spiels.

//开始 
function begin(e){ 
  e.disabled = true; 
  status = 1; 
  tbl = document.getElementById("area"); 
  if(!generateBlock()){ 
    alert("Game over!"); 
    status = 2; 
    return; 
  } 
  paint(); 
  timer = setInterval(moveDown,1000); 
} 
document.onkeydown=keyControl;

Programmablauf

1) Der Benutzer klickt auf Start->

//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新area; 
var activeBlock; 
//生产方块形状, 有7种基本形状。 
function generateBlock(){ 
  activeBlock = null; 
  activeBlock = new Array(4); 
  //随机产生0-6数组，代表7种形态。
  var t = (Math.floor(Math.random()*20)+1)%7; 
  switch(t){ 
    case 0:{ 
      activeBlock[0] = {x:0, y:4}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:0, y:5}; 
      activeBlock[3] = {x:1, y:5}; 

      break; 
    } 
    //省略部分代码..............................
    case 6:{ 
      activeBlock[0] = {x:0, y:5}; 
      activeBlock[1] = {x:1, y:4}; 
      activeBlock[2] = {x:1, y:5}; 
      activeBlock[3] = {x:1, y:6}; 
      break; 
    } 
  } 
  //检查刚生产的四个小方格是否可以放在初始化的位置. 
  for(var i=0; i<4; i++){ 
    if(!isCellValid(activeBlock[i].x, activeBlock[i].y)){ 
        return false; 
      } 
    } 
  return true; 
}

2) Überprüfen Sie nach jeder Abwärtsbewegung, ob es den Boden erreicht hat. Versuchen Sie, die Reihe zu beseitigen.

//消行 
function deleteLine(){ 
  var lines = 0; 
  for(var i=0; i<18; i++){ 
    var j=0; 
    for(; j=0; k--){ 
        area[k+1] = area[k]; 
      } 
    } 
    area[0] = generateBlankLine(); 
    } 
  } 
  return lines; 
}

3) Erstellen Sie nach Abschluss eine aktive Grafik und stellen Sie den Timer ein.

Zu optimieren

1) Legen Sie die Farben von Blöcken unterschiedlicher Form fest.

Idee: Legen Sie in der Funktion „Block erstellen“ die Farbe „activeBlockColor“ fest. Die sieben verschiedenen Blockformen haben unterschiedliche Farben (zusätzlich zur Änderung der Methode „generateBlock“ müssen Sie auch die Methode „paintarea“ ändern. Weil dies nicht der Fall war Am Anfang gut durchdacht, eine Zeile eliminieren. Zeichnen Sie abschließend die Quadrate neu und vereinheitlichen Sie dabei die Farben. Sie können also in Betracht ziehen, n Zeilen der Tabelle zu entfernen und dann n Zeilen oben hinzuzufügen, um die Integrität der Quadrate sicherzustellen.

2) Wenn der aktuelle Block fällt, können Sie den nächsten Block im Voraus überprüfen.

Idee: Teilen Sie die Methode „generateBlock“ in zwei Teile auf, ein Teil wird verwendet, um den nächsten Block zufällig auszuprobieren, und der andere Teil wird verwendet, um den aktuell zu zeichnenden Block zwischenzuspeichern. Wenn der aktuelle Block den Boden erreicht und fixiert ist, beginnt das Zeichnen des nächsten Blocks und es werden erneut zufällig neue Blöcke generiert. Wiederholt.

Das Obige ist der gesamte Inhalt, der in diesem Artikel mit Ihnen geteilt wird. Ich hoffe, dass er Ihnen gefällt.

【Empfohlene verwandte Tutorials】

1. JavaScript-Video-Tutorial
2. JavaScript-Online-Handbuch
Bootstrap-Tutorial