Comment implémenter le mini-jeu 2048 en utilisant js

Récemment, un camarade de classe a assisté à un séminaire et a déclaré qu'une entreprise lui avait demandé d'écrire un mini-jeu 2048. Après avoir fait référence à certains codes sur Internet, il en a écrit un lui-même.

Les idées d'écriture sont les suivantes :
1. Configurez la mise en page HTML. Il n’y a pas grand chose à dire sur la grande boîte nichée à l’intérieur de la petite boîte.
2. Implémentez l'initialisation du jeu et générez les deux premiers petits blocs. Ici, nous devons générer un 2 ou 4 aléatoire et le placer dans une position aléatoire. En fait, une fois la mise en page terminée, vous pouvez presque penser à utiliser des tableaux pour stocker des nombres. Ce bloc utilise principalement Math.random() pour générer des nombres aléatoires et des X et Y aléatoires à insérer dans le tableau. Écrivez ensuite une fonction pour mettre à jour la page, en utilisant JS pour mettre à jour le contenu et le style CSS de la petite boîte. Ici, ce bloc, la fonction d'initialisation du tableau et de génération de deux cases aléatoires est écrit comme une fonction newGame(), afin qu'il puisse être appelé directement au redémarrage du jeu.
3. Le plus important arrive, bougez. Lorsque je l’ai écrit moi-même, j’ai suivi l’idée de les déplacer d’abord, puis d’envisager de les fusionner. Il faut laisser une variable qui puisse enregistrer la position de 0, comme lors d'un déplacement vers le bas, le code est le suivant.

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--;
        }
    }
}

J'ai appelé la fonction qui continue de générer des cases aléatoires à la fin de la fonction de mouvement. À ce moment-là, je dois réfléchir à une question, comment l'empêcher de continuer à augmenter alors qu'il y en a réellement. aucun mouvement. J'ai quand même utilisé une boucle pour résoudre ce problème. Parcourez le tableau de boucles et s'il y a un 0 devant la direction de déplacement qui n'est pas 0, vous pouvez continuer à vous déplacer. Par exemple, pour déterminer s'il peut être déplacé vers le bas :

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;
}

Réécrivez ensuite la fonction de déplacement précédente, qui a été jugée plus tôt, si le retour est vrai, renvoyez directement faux, et le corps de la fonction de déplacement suivant le fera. ne soit pas exécuté.
4. Une fois le mouvement terminé, la question de la fusion doit être envisagée. Mon idée est la suivante. Après le déplacement, comparez la valeur de la case précédente dans le sens du déplacement (si elle existe) avec la case après le déplacement, si elles sont égales, définissez la case précédente sur 2 fois elle-même et déplacez la dernière case. mis à 0. Par exemple, pour descendre, modifiez le code comme suit :

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--;
        }
    }
}

Celui-ci ne peut être saisi que lorsque n<3, excluant le cas où il s'agit de la case du bas, car elle n'a pas de cases à fusionner. Il convient de noter ici qu'après la fusion, la case actuelle devient 0. Comme mentionné précédemment, n sert à enregistrer la position de la case 0. Il convient donc de noter ici que la valeur n n'a pas besoin de changer, car la valeur actuelle. box est 0. S'il y a encore une valeur Si vous souhaitez descendre, vous devez vous déplacer ici, sinon vous constaterez que la case supérieure sera vide d'un espace par rapport à la case fusionnée ci-dessous, ce qui est différent de ce à quoi vous vous attendiez. Ici, nous devons également modifier les conditions de jugement de la fonction canMoveDown() précédente. Si elle peut être fusionnée, elle doit également être jugée comme pouvant se déplacer. Modifiez la condition if en :

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

5. À ce stade, la fonction principale est essentiellement sur La. Il y a aussi un peu de jugement sur la fin. La fin est qu’aucune case de 1 n’est vide et que 2 ne peut pas bouger. Si aucune case n'est vide, parcourez le tableau pour voir si toutes les cases ne sont pas 0. Si vous ne pouvez pas vous déplacer, utilisez la fonction canMoveDown() écrite précédemment et les fonctions de déplacement vers le haut, vers la gauche et vers la droite. Si ces 5 sont vraies, la boîte de fin de jeu apparaîtra, puis appellera le nouveau newGame(. ) pour recommencer.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!