Gioco bandiere by @Luigi98 - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<select>Usato per creare un menu a tendina.
titleIndica informazioni aggiuntive riguardo un elemento HTML
srcIndica la provenienza di una risorsa esterna (tramite URL).
nameDetermina il nome degli elementi HTML o fornisce dati su un attributo associato.
<br>Inserisce uno spazio vuoto tra due elementi HTML.
_topApre collegamenti ipertestuali nell'elemento parent assoluto

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

sinodo diocesano

Primo esercizio in classe

Prova javascript

4395-Indovina numero

Menu a tendina CSS

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html>
<head>
  <title>Indovina la nazione</title>
  <style>
    img {
      width: 200px;
      height: auto;
      margin: 10px;
    }
  </style>
</head>
<body>
  <h1>Indovina la nazione</h1>
  
  <div id="game-container">
    <button onclick="avviaGioco()">Avvia gioco</button>
    <div id="countdown">5:00</div>
    <img id="bandiera" />
    <input type="text" id="guess-input" placeholder="Inserisci la nazione" />
    <button id="bottone" onclick="controllaRisposta()">Invia</button>
    <p id="risultato"></p>
    <p id="punteggio"></p>
  </div>
  
  <script>
    var bandiere = [
      {nazione:	"Italia"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	it	.png"},
{nazione:	"Andorra"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	ad	.png"},
{nazione:	"Emirati Arabi"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	ae	.png"},
{nazione:	"Afghanistan"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	af	.png"},
{nazione:	"Antigua e Barbuda"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	ag	.png"},
{nazione:	"Anguilla"	,immagine:	"	https://translationsandmore.altervista.org/wp-content/uploads/2023/04/	ai	.png"},




      

          

       
      
      
      
      
   
      


      // Aggiungi altre bandiere qui
    ];
    var punteggio = 0;
    var countdownInterval;
    var countdownTimer = 300; // 5 minuti in secondi
    
    function avviaGioco() {
      document.getElementById("risultato").innerHTML = "";
      punteggio = 0;
      countdownTimer = 300;
      
      // Avvia il countdown
      countdownInterval = setInterval(updateCountdown, 1000);
      
      // Avvia il gioco
      generaBandieraCasuale();
      document.getElementById("countdown").innerHTML = "5:00";
    }
    
    function generaBandieraCasuale() {
      var indiceCasuale = Math.floor(Math.random() * bandiere.length);
      var bandieraCasuale = bandiere[indiceCasuale];
      document.getElementById("bandiera").src = bandieraCasuale.immagine;
      document.getElementById("bandiera").alt = bandieraCasuale.nazione;
    }
    
    function updateCountdown() {
      countdownTimer--;
      
      var minutes = Math.floor(countdownTimer / 60);
      var seconds = countdownTimer % 60;
      
      var countdownDisplay = document.getElementById("countdown");
      countdownDisplay.innerHTML = `${minutes.toString().padStart(2, '0')}:${seconds.toString().padStart(2, '0')}`;
      
      if (countdownTimer <= 0) {
        clearInterval(countdownInterval);
        countdownDisplay.innerHTML = "Tempo scaduto!";
        document.getElementById("guess-input").disabled = true;
        document.getElementById("risultato").innerHTML = "Gioco terminato! Punteggio finale: " + punteggio;
      }
    }
    
    function controllaRisposta() {
      var input = document.getElementById("guess-input").value.toLowerCase();
      var risultato = document.getElementById("risultato");
      var punteggioDisplay = document.getElementById("punteggio");
      var bandieraCorrente = document.getElementById("bandiera").alt.toLowerCase();
      
      if (input === bandieraCorrente) {
        punteggio++;
        risultato.innerHTML = "Risposta corretta! Hai guadagnato 1 punto.";
      } else {
        risultato.innerHTML = "Risposta errata! Non hai guadagnato punti.";
      }
      
      punteggioDisplay.innerHTML = "Punteggio: " + punteggio;
      
      // Pulisce l'input
      document.getElementById("guess-input").value = "";
      
      // Genera una nuova bandiera casuale
      generaBandieraCasuale();
    }
    document.getElementById("bottone").addEventListener("click", controllaRisposta);
    document.addEventListener("keypress", function(event) {
  if (event.key === "Enter") {
    controllaRisposta();
  }
});
  </script>
</body>
</html>

*{ }