Spaces:

ServerX
/

hangman-game

Sleeping

App Files Files Community

ServerX commited on Feb 4

Commit

b0f31f8

verified ·

1 Parent(s): 997ea94

Upload index.html

Browse files

Files changed (1) hide show

index.html +232 -0

index.html ADDED Viewed

	@@ -0,0 +1,232 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
+  <title>Gioco dell'Impiccato</title>
+  <style>
+    * {
+      box-sizing: border-box;
+      touch-action: manipulation;
+    }
+    body {
+      font-family: 'Arial', sans-serif;
+      text-align: center;
+      margin: 0;
+      padding: 15px;
+      background-color: #f5f5f5;
+      line-height: 1.6;
+    }
+    h1 {
+      color: #333;
+      font-size: 1.5rem;
+      margin-bottom: 20px;
+    }
+    #game-container {
+      background-color: #fff;
+      padding: 20px;
+      border-radius: 10px;
+      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
+      max-width: 100%;
+      width: 100%;
+      margin: 0 auto;
+    }
+    #word-display {
+      font-size: 1.8rem;
+      margin-bottom: 20px;
+      font-weight: bold;
+      letter-spacing: 5px;
+    }
+    #word-entry, #guess-input-container {
+      display: flex;
+      flex-direction: column;
+      align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
+    }
+    #word-input, #guess-input {
+      width: 100%;
+      padding: 10px;
+      font-size: 16px;
+      border: 1px solid #ddd;
+      border-radius: 5px;
+      text-align: center;
+    }
+    #submit-word-btn, #submit-btn, #reset-btn {
+      width: 100%;
+      padding: 12px;
+      font-size: 16px;
+      cursor: pointer;
+      background-color: #4caf50;
+      color: #fff;
+      border: none;
+      border-radius: 5px;
+      transition: background-color 0.3s;
+      text-transform: uppercase;
+      font-weight: bold;
+    }
+    #submit-word-btn:active, #submit-btn:active, #reset-btn:active {
+      background-color: #45a049;
+    }
+    #result {
+      font-size: 1rem;
+      margin-top: 15px;
+      color: #e74c3c;
+      font-weight: bold;
+    }
+    label {
+      margin-bottom: 10px;
+      font-weight: bold;
+    }
+    @media (max-height: 600px) {
+      body {
+        padding: 10px;
+      }
+      h1 {
+        font-size: 1.2rem;
+        margin-bottom: 10px;
+      }
+      #game-container {
+        padding: 15px;
+      }
+    }
+  </style>
+</head>
+<body>
+  <h1>Benvenuto al Gioco dell'Impiccato!</h1>
+  <span id="myMessage" style="font-size: medium; white-space: pre;">Questo gioco lo potrai giocare solo in locale con un tuo amico e familiare</span>
+  <div id="game-container">
+    <div id="word-entry">
+      <label for="word-input">Inserisci una parola:</label>
+      <input type="password" id="word-input" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false">
+      <button id="submit-word-btn" onclick="startGame()">Inizia il gioco</button>
+    </div>
+    <div id="word-display"></div>
+    <div id="guess-input-container">
+      <label for="guess-input">Inserisci una lettera o la risposta completa:</label>
+      <input type="text" id="guess-input" autocomplete="off" autocorrect="off" autocapitalize="none" spellcheck="false">
+      <button id="submit-btn" onclick="checkGuess()">Indovina</button>
+    </div>
+    <div id="result"></div>
+    <button id="reset-btn" onclick="resetGame()">Ricomincia</button>
+  </div>
+  <div id="cast-section" style="margin-top: 20px;">
+    <button onclick="generateCastLink()">Genera Link per Visualizzare il Gioco</button>
+    <p id="cast-link"></p>
+  </div>
+  <script>
+    document.getElementById('word-input').addEventListener('keyup', function(event) {
+      if (event.key === 'Enter') {
+        startGame();
+      }
+    });
+    document.getElementById('guess-input').addEventListener('keyup', function(event) {
+      if (event.key === 'Enter') {
+        checkGuess();
+      }
+    });
+    var parolaDaIndovinare = '';
+    var lettereIndovinate = [];
+    var tentativiRimasti = 6;
+    function startGame() {
+      parolaDaIndovinare = document.getElementById('word-input').value.toUpperCase();
+      if (/^[a-zA-Z]+$/.test(parolaDaIndovinare) && parolaDaIndovinare.length > 0) {
+        lettereIndovinate = new Array(parolaDaIndovinare.length).fill('_');
+        displayWord();
+        document.getElementById('word-entry').style.display = 'none';
+      } else {
+        alert('Inserisci una parola valida (almeno un carattere).');
+      }
+    }
+    function displayWord() {
+      document.getElementById('word-display').innerHTML = lettereIndovinate.join(' ');
+    }
+    function checkGuess() {
+      var inputElement = document.getElementById('guess-input');
+      var guess = inputElement.value.toUpperCase();
+      inputElement.value = '';
+      if (guess.length > 1) {
+        if (guess === parolaDaIndovinare) {
+          lettereIndovinate = parolaDaIndovinare.split('');
+          displayWord();
+          document.getElementById('result').textContent = 'Complimenti! Hai indovinato la parola!';
+          disableGuessing();
+        } else {
+          tentativiRimasti -= 2;
+          updateGameStatus();
+        }
+      } else {
+        var letteraTrovata = false;
+        for (var i = 0; i < parolaDaIndovinare.length; i++) {
+          if (parolaDaIndovinare[i] === guess) {
+            lettereIndovinate[i] = guess;
+            letteraTrovata = true;
+          }
+        }
+        displayWord();
+        if (!letteraTrovata) {
+          tentativiRimasti--;
+        }
+        updateGameStatus();
+      }
+    }
+    function updateGameStatus() {
+      document.getElementById('result').textContent = tentativiRimasti > 0 ?
+        'Tentativi rimasti: ' + tentativiRimasti :
+        'Mi dispiace, hai esaurito i tentativi. La parola era: ' + parolaDaIndovinare;
+      if (lettereIndovinate.join('') === parolaDaIndovinare || tentativiRimasti <= 0) {
+        disableGuessing();
+      }
+    }
+    function disableGuessing() {
+      document.getElementById('guess-input').disabled = true;
+      document.getElementById('submit-btn').disabled = true;
+    }
+    function resetGame() {
+      parolaDaIndovinare = '';
+      lettereIndovinate = [];
+      tentativiRimasti = 6;
+      document.getElementById('word-entry').style.display = 'block';
+      document.getElementById('word-input').value = '';
+      document.getElementById('guess-input').disabled = false;
+      document.getElementById('submit-btn').disabled = false;
+      document.getElementById('word-display').innerHTML = '';
+      document.getElementById('result').textContent = '';
+    }
+    // Funzione per generare un link che può essere usato in una rete locale
+    function generateCastLink() {
+      var ipAddress = window.location.hostname; // Ottieni l'IP locale
+      var port = 8080; // Puoi cambiarlo con una porta disponibile
+      var link = 'http://' + ipAddress + ':' + port + '/index.html'; // Aggiungi il percorso del gioco
+      document.getElementById('cast-link').textContent = 'Link per visualizzare il gioco: ' + link;
+    }
+  </script>
+</body>
+</html>