Crea un gioco di memoria con i metodi HTML e JQuery Effects

Molti sviluppatori web utilizzano la libreria Jquery per rendere le proprie pagine web più interattive e funzionali. La libreria jQuery offre diversi metodi e funzioni, incluso Jquery Effect, che viene utilizzato per aggiungere interattività e animazione agli elementi di un sito web.
Le animazioni non necessitano di alcun plugin particolare e sono compatibili con la maggior parte dei browser, inoltre viene utilizzato CSS3 per la parte grafica.
Alcune proprietà sono:

 Il metodo animato()

Questo metodo permette di applicare uno stile css ad un elemento di una pagina web, ad esempio per ingrandire un livello.
La sintassi è la seguente

 (selettore) .animate ({stile}, velocità)

Un semplice esempio della funzione di animazione utilizzata per applicare uno stile CSS a un elemento:

 Anima ed espandi lungo Anima e comprimi

Quindi possiamo vedere come con il metodo animate() possiamo applicare css a un elemento e farlo cambiare in un certo tempo (millisecondi) per generare qualsiasi effetto di cui abbiamo bisogno.
Creiamo il gioco con Jquery e il metodo Animate()
Creeremo con questo metodo un gioco in stile Simon Dice o memory che consisterà nel mostrare una serie di cerchi rossi sullo schermo e solo alcuni di essi verranno mostrati in una sequenza blu, il giocatore dovrà cliccare ripetendo la sequenza, se riesce la sequenza lo schermo verrà ridisegnato aggiungendo più cerchi e alzando il livello di difficoltà. Se il giocatore fallisce la sequenza, deve ripetere quel livello di gioco finché non lo completa correttamente. Inoltre un avviso ti dirà se hai completato il livello e quindi passerai al livello successivo.
Il gioco inizierà con 2 righe e 2 colonne, 4 cerchi di cui 2 verranno mostrati per alcuni secondi in blu. Quindi dobbiamo fare clic sui due che erano in blu. Quindi in ogni livello verrà aggiunta una colonna e in un altro livello una riga, anche i cerchi più attivi verranno aggiunti in blu per cercare in seguito di ricordare la stessa sequenza.
L'ordine di apparizione non ha importanza, ma piuttosto che tutti i cerchi in blu vengano cliccati.
La dimensione massima del tabellone o dello stage sarà di 6 colonne per 6 righe, che daranno una griglia di 36 cerchi.

Stiamo cercando un'immagine di sfondo per il nostro gioco, sarà lo sfondo del web o possiamo usare un colore piatto. Iniziamo creando una directory di gioco e all'interno di un file index.html che conterrà la pagina web, il codice web sarà il seguente:

 Gioco di memoria
Simon dice gioco
Dobbiamo ricordare la sequenza dei cerchi blu e
clicca ripetendo la sequenza

La versione Jquery con l'utilizzo di 1.9 o versioni successive va bene per questo esempio. Quindi creeremo il file styles.css per i fogli di stile, utilizzeremo CSS3 per le ombre e alcuni effetti per i nostri giochi. Gli identificatori e le classi verranno poi utilizzati da Jquery per poter realizzare l'animazione e l'interattività del gioco.

 corpo {margine: 0px; imbottitura: 0px; } #background {background: # 333 url (background.jpg.webp); allineamento del testo: centro; margine superiore: -20px; imbottitura: 10px; altezza: 800 px; blocco di visualizzazione; } h2 {colore: #fff; } h3 {colore: #ccc; } .container {padding: 4px; display: blocco in linea; colore di sfondo: #ffffff; larghezza: 200px; altezza: 200px; bordo: solido nero 1px; bordo: 1px rgb solido (204, 204, 204); bordo-raggio: 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 {bordo: 2px #fff solido; fondo: rosso; margine: 0px; imbottitura: 0px; display: blocco in linea; box-shadow: 2px 2px 2px rgb (136, 136, 136); margine: 2px; }.figure: hover {cursor: pointer; } .active {colore di sfondo: # 4D90FE; } .error {colore di sfondo: rosso; } .circle {/ * border-radius: 50px; * / larghezza: 100px; altezza: 100px; -moz-border-radius: 50px; -webkit-border-radius: 50px; bordo-raggio: 50px; }

Quando abbiamo creato gli stili, possiamo creare la funzionalità e l'animazione del gioco. Creiamo un file gioco.js Scriviamo il seguente codice Javascript, dobbiamo identificare qui quali sono le classi e gli identificatori css che partecipano al gioco e per cosa li usiamo. Ognuno ha un attributo atrr e le classi possono essere aggiunte con addClass.

 var Tfigure = 55; // Dimensione della figura var StartGame = false // Avvia gioco False = No var NextLevel = true; // True continua il gioco se è falso il gioco si ferma var columns = righe = 2 // Dimensione iniziale delle fiches o dei cerchi sulla scacchiera 2x2 cioè 4 cerchi $ (document) .ready (function()) {// genero il gioco in base al numero di colonne e righe di ogni livello di difficoltà GeneraJuego (colonne, righe);}); function GameGenerate (c, r) {// Se NextLevel è uguale a false indica che il gioco dovrebbe fermarsi se (! NextLevel) ritorna; // Fermo il gioco NextLevel = false; // Cancelliamo tutti gli elementi dello stage o del tabellone $ (".game") .fadeOut (1000, // alla fine del metodo fade // svuota gli elementi del gioco sul palco o funzione del tabellone ( ) {$ (".game") .empty (); // Espande lo stage o il tabellone di gioco per ospitare i cerchi $ (".container") .animate ({height: ((Tfigure + 8) * r) + " px" , width: ((Tfigure + 8) * c) + "px"}, 1000, // alla fine dell'espansione con amimate () // creo le nuove figure in base alla nuova dimensione dello schermo i funzione di livello di gioco () {for (i = 0; i <(c * r); i ++) $ (".game") .append (CreateFigure ("cerchio", Tfigure)); $ (".game" ) .fadeIn (200); // creo casualmente quali sono i cerchi sulla lavagna che possono essere cliccati e quali non sono CreateBlueFigure ();})}); } funzione CreateFigure (shapetype, r) {// Se si fa clic su una forma, restituire $ ("") .addClass (" figure "+ typeFigure) .width (r) .height (r) .click (function () {if (StartGame) {// Controllo se quella figura ha l'attributo selezionato, cioè se è uno di quelli attivi in ​​blu if ($ (this) .attr ("selected") == "selected") $ (this) .addClass ("active"); else $ (this) .addClass ("error" ); var TotalSelected = $ (.figure [selected = 'selected']") .length // Se il numero di clic nelle cerchie attive e il numero di clic nelle cerchie non attive è maggiore del numero di clic effettuati, non continuiamo il gioco e rigenereremo lo schermo in un secondo momento senza cambiare il livello if (($ (". active"). length + $ (". error"). length)> = TotalSelected) {StartGame = false; $ (.figure [selected = 'selected']: not (.activa) ") .addClass (" activa "); // Se il livello di errore del clic è 0 significa che abbiamo colpito la sequenza if ($ (. errore "). length == 0 ) {alert ("Hai raggiunto la sequenza, passa al livello successivo"); if (colonne == righe) colonne ++; else if (colonne> righe) righe ++; / / Il livello massimo so n 6 righe per 6 colonne if (colonne> 6) {colonne = 6; righe = 6; }} GeneraJuego (colonne, righe); }}}); } function 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 (random .figure ") .eq (random) .hasClass (" attivo ")) {$ (" .game> .figure ") .eq (random) .addClass (" attivo "). attr (" selezionato ", "selected"); count ++;}}} // Nasconde le figure selezionate dopo aver mostrato la sequenza da ripetere window.setTimeout (HideBlueFigures, 1200)} function HideBlueFigures () {$ (.game> .figure") . removeClass ("attivo"); GameStart = true; NextLevel = true;}

Quindi concludiamo il gioco possiamo aggiungere punteggio, avviso e messaggi, anche suoni se vogliamo, oltre alla possibilità di interrompere e continuare il gioco, tieni presente che è solo Javascript, HTML e CSS ma sarebbe facile estendere l'aggiunta di risultati ai dati di un database o incorporare un livello di difficoltà più elevato.Ti è piaciuto e hai aiutato questo Tutorial?Puoi premiare l'autore premendo questo pulsante per dargli un punto positivo