In questa lezione realizzeremo il gioco memory game in JavaScript, ovvero il famoso gioco di abbinamento per testare la memoria di un giocatore.
Per lo sviluppo di questo gioco utilizzeremo alcuni metodi e proprietà di JavaScript che abbiamo studiato nelle lezioni precedenti, tra cui anche metodi e proprietà utili per manipolare il DOM in JavaScript. Vedremo anche l’utilizzo delle funzioni.
Ecco dunque una demo del gioco che andremo a realizzare:
Primo passaggio del gioco memory game in JavaScript
Innanzitutto occorre decidere la dimensione della matrice, nel nostro esempio realizzeremo una matrice 4 x 4. Quindi decidiamo come popolare ciascun elemento della matrice. Lo potremmo fare con dei numeri oppure con delle icone.
Scegliamo di utilizzare queste icone: https://html-css-js.com/html/character-codes/ e inseriamo alcune icone di animali. Dato che stiamo realizzando una matrice 4 x 4 mi serviranno 8 simboli, ripetuti 2 volte ciascuno.
Adesso dobbiamo generare un array random e quindi ci servirà creare una funzione che generi in maniera random gli elementi e li inserisca in un array. Per fare ciò utilizzeremo l'algoritmo Fisher-Yates Shuffle, chi vuole può approfondire al seguente link: https://en.wikipedia.org/wiki/Fisher%E2%80%93Yates_shuffle
function shuffle(a) {
let currentIndex = a.length;
let temporaryValue, randomIndex;
while (currentIndex !== 0) {
const randomIndex = Math.floor(Math.random() * currentIndex);
currentIndex -= 1;
temporaryValue = a[currentIndex];
a[currentIndex] = a[randomIndex];
a[randomIndex] = temporaryValue;
}
return a;
}
Secondo passaggio del gioco memory game in JavaScript
Il gioco avrà un timer per i secondi trascorsi, dunque creiamo una funzione apposita, dove appena la variabile dei secondi (s) arriva a 60 incrementiamo i minuti. Quando i minuti (m) arrivano a 60 allora incrementeremo le ore (h). Notiamo che è necessario creare una variabile globale (interval) per poi ripulirla ogni volta che avviamo il gioco.
let interval;
/*creiamo la variabile globale interval
per poterla poi ripulire ogni volta che si inizia il gioco.*/
function startTimer() {
let seconds = 0;
let minutes = 0;
interval = setInterval(() => {
timer.innerHTML = `Tempo: ${minutes} min ${seconds} sec`;
seconds++;
if (seconds === 60) {
minutes++;
seconds = 0;
}
if (minutes === 60) {
minutes = 0;
}
}, 1000);
}
Terzo passaggio del gioco memory game in JavaScript
Adesso realizziamo la funzione startGame che si occupa di far partire il tutto.
Utilizzeremo un array di appoggio (arrayComparison) per confrontare ogni volta le due carte scoperte.
Quindi quando parte il gioco creiamo innanzitutto l'array random di animali. Poi ripuliamo la variabile interval che tiene traccia del tempo trascorso e azzeriamo l'arrayComparison. Ripuliamo il contenuto del contenitore griglia e con un ciclo for creiamo un elemento div che all'interno contiene un altro elemento div con classe icon.
Facciamo partire il timer e per ogni card cliccata facciamo partire la funzione displayIcon:
function startGame() {
clearInterval(interval);
arrayComparison.length = 0;
const arrayShuffle = shuffle(arrayAnimali);
const lista = document.getElementById('griglia');
while (lista.hasChildNodes()) {
lista.removeChild(lista.firstChild);
}
for (let i = 0; i < 16; i++) {
const box = document.createElement('div');
const element = document.createElement('div');
element.className = 'icon';
document.getElementById('griglia').appendChild(box).appendChild(element);
element.innerHTML = arrayShuffle[i];
}
startTimer();
const icon = document.getElementsByClassName("icon");
const icons = [...icon];
for (let i = 0; i < icons.length; i++) {
icons[i].addEventListener("click", displayIcon);
icons[i].addEventListener("click", openModal);
}
}
Facciamo partire questa funzione al click del pulsante start o quando si carica la pagina html.
document.body.onload = startGame();
Quarto passaggio del gioco memory game in JavaScript
La funzione displayicon legge tutte le icone caricate e attiva per ciascuna carta scoperta la classe show. Inoltre inserisce la carta scoperta nell'arrayComparison. Quindi determina la lunghezza dell'arrayComparison e se è due confronta le carte, se uguali aggiunge le classi find per attivare l'effetto a rotazione e disabled per disabilitare il click.
Se non sono uguali dopo 700 millisecondi rimuove la classe show:
Pensiamo adesso alla finestra modale che appare quando abbiamo indovinato tutte le combinazioni:
const modal = document.getElementById("modal");
const timer = document.querySelector(".timer");
function openModal() {
if (iconsFind.length === 16) {
clearInterval(interval);
modal.classList.add("active");
document.getElementById("tempoTrascorso").innerHTML = timer.innerHTML;
closeModal();
}
}
function closeModal() {
closeicon.addEventListener("click", function (e) {
modal.classList.remove("active");
startGame();
});
}
Infine la funzione playAgain che ci consente di riavviare il gioco e chiudere la finestra modale:
function playAgain(){
modal.classList.remove("active");
startGame();
}
Pagina html del gioco memory game
Nella pagina html predispongo semplicemente la sezione griglia dove si inseriranno tutte le carte, la sezione che contiene il pulsante per ricominciare il gioco ed il tempo.
Data una stringa, composta da una quantità indefinita di parole, trovare la parola più lunga in JavaScript.
In questa breve lezione propongo varie soluzioni all’algoritmo proposto, al fine di presentare diversi ragionamenti logici.
Parola più lunga in JavaScript – prima soluzione
Partiamo quindi da una semplice frase di esempio:
const frase = 'Fare coding è divertente.';
Dopo, con il metodo split, creiamo un array con ciascuna parola. Ricordiamo dunque che al metodo split passiamo uno spazio vuoto per definire la suddivisione delle parole in un array.
const parole = frase.split(' ');
console.log(parole);
Nella console del nostro browser vedremo come risultato un array di 4 elementi: (4) [“Fare”, “coding”, “è”, “divertente.”]
Adesso dobbiamo determinare quali delle seguenti parole è più lunga. Quindi inizializziamo il valore massimo alla prima parola e dopo, con un ciclo for controlliamo se la lunghezza delle altre parole è maggiore di quella inziale. Se la condizione si verifica sostituiamo il valore massimo, altrimenti non facciamo nulla.
let max = parole[0];
for(let i = 0; i < parole.length; i++){
if(parole[i].length > max.length ){
max = parole[i];
}
}
console.log('la parola più lunga della frase è: ' + max);
Parola più lunga in JavaScript – seconda soluzione
Analizziamo l’algoritmo per cercare un’altra possibile soluzione. Infatti ci viene in mente che se ordiniamo l’array in modo che gli elementi che hanno una lunghezza maggiore siano posizionati per primi, allora basterà estrapolare il primo elemento per determinare la parola più lunga.
Per fare ciò utilizzeremo quindi il metodo sort sugli array e gli passeremo come parametro una funzione, come abbiamo fatto nella seguente lezione: sort in JavaScript.
const frase = 'Fare coding è divertente';
const parole = frase.split(' ');
const paroleLunga = parole.sort(function(a, b) {
return b.length - a.length;
});
console.log(paroleLunga[0]);
Con la funzione passata all’algoritmo sort realizziamo un ordinamento in base alla lunghezza decrescente di ciascuna parola. Quindi per ottenere la parola più lunga basterà semplicemente stampare il primo elemento.
Conclusioni
Chiaramente queste sono solo delle possibili soluzioni alla ricerca della parola più lunga in JavaScript, proponete pure la vostra soluzione.
In questo tutorial verificheremo se una parola è palindroma in JavaScript.
Per risolvere questo algoritmo possiamo utilizzare varie soluzioni.
Utilizzo del metodo reverse per il calcolo della parola palindroma in JavaScript
In questa prima soluzione, la più semplice, ci appoggeremo al metodo reverse di JavaScript per verificare se la parola presa in input è palindroma.
Ma il metodo reverse si applica ad un array, dunque la soluzione è proprio quella di trasformare la stringa in un array. Il tutorial inerente il metodo reverse lo trovate al seguente link: metodo reverse sugli array.
Quindi utilizzeremo innanzitutto il metodo split per suddividere il testo in sottostringhe. Ricordiamo che, se utilizziamo il metodo indicando tra parentesi gli apici vuoti, otteniamo un array che contiene le lettere della parola.
Dunque supponendo di avere la seguente parola in input:
Quindi dobbiamo solo confrontare la parola iniziale con quella invertita per verificare se è palindroma, per fare ciò utilizzeremo semplicemente un’istruzione condizionale.
if(parola === parolaInvertita){
console.log('la parola è palindroma');
} else {
console.log('la parola non è palindroma');
}
In questo caso avremmo in output: ‘la parola non è palindroma’ in quanto fa distinzione tra lettere maiscuole e minuscole.
Potremmo allora utilizzare toLowerCase() per convertire la parola iniziale in minuscolo. Di seguito il programma completo:
const parola = 'osso';
let parolaDivisa = parola.toLowerCase().split('');
parolaDivisa = parolaDivisa.reverse();
const parolaInvertita = parolaDivisa.join('');
if(parola === parolaInvertita){
console.log('la parola è palindroma');
} else {
console.log('la parola non è palindroma');
}
Il tutto si potrebbe risolvere con l’utilizzo di una funzione per poterla poi utilizzare su altri casi:
const parola = 'osso';
const parolaInversa = invertiParola(parola);
if(parola === parolaInversa){
console.log('la parola è palindroma');
} else {
console.log('la parola non è palindroma');
}
function invertiParola(str){
const strInversa = str.toLowerCase().split('').reverse().join('');
return strInversa;
}
Parola palindroma in JavaScript – seconda soluzione
Come vi dicevo, la soluzione presentata sopra non è l’unico modo per risolvere l’algoritmo. Possiamo trovare una soluzione che invece di utilizzare i metodi appena visti sopra, cerchi di prendere lettera per lettera e poi la ricomponga al contrario.
Quindi ci servirà un’istruzione ciclica sulla lunghezza della parola che ad ogni iterazione estrapoli ciascuna lettera.
Dunque con un ciclo while che scorre la parola partendo dalla fine, estraiamo ciascun carattere e lo inseriamo in una variabile. Dopo, con un’istruzione condizionale, verifichiamo se la parola presa in input è palindroma.
const parola ='osso';
let carattere;
let parolaInversa = '';
let i = parola.length - 1;
while (i >= 0) {
carattere = parola[i];
parolaInversa += carattere;
console.log(carattere);
i--;
}
console.log(parolaInversa);
if (parola === parolaInversa) {
console.log('La parola è palindroma');
} else {
console.log('La parola non è palindroma');
}
Possiamo al solito sviluppare una funzione così da riutilizzarla all’occorrenza:
const parola ='otto';
let parolaInversa = invertiParola(parola);
if (parola === parolaInversa){
console.log('la parola è palindroma');
} else {
console.log('la parola non è palindroma');
}
function invertiParola(str){
let parolaInversa = '';
let i = str.length - 1;
while (i >= 0) {
parolaInversa += str[i];
i--;
}
return parolaInversa;
}
Funzione ricorsiva per verificare se una parola è palindroma in JavaScript
Propongo adesso un’altra soluzione all’algoritmo utilizzando una funzione ricorsiva. Utilizzeremo anche i metodi per le stringhe, substring e charAt.
function invertiParola(str) {
if (str !== "")
return invertiParola(str.substr(1)) + str.charAt(0);
else
return ""; //quando terminerà l'estrazione delle lettere
}
console.log(invertiParola("coding"));
Quindi utilizzeremo delle chiamate nidificate. Quando richiamo invertiParola su coding, otterrò dunque questo risultato:
1 – invertiParola("coding") -
substring(1) vuol dire che parte dalla pos. 1 fino alla fine
+ charAt(0) cioè la prima lettera,
quindi si ottiene il return di invertiParola("oding") + "c"
... e così via ...
6 – invertiParola("g") ritornerà invertiParola("") + "g"
Quindi nella seconda parte si avrà
return invertiParola("") + "g" = "g"
return invertiParola("g") + "n" = "g" + "n"
... e così via ...
return invertiParola("oding") + "c" = "g" + "n" + "i" + "d" + "o" + "c"
In questa lezione abbiamo affrontato alcune possibili soluzioni alla parola palindroma in JavaScript, chiaramente ce ne possono essere tante altre, provate pure a sviluppare al vostra.
In questa lezione propongo dei semplicissimi esercizi sulle stringhe in JavaScript, al fine di approfondire tutti i metodi e le proprietà precedentemente studiate.
Esercizi sulle stringhe in JavaScript – primo esercizio
Creare un programma che cerchi in una frase la sotto-stringa composta dalle parole coding e creativoo. Se trova entrambe le parole restituisce la frase, altrimenti stampa come risultato parole non trovate.
Innanzitutto memorizziamo in una variabile una stringa:
let str = "Fare coding creativo è bello";
Dopo utilizziamo il metodo indexOf che ricordiamo restituisce -1 se non trova una stringa, altrimenti restituisce la posizione di inizio della stringa.
Quindi se i due indici sono diversi da -1 stampiamo in console la frase completa, altrimenti stampiamo parole non trovate:
if (codingIndex != -1 && creativoIndex != -1) {
console.log(str);
} else {
console.log('parole non trovate');
}
Se utilizzassimo le funzioni in JavaScript, che spiegherò più avanti, avremmo il vantaggio di riutilizzare il codice su più stringhe.
Ecco dunque una possibile implementazione nella quale prendiamo due frasi diverse a cui applicheremo la funzione cerca che prende come argomento una stringa:
const frase1 = 'Fare coding creativo è bello';
const frase2 ='Oggi splende il sole';
const risultato = cerca(frase1);
console.log(risultato);
const risultato2 = cerca(frase2);
console.log(risultato2);
function cerca(stringa){
const codingIndex = stringa.indexOf('coding');
const creativoIndex = stringa.indexOf('creativo');
if (codingIndex != -1 && creativoIndex != -1) {
return stringa;
} else {
return 'la stringa non è presente';
}
}
Esercizi sulle stringhe in JavaScript – secondo esercizio
Prendere in input due semplici stringhe che contengono una sola parola, dopo restituire le due stringhe concatenate, scambiando i primi due caratteri di ciascuna stringa.
Controlliamo che le stringhe abbiano almeno 2 caratteri, visualizzando un messaggio di errore nel momento in cui non li hanno. Per questo scopo utilizziamo la proprietà length di JavaScript sulle stringhe.
Altrimenti sostituiamo le seconde lettere di ciascuna parola, utilizzando i metodi slice e substring sulle stringhe.
Anche in questo caso possiamo utilizzare una funzione per richiamarla più volte. Dunque creo una funzione changeLetter che prende come argomenti due parametri, p1 e p2.
const parola1 = 'Nanno';
const parola2 = 'Coro';
function changeLetter(p1,p2){
if (p1.length < 3 || p2.length < 3 ) {
return 'attenzione le stringhe inserite non sono più lunghe di 2 caratteri';
} else {
const stringa1 = p1.slice(0, 1) + p2.slice(1,2) + p1.substring(2);
const stringa2 = p2.slice(0, 1) + p1.slice(1,2) + p2.substring(2);
return stringaUnita = stringa2 + ' ' + stringa1;
}
}
Commenti recenti