Idées et méthodes pour implémenter le jeu Tetris en javascript

Regardez "La beauté de la programmation" : "Bien que les programmes soient difficiles à écrire, ils sont beaux. Pour bien écrire des programmes, vous devez avoir certaines connaissances de base, notamment les langages de programmation, les structures de données et les algorithmes. Si vous écrivez bien des programmes , Cela nécessite des capacités de réflexion logique rigoureuses et de bonnes bases en programmation, ainsi qu'une familiarité avec les environnements et les outils de programmation. »

Êtes-vous déjà tombé amoureux de la programmation après avoir étudié l'informatique pendant plusieurs années ? En d’autres termes, si vous n’avez pas essayé d’écrire un jeu vous-même, vous n’aimez pas vraiment la programmation.

La sensation et la valeur économique que Tetris a provoquées peuvent être considérées comme un événement majeur dans l'histoire des jeux. Cela semble simple mais est infiniment varié et addictif. Je crois que la plupart de mes camarades de classe en étaient tellement obsédés qu’ils ont arrêté de penser à la nourriture et au thé.

Règles du jeu

1. Un lieu virtuel plat pour placer des petits carrés. Sa taille standard : la largeur des rangées est de 10, la hauteur des colonnes est de 20, avec chaque petit carré comme. unités.

2. Un ensemble de graphiques réguliers composé de 4 petits carrés Il s'appelle Tetromino en anglais et communément appelé carré en chinois. Il existe 7 types de carrés, à savoir S, Z, L, J, I. , O et T. Nommé par la forme des lettres.

I : Éliminez jusqu'à quatre couches à la fois

J (gauche et droite) : Éliminez jusqu'à trois couches, ou éliminez deux couches

L : Éliminez jusqu'à trois couches, ou éliminer deux couches

O : Éliminer une à deux couches

S (gauche et droite) : Jusqu'à deux couches, facile à provoquer des trous

Z ( gauche et droite) : Jusqu'à deux couches, faciles à provoquer des trous

T : Jusqu'à deux niveaux

Les blocs commenceront à tomber lentement du haut de la zone. Les joueurs peuvent faire pivoter le bloc par unités de 90 degrés et déplacer le bloc vers la gauche et la droite par unités de grille pour accélérer la chute du bloc. Lorsqu'un bloc se déplace vers le bas de la zone ou atterrit sur d'autres blocs et ne peut pas bouger, il y sera fixé et de nouveaux blocs apparaîtront au-dessus de la zone et commenceront à tomber. Lorsqu'une colonne de grilles horizontales dans la zone est complètement remplie de carrés, la colonne disparaît et devient le score du joueur. Plus il y a de colonnes supprimées en même temps, plus l'indice de score augmente.

Analyse et solution

Lorsque chaque bloc tombe, nous pouvons faire :

1) Tourner dans la direction appropriée

2 ) Déplacez-vous horizontalement vers une certaine colonne

3) Déposez verticalement vers le bas

Tout d'abord, vous devez utiliser un tableau bidimensionnel, la zone [18] [10] représente le 18*10 aire de jeux. Parmi eux, une valeur de 0 dans le tableau signifie vide et une valeur de 1 signifie qu'il y a des blocs.

Il existe 7 types de blocs au total, chacun avec 4 directions. Définir activeBlock[4]. La valeur de ce tableau est précalculée avant la compilation et utilisée directement dans le programme.

Difficultés

1) Vérification des limites.

//检查左边界,尝试着朝左边移动一个,看是否合法。
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) La rotation nécessite une logique mathématique, un problème de rotation d'un point de 90 degrés par rapport à un autre point.
3) Le mécanisme de surveillance du timing et des événements du clavier permet au jeu de s'exécuter automatiquement.

//开始 
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;

Processus du programme

1) L'utilisateur clique sur Démarrer-> Construire un graphique actif et régler la minuterie.

//当前活动的方块, 它可以左右下移动, 变型。当它触底后, 将会更新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) Après chaque mouvement descendant, vérifiez s'il a touché le fond, essayez d'éliminer la rangée.

//消行 
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) Après avoir terminé, construisez un graphique actif et réglez la minuterie.

À optimiser

1) Définir les couleurs des blocs de différentes formes.

Idée : dans la fonction create block, définissez la couleur activeBlockColor. Les sept formes différentes de blocs ont des couleurs différentes (en plus de modifier la méthode generateBlock, vous devez également modifier la méthode paintarea. Parce que ce n'était pas le cas. bien pensé au début, éliminer une rangée. Enfin, redessiner les carrés en unifiant les couleurs, vous pouvez donc envisager de supprimer n lignes du tableau, puis d'ajouter n lignes en haut pour garantir l'intégrité des carrés).

2) Lorsque le bloc actuel tombe, vous pouvez vérifier le bloc suivant à l'avance.

Idée : divisez la méthode generateBlock en deux parties, une partie est utilisée pour essayer aléatoirement le bloc suivant et l'autre partie est utilisée pour mettre en cache le bloc actuel à dessiner. Lorsque le bloc actuel atteint le bas et est corrigé, le bloc suivant commence à être dessiné et de nouveaux blocs sont à nouveau générés aléatoirement. À plusieurs reprises.

Ce qui précède est tout le contenu partagé avec vous dans cet article. J'espère que vous l'aimerez.

【Tutoriels associés recommandés】

1. Tutoriel vidéo JavaScript
2 Manuel en ligne JavaScript
3. tutoriel bootstrap