Créer un jeu de mémoire avec les méthodes HTML et JQuery Effects

De nombreux développeurs Web utilisent la bibliothèque Jquery pour rendre leurs pages Web plus interactives et fonctionnelles. La bibliothèque jQuery propose plusieurs méthodes et fonctions, dont Jquery Effect, qui permet d'ajouter de l'interactivité et de l'animation aux éléments d'un site Web.
Les animations ne nécessitent aucun plugin particulier et sont compatibles avec la plupart des navigateurs, CSS3 est également utilisé pour la partie graphique.
Certaines propriétés sont :

 La méthode anime()

Cette méthode permet d'appliquer un style css à un élément d'une page web, par exemple pour agrandir un calque.
La syntaxe est la suivante

 (sélecteur) .animate ({style}, vitesse)

Un exemple simple de la fonction d'animation utilisée pour appliquer un style CSS à un élément :

 Animer et développer avec Animer et réduire

Nous pouvons donc voir comment, avec la méthode animate (), nous pouvons appliquer css à un élément et le faire changer en un certain temps (millisecondes) pour générer l'effet dont nous avons besoin.
Nous créons le jeu avec Jquery et la méthode Animate()
Nous allons créer avec cette méthode un jeu de style Simon Dice ou jeu de mémoire qui consistera à afficher un certain nombre de cercles rouges à l'écran et seuls certains d'entre eux seront affichés dans une séquence bleue, le joueur doit cliquer en répétant la séquence, s'il succède à la séquence l'écran sera redessiné en ajoutant plus de cercles et en augmentant le niveau de difficulté. Si le joueur échoue la séquence, il doit répéter ce niveau de jeu jusqu'à ce qu'il le termine correctement. Un avertissement vous dira également si vous avez terminé le niveau et ainsi vous passerez au niveau suivant.
Le jeu commencera avec 2 lignes et 2 colonnes, 4 cercles dont 2 seront affichés pendant quelques secondes en bleu. Ensuite, nous devons cliquer sur les deux qui étaient en bleu. Ainsi dans chaque niveau une colonne sera ajoutée et dans un autre niveau une ligne, également des cercles plus actifs seront ajoutés en bleu pour essayer plus tard de se souvenir de la même séquence.
L'ordre d'apparition n'a pas d'importance, mais plutôt que tous les cercles qui sont en bleu soient cliqués.
La taille maximale du plateau ou de la scène sera de 6 colonnes sur 6 rangées, ce qui donnera une grille de 36 cercles.

Nous recherchons une image de fond pour notre jeu, ce sera le fond du web ou nous pouvons utiliser une couleur unie. On commence par créer un répertoire de jeu et à l'intérieur d'un fichier index.html qui contiendra la page web, le code web sera le suivant :

 Jeux de mémoire
Simon dit jeu
Nous devons nous rappeler la séquence des cercles bleus et
cliquez pour répéter la séquence

La version Jquery avec l'utilisation de la version 1.9 ou supérieure convient parfaitement à cet exemple. Ensuite, nous créerons le fichier styles.css pour les feuilles de style, nous utiliserons CSS3 pour les ombres et quelques effets pour nos jeux. Les identifiants et les classes seront ensuite utilisés depuis Jquery pour pouvoir réaliser l'animation et l'interactivité du jeu.

 corps {marge : 0px; remplissage : 0px ; } #background {background: # 333 url (background.jpg.webp); text-align : centre ; marge supérieure : -20px; rembourrage-dessus : 10px ; hauteur : 800px ; bloc de visualisation; } h2 {couleur : #fff ; } h3 {couleur : #ccc ; } .container {padding: 4px; affichage : bloc en ligne ; couleur d'arrière-plan : #ffffff; largeur : 200px ; hauteur : 200px ; bordure : 1px solide noir ; bordure : 1px RVB solide (204, 204, 204) ; rayon de bordure : 3px 3px 3px 3px ; -webkit-box-shadow : 6px 5px 8px 0px rgba (50, 50, 50, 0,75) ; -moz-box-shadow : 6px 5px 8px 0px rgba (50, 50, 50, 0,75) ; box-shadow : 6px 5px 8px 0px rgba (50, 50, 50, 0,75) ;; } .figure {border: 2px #fff solide; fond : rouge ; marge : 0px ; remplissage : 0px ; affichage : bloc en ligne ; box-shadow : 2px 2px 2px rgb (136, 136, 136); marge : 2px ; }. figure : hover {curseur : pointeur ; } .active {couleur d'arrière-plan : # 4D90FE; } .error {couleur de fond : rouge ; } .circle {/ * border-radius: 50px; * / largeur : 100px ; hauteur : 100px ; -moz-border-radius : 50px ; -webkit-border-radius : 50px ; rayon de bordure : 50px ; }

Lorsque nous avons créé les styles, nous pouvons créer la fonctionnalité et l'animation du jeu. Nous créons un fichier jeu.js Nous écrivons le code Javascript suivant, nous devons identifier ici quels sont les classes et identifiants css qui participent au jeu et à quoi nous les utilisons. Chacun a un attribut atrr et des classes peuvent y être ajoutées avec addClass.

 var Tfigure = 55; // Taille de la figure var StartGame = false // Démarrer le jeu False = No var NextLevel = true; // Vrai continue le jeu s'il est faux le jeu s'arrête var colonnes = lignes = 2 // Taille initiale des jetons ou des cercles sur le plateau 2x2 soit 4 cercles $ (document) .ready (function () {// je génère le jeu selon le nombre de colonnes et de lignes de chaque niveau de difficulté GeneraJuego (colonnes, lignes);}); function GameGenerate (c, r) {// Si NextLevel est égal à false indique que le jeu doit s'arrêter si (! NextLevel) retourne; // J'arrête le jeu NextLevel = false; // On supprime tous les éléments de la scène ou du plateau de jeu $ (".game") .fadeOut (1000, // à la fin de la méthode fade // vide les éléments du jeu sur la scène ou la fonction plateau de jeu ( ) {$ (".game") .empty (); // Agrandissez la scène ou le plateau de jeu pour accueillir les cercles $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px" , width: ((Tfigure + 8) * c) + "px"}, 1000, // à la fin de l'expansion avec amimate() // je crée les nouvelles figures selon la nouvelle dimension de l'écran i fonction de niveau de jeu () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("circle", Tfigure)); $ (".game" ) .fadeIn (200); // Je crée au hasard quels sont les cercles du tableau sur lesquels on peut cliquer et lesquels ne sont pas CreateBlueFigure ();})}); } fonction CreateFigure (type de forme, r) {// Si vous cliquez sur une forme, retournez $ ("") .addClass (" figure "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Je vérifie si cette figure a l'attribut sélectionné, c'est-à-dire si elle est l'un de ceux qui étaient actifs en bleu if ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (".figure [selected = 'selected']") .length // Si le nombre de clics dans les cercles actifs et le nombre de clics dans les cercles non actifs est supérieur au nombre de clics effectués, on ne continue pas le jeu et on va régénérer l'écran plus tard sans changer le niveau si (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (".figure [selected = 'selected']: not (.activa) ") .addClass (" activa "); // Si le niveau d'échec du clic est 0, cela signifie que nous atteignons la séquence if ($ ("". error "). longueur == 0 ) {alerte ("Vous avez atteint la séquence, passez au niveau suivant"); if (colonnes == lignes) colonnes ++; else if (colonnes> lignes) lignes ++; / / Le niveau maximum donc n 6 lignes sur 6 colonnes si (colonnes> 6) {colonnes = 6; lignes = 6; }} GeneraJuego (colonnes, lignes); }}}); } fonction CreateBlueFigure () {var count = 0; var length = $ (".game> .figure") .length for (count = 0; count <Math.ceil (length / 3);) {var random = Math.ceil (Math.random () * length); if (aléatoire .figure ") .eq (aléatoire) .hasClass (" actif ")) {$ (" .game> .figure ") .eq (aléatoire) .addClass (" actif "). attr (" sélectionné ", "selected"); count ++;}}} // Masque les figures sélectionnées après avoir affiché la séquence à répéter window.setTimeout (HideBlueFigures, 1200)} function HideBlueFigures () {$ (".game> .figure") . removeClass ("actif"); GameStart = true; NextLevel = true;}

Donc, nous concluons le jeu, nous pouvons ajouter des scores, des avertissements et des messages, également du son si nous le souhaitons, en plus de la possibilité d'arrêter et de continuer le jeu, gardez à l'esprit qu'il ne s'agit que de Javascript, HTML et CSS mais qu'il serait facile de étendre l'ajout de résultats à une base de données ou incorporer un niveau de difficulté plus élevé.Avez-vous aimé et aidé ce tutoriel ?Vous pouvez récompenser l'auteur en appuyant sur ce bouton pour lui donner un point positif