Gioco confronta numeri in JavaScript

In questa lezione vi spiego passo passo come realizzare un semplice gioco che confronta i numeri in JavaScript.

Lo scopo di questo gioco, adatto a far giocare dei bambini della primaria, è quello di approfondire l’utilizzo delle funzioni, il metodo getElementById, la classe className, ecc.

Innanzitutto provate il gioco base cliccando sul pulsante gioca in basso, oppure andate al seguente link per il gioco completo: gioco confronta numeri.

Gioca con il confronto tra numeri!

Gioco confronta numeri in JavaScript – Implementazione

Innanzitutto costruiamo la sezione html del gioco. Inseriamo un div che conterrà il primo numero, poi una select con le opzioni (maggiore, minore, uguale) e poi un altro div che contiene il secondo numero.

Inseriamo poi due pulsanti, uno per verificare la correttezza delle risposte e l’altro per far partire il gioco.

Infine sotto inseriamo un div in cui scriveremo il risultato.

Ecco dunque una possibile implementazione:

  

Personalizziamo adesso il codice html con il CSS.

Creiamo le classi per i numeri, per la select e per i pulsanti. Dopo creiamo anche le classi visible e invisible per nascondere o visualizzare gli elementi nella pagina web.


#game{
     border-radius: 5px;
     background-color: #3889c4;
     margin-top: 30px;
     padding: 20px;
     max-width: 500px;
     margin: auto;
     text-align: center;
}
#number_one, #number_two{
     color: white;
     font-size: 28px;
     text-align: center;
     padding:10px;
}
select#confronto{
     color: white;
     font-size: 26px;
     text-align: center;
     margin-top: 5px;
     padding: 5px;
     background-color: #ffc83d;
     border: 1px solid #3889c4;
     border-radius: 10px;
     cursor: pointer;
}
#button-verifica, #button-play{
     color: white;
     font-size: 26px;
     text-align: center;
     margin-top: 25px;
     padding: 10px;
     background-color: #ffc83d;
     border: 1px solid #3889c4;
     border-radius: 10px;
     cursor: pointer;
 }     
#button-verifica:hover{
     background-color: #16486c;
}
div#risultato{
     max-width: 300px;
     margin: 10px auto;
     border: 1px solid #87c6f4;
     border-radius: 15px;
     background-color: #87c6f4;
     padding: 10px;
     font-size: 26px;
 }
.invisible{
     display: none;
 }
.visible{
     display: inline;
}

Programmiamo adesso la parte di JavaScript.

Innantitutto creiamo lo script del pulsante gioca. Appena si clicca sul pulsante dobbiamo far si che si generino due numeri random e si posizionino nei div opportuni.


let num1;
let num2;
let tentativi = 3;
let punteggio = 0;

document.getElementById("button-play").addEventListener("click", gioca);

function random_number() {
    const num = Math.round(Math.random() * 100);
    return num;
}

function gioca() {
    num1 = random_number();
    num2 = random_number();
    
    document.getElementById('number_one').innerHTML = num1;
    document.getElementById('number_two').innerHTML = num2;

    document.getElementById('button-play').className = "invisible";
    document.getElementById('button-verifica').className = "visible ";
    document.getElementById('confronto').className = "visible";
   
  }

Gestiamo il controllo della risposta. Impostaimo 3 tentativi in tutto e ad ogni click sul pulsante verifica decrementiamo la variabile tentativo di 1. Poi controlliamo se i numeri soddisfano la condizione scelta. Se si, assegniamo un punto, altrimenti diciamo che ha sbagliato a rispondere.


document.getElementById("button-verifica").addEventListener("click", controllo);

function controllo() {
    tentativi -= 1;

    let confronto = document.getElementById('confronto').value;

    if (num1 == num2 && confronto == "uguale" || num1 < num2 && confronto == "minore" || num1 > num2 && confronto == "maggiore"){
        punteggio += 1;
        document.getElementById("risultato").innerHTML = 'Ottimo! Punti: ' + punteggio;    
      } else {
        document.getElementById("risultato").innerHTML = 'Hai sbagliato, concentrati!';
      } 
      if(tentativi > 0){
        gioca()
      } else {
        document.getElementById("risultato").innerHTML = 'Il punteggio totale è: ' + punteggio;
        document.getElementById("button-play").innerHTML = 'Rigioca';
        document.getElementById('number_one').innerHTML = " ";
        document.getElementById('number_two').innerHTML = " ";
        document.getElementById('button-verifica').className = "invisible ";
        document.getElementById('confronto').className = "invisible ";
        document.getElementById('button-play').className = "visible";
        punteggio = 0;
        tentativi = 3;
      }
}

Chiaramente questa è solo una possibile implementazione del gioco confronta numeri in JavaScript, divertitevi a creare la vostra versione.

Alcuni link utili

Indice tutorial JavaScript

Il linguaggio JavaScript

Come utilizzare JavaScript alert

Utilizzare JavaScript prompt

Variabili in JavaScript

Gioco indovina numero in JavaScript

Gioco della morra cinese in JavaScript

Continua la lettura su: https://www.codingcreativo.it/gioco-confronta-numeri-in-javascript/ Autore del post: Coding Creativo Fonte: https://www.codingcreativo.it

Articoli Correlati

DAL CNR IL VIDEOGAME PER INSEGNARE LA CYBERSECURITY AI RAGAZZI, 'NABBOVALDO E IL RICATTO DAL CYBERSPAZIO'

Grazie a Caldo Dutto per la segnalazione! Chiedo scusa per il ritardo del post, ma la mail era finita nello spam :)Un videogame educativo sulla cybersecurity, progettato con il CNR! In allegato le foto e un trailer qui: https://www.youtube.com/watch?v=YQy8pqol36cAl link www.youtube.com/watch?v=qeWx_nQXgdw una cronaca della presentazione a Cinecittà e una intervista alla dott.ssa Giorgia Bassi, curatrice del progetto.Presentato al RomeVideoGameLab, “Nabbovaldo e il ricatto dal cyberspazio”, videogioco per imparare la Cybersecurity.Il gaming in classe ora diventa didattica.Giocare a scuola sarà addirittura consigliato,grazie al Serious Game della Ludoteca del Registro.it, progetto in seno al CNRPresentato, in occasione del RomeVideoGameLab – quest’anno dedicata a “Umano e digitale” – il videogioco didattico “Nabbovaldo e il ricatto dal cyberspazio”, pensato per avvicinare gli alunni tra gli 11 e i 13 anni ai temi della cybersecurity e per migliorare i comportamenti nell’utilizzo della Rete. Una cronaca video della presentazione, realizzata da Giorgia Bassi e Beatrice Lami e che si è tenuta agli Studi di Cinecittà, al link www.youtube.com/watch?v=qeWx_nQXgdw. Un’avventura interattiva, tutta da giocare in aula: non una distrazione, ma anzi una best practice, quella di scaricare un’App e usare lo smartphone a scuola.Si tratta della nuova iniziativa della Ludoteca del Registro.it, che ha come obiettivo quello di diffondere la cultura di internet presso le giovani generazioni. La Ludoteca è un progetto del Registro.it, – l’organismo che, in seno all’Istituto di informatica e Telematica del Consiglio Nazionale delle Ricerche di Pisa, da oltre trent’anni anni assegna e gestisce i domini a targa italiana. Ambienti, mappe, dialoghi, scenari multipli sono i contenuti – validati dai ricercatori del CNR – alla base del videogame che ha l’obiettivo di approfondire, tra i bambini e i ragazzi, le conoscenze legate al Web e la sicurezza online. “Nabbovaldo e il ricatto dal cyberspazio” è stato pensato come strumento didattico per gli insegnanti e come mezzo di apprendimento per gli studenti. Attraverso le modalità tipiche del videogame, infatti, ha l’obiettivo di insegnare, in modo ironico e inconsueto, termini informatici, nozioni di base e comportamenti corretti per navigare. La sezione “Nabbopedia”, inoltre, fornisce un mini-dizionario con le definizioni di alcuni termini tecnici come Trojan, Firewall, Adware, Antivirus, Troll, Ransomware, Scandisk e Spyware. Il gioco, fruibile sia singolarmente che mentre si fanno lezioni e laboratori, genera un punteggio finale che evidenzia la conoscenza dell’utente sui pericoli di Internet, con una speciale attenzione a social network, virus, truffe online, file sharing e netiquette.Sviluppato in collaborazione con Symmaceo e Grifo Multimedia – e disponibile su App Store di Apple e Google Play – è ispirato al fumetto “Nabbovaldo contro i PC zombie”, della collana “Comics & Science” edita dal Cnr, dove il protagonista, un adolescente sempre online ma ingenuo nell’affrontare i pericoli del cyberspazio, si muove a Internetopoli, la città della Rete. Come si evince dal trailer, al link https://www.youtube.com/watch?v=YQy8pqol36c, il videogioco racconta di Nabbo, di professione tuttofare, coinvolto in un’avventura con al centro un Ramsomware (un malware che estorce denaro) che terrà sotto scacco l’intera città e dovrà indagare cercando una soluzione.Infine, per divulgare il videogame nelle scuole italiane è prevista una guida per genitori e insegnanti e una formazione per i docenti. Il gioco, infatti, oltre alla modalità “single-player”, prevede una versione desktop Windows e MacOS per l’utilizzo didattico in classe. La metodologia proposta dalla Ludoteca del Registro.it sarà inoltre quella della “flipped classroom”, ovvero il momento di confronto in classe come base per un apprendimento attivo e collaborativo, ma anche con il coinvolgimento di studenti degli istituti superiori nel ruolo di “tutor” per gli alunni delle scuole di ordine inferiore.Per maggiori informazioni:www.ludotecaregistro.it/il-videogioco-nabbovaldo/ludoteca@registro.itwww.instagram.com/ludotecadelregistro.it/www.facebook.com/LudotecaRegistrowww.youtube.com/channel/UCQvCwo8lOHfe–od7f2TIpQ

Unità educativo didattiche di apprendimento per la settimana: la primavera, schede di grammatica e di analisi logica – Educare alla pace, alla libertà, alla fratellanza

E’ domenica, un’altra particolare e terribilmente triste domenica, e nonostante tutto ci si prepara per le lezioni da predisporre per la quarta settimana del mese di marzo. Il sito di didattica è ricco di argomenti per questo periodo e pertanto vi propongo alcune unità educativo didattiche che potrebbero risultare utili nelle varie attività di apprendimento. Quali argomenti possono essere utili questa settimana quale spunto per le lezioni? Il mese di marzo presenta scenari che offrono tantissimi spunti didattici i quali ricadono in modo estremamente positivo sulla sfera motivazionale del bambino e conseguentemente fanno leva sulla volontà di apprendere. Per la parte grammaticale il sito è ricco di proposte che vi propongo in toto. Non rimane che sfogliarle, potrebbero offrire qualche idea adatta per i vari percorsi educativo didattici di apprendimento. I post proposti tengono conto anche degli articoli che i docenti ricercano sul sito in questo periodo dell’anno scolastico. Eccovi i link da poter visionare:La primaveraLa primavera con la sua magnifica girandola di colori, suoni ed odori, si presta particolarmente per numerose attività educativo didattiche di apprendimento. Nel sito è possibile visionare numerosi post, relativi a questo argomento, che suscitano l’interesse delle bambine e dei bambini facili da consultare, ed eventualmente stampare, con le relative schede per la lettura, l’analisi e la comprensione del testo. Eccovi i link da poter visionare:”Arriva la primavera” – Dettato – Analisi, comprensione, ed interpretazione del testoRacconto di primavera: “La pioggia e le farfalle” – Analisi, comprensione ed interpretazione, del testo”La primavera” – Dettato – Analisi ed interpretazione del testoRitorna la primavera – Brano tratto da “Il Gigante Egoista” di Oscar Wilde – Lettura e comprensione del testo – Approfondimenti grammaticaliLa canzone della chiocciola di Jacques Prevert – Lettura e comprensione del testo.Primavera: “Ode a un ciuffo di violette” poesia di Pablo Neruda – Spunti grammaticali”I dodici mesi”, filastrocca di Gianni Rodari – Analisi ed interpretazione del testoPoesie, racconti, temi e dettati, che potrebbero interessarti:”I doni”, le quattro stagioni in una filastrocca di Angiolo Silvio NovaroPrimavera: “Ode a un ciuffo di violette” poesia di Pablo Neruda – Spunti grammaticaliLe quattro stagioni: filastrocche a rima baciata ed a rima alternataAprile, dolce dormire di Ugo BettiPrimavera in montagnaAprile di Aldo PalazzeschiPoesia di primaveraE’ dolce primavera di VirgilioPrimavera di Giovanni PascoliMarzo di Angiolo Silvio NovaroBrilla nell’aria di Giacomo LeopardiPrimavera di Stefano Bordiglioni”Una goccia di pioggia” di Mario LodiPasqua di Ada NegriAria di festa (tratto da i Malavoglia) di Giovanni VergaAlleluja di Angiolo Silvio NovaroFiabe antiche: “Il drago e l’uovo di Pasqua”Filastrocche di maggioFilastrocche d’aprileFilastrocche di marzoDettato: “Aspetti della primavera in campagna”. Spunti grammaticali.Le quattro stagioni: “La primavera” di Antonio Vivaldi. Suggerimenti per la didattica.Che dice la pioggerellina di marzo? di Angiolo Silvio NovaroRacconto di primaveraI mesi dell’anno di Angiolo Silvio NovaroLa primavera di Simone SchermiLa canzone della chiocciola di Jacques Prevert – Lettura e comprensione del testoLa signora primavera di Ercole BonjeanFilastrocca di primavera di Gianni RodariE’ arrivata la primavera!La primaveraI colori dei fioriFilastrocca di primavera di Ercole Bonjean”Saluto al sereno” filastrocca a rima baciata di Angiolo Silvio NovaroEducare alla paceNon solo in questo tragici giorni ma in ogni istante la scuola può e deve lottare per il rispetto dei valori fondamentali che la vita in comune comporta. Educare alla pace, la libertà, l’uguaglianza tra uomini e donne, tra tutti le persone “senza distinzioni” di alcun tipo. Sono questi obiettivi irrinunciabili a cui la società tutta deve dare il proprio contributo. Le bambine e i bambini, le ragazze e i ragazzi, si rivelano molto sensibili a questi argomenti che incidono sulla sfera motivazionale, fanno da leva alla volontà, e offrono spunti straordinariamente coinvolgenti, trasversali a tutte le materie oggetto di studio. Educare ed istruire sono due facce della stessa medaglia.(e. b.)Dichiarazione ONU sul diritto alla pace (2016)Articolo 1Ognuno ha il diritto di godere la pace in modo che tutti i diritti umani sono promossi e protetti e lo sviluppo è pienamente realizzato.Articolo 2Gli stati devono rispettare, implementare e promuovere l’eguaglianza e la non discriminazione, la giustizia e lo stato di diritto e garantire la libertà dalla paura e dal bisogno quali misure per costruire la pace dentro e fra le società.Articolo 3Gli Stati, le Nazioni Unite e le agenzie specializzate, in particolare l’Organizzazione delle Nazioni Unite per l’Educazione, la Scienza e la Cultura devono assumere appropriate misure sostenibili per implementare la presente Dichiarazione. Le organizzazioni internazionali, regionali, nazionali e locali e la società civile sono incoraggiate a prestare supporto e assistenza nell’implementazione della presente Dichiarazione.Articolo 4Saranno promosse le istituzioni internazionali e nazionali di educazione per la pace al fine di rafforzare fra tutti gli esseri umani lo spirito di tolleranza, dialogo, cooperazione e solidarietà. Per questo scopo, l’Università per la Pace deve contribuire al grande compito universale di educare per la pace impegnandosi nell’insegnamento, nella ricerca, nella formazione postuniversitaria e nella disseminazione della conoscenza.Articolo 5Nulla della presente Dichiarazione sarà interpretato in senso contrario agli obiettivi e ai principi delle Nazioni Unite. Le disposizioni contenute nella presente Dichiarazione devono essere intese in linea con la Carta delle Nazioni Unite, la Dichiarazione Universale dei Diritti Umani e i pertinenti strumenti internazionali e regionali ratificati dagli Stati.Quali percorsi educativo didattici possono essere utili perché gli alunni interiorizzino i valori fondamentali che devono regolare la vita in comune? Il sito per la scuola primaria è ricco di racconti, poesie, filastrocche, temi, che mi auguro possano favorire un approccio positivo a questi argomenti fondamentali per il vivere insieme:Giornata della pace della fraternità e del dialogo tra appartenenti a culture e religioni diverse (4 ottobre)Scuola e immigrazione: poesie, filastrocche, temi.Festa della Repubblica, 2 giugnoCome mai gli uomini muoiono in guerra?Tema: Racconto la mia esperienza con i compagni di scuola stranieriBreve unità didattica sul Natale: “Se io fossi Gesù Bambino vorrei che … “.San Francesco: attività educativo didattiche per la scuola primaria.”Lettera a Gesù” poesia di Mario LodiPoesia per la pace, di Berthold BrechtAttività educativo didattiche per la scuola primaria sul tema dell’immigrazione: racconti, poesie, filastrocche.Tema: “L’amicizia” di Francesca JupeUna poesia per la pace: “La pelle”Il gelato alla pacePoesie e filastrocche di Natale per bambini della scuola primariaFesta di Ognissanti: poesia per la Pace – Attribuita a San Francesco d’AssisiLa recita nella scuola primaria: “C’era un ragazzo che come me amava i Beatles e i Rolling Stones”. Una canzone per la pace.La leggenda della mimosa – Un racconto per l’8 marzo, festa della donnaLa leggenda dell’estate di San Martino – Percorsi educativo didattici di apprendimento”I due volti della Pasqua” poesia di Ercole Bonjean”Un giorno qualunque”, poesia di Ercole Bonjean”Vola colomba bianca” poesia di Ercole Bonjean”Ad un passo dalla costa” (proposta di lettura sul tema dell’immigrazione per la classe quinta della scuola primaria)Il Cantico delle Creature – San Francesco d’Assisi (adattamento del testo per la scuola primaria)”Il giorno più bello”, poesia di Ercole Bonjean”Io amo la Terra” poesia”Per non dimenticare” (la giornata della memoria)”Il Barbone aristocratico” “Un albero speciale” “Il mio maestro”Una filastrocca per l’ambiente”La Befana e il Befanone””Un giorno qualunque””Un regalo di Natale dal cielo”Nel giorno di San Francesco”Nuovo Anno”Lettera di Babbo Natale ai bambiniSchede di grammatica e di analisi logicaScheda di grammatica: i pronomi – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda di grammatica: le preposizioni semplici ed articolate – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda di grammatica: le congiunzioni – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda di grammatica: le esclamazioni o interiezioni – Spiegazioni, esercizi di grammatica, prove di verifica.Scheda di grammatica: gli avverbi – Spiegazioni, prove di verifica, ed esercizi di analisi grammaticaleScheda  di grammatica – Le coniugazioni dei verbi: il modo infinitoScheda di grammatica – Il modo indicativo dei verbi: il tempo presenteScheda di grammatica – Il modo indicativo dei verbi: il passato prossimoScheda di grammatica – il modo indicativo dei verbi: il trapassato prossimo e il trapassato remotoScheda di grammatica – Il modo indicativo dei verbi: l’imperfettoScheda di grammatica – Il modo indicativo dei verbi: il passato remotoScheda di grammatica – Il modo indicativo dei verbi: il futuro sempliceScheda di grammatica – I verbi al modo condizionaleScheda di grammatica – I verbi al modo congiuntivoScheda di grammatica – I verbi irregolariScheda di grammatica – I verbi indefinitiScheda di grammatica – I verbi transitivi e intransitiviScheda di grammatica – La forma attiva e passiva del verboScheda di grammatica – I verbi riflessiviScheda di grammatica – I verbi impersonaliTi potrebbero interessare:Spiegazioni ed esercizi di grammaticaSpiegazioni ed esercizi di analisi logicaSchede di analisi logicaChe cos’è l’analisi logica e perché la studiamoIl soggetto e il predicato: l’enunciato minimo, spiegazioni ed eserciziIl soggetto e il predicato: spiegazioni ed eserciziIl soggetto e il predicato: esercizi di ribadimentoIl soggetto sottinteso: spiegazioni ed eserciziIl soggetto: eserciziIl soggetto (spiegazione ed esercizi per la classe quinta)L’attributo, l’apposizioneIl predicato verbale ed il predicato nominaleIl predicato verbaleIl predicato nominaleIl predicato verbale e nominale: eserciziIl complemento oggetto o direttoI complementi indirettiIl complemento di specificazioneIl complemento di termineIl complemento di tempoIl complemento di materiaIl complemento di mezzo Il complemento di causaIl complemento di modoIl complemento di origineIl complemento di luogoIl complemento predicativo del soggetto e dell’oggettoIl complemento d’agente e di causa efficienteEsercizi di analisi logicaEsercizi di analisi logicaEsercizi di analisi logicaVerificheVerificheVerificheTutti i post di analisi logicaRicordo alle colleghe ed ai colleghi che il motore di ricerca, presente in home page, è ricco di tantissimi argomenti che possono risultare utili per le varie attività didattiche. Buon proficuo lavoro dal maestro Ercole!

Vuoi rimanere aggiornato sulle nuove tecnologie per la Didattica e ricevere suggerimenti per attività da fare in classe?

Sei un docente?

soloscuola.it la prima piattaforma
No Profit gestita dai

Volontari Per la Didattica
per il mondo della Scuola. 

 

Tutti i servizi sono gratuiti. 

Associazione di Volontariato Koinokalo Aps

Ente del Terzo Settore iscritta dal 2014
Tutte le attività sono finanziate con il 5X1000