Spaces:
Sleeping
Sleeping
Update index.html
Browse files- index.html +28 -3
index.html
CHANGED
|
@@ -19,6 +19,24 @@
|
|
| 19 |
<!-- Ottimizzazione SEO per migliorare l'indicizzazione -->
|
| 20 |
<meta name="robots" content="index, follow">
|
| 21 |
<meta name="author" content="ServerX">
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 22 |
</head>
|
| 23 |
<body>
|
| 24 |
<header class="container mt-4">
|
|
@@ -28,7 +46,9 @@
|
|
| 28 |
<main class="container">
|
| 29 |
<section id="game-container" class="mt-5">
|
| 30 |
<!-- Display della parola da indovinare -->
|
| 31 |
-
<div id="word-display" class="text-center mb-3">
|
|
|
|
|
|
|
| 32 |
|
| 33 |
<!-- Input per la lettera -->
|
| 34 |
<div class="d-flex justify-content-center mb-3">
|
|
@@ -68,7 +88,12 @@
|
|
| 68 |
if (guess.length === 1) {
|
| 69 |
console.log(`User guessed: ${guess}`);
|
| 70 |
// Logica di gioco per indovinare la lettera
|
| 71 |
-
//
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 72 |
}
|
| 73 |
}
|
| 74 |
|
|
@@ -76,7 +101,7 @@
|
|
| 76 |
function restartGame() {
|
| 77 |
document.getElementById('game-status').innerText = 'Status: Playing';
|
| 78 |
document.getElementById('game-over-modal').style.display = 'none';
|
| 79 |
-
|
| 80 |
gameStatus = "playing";
|
| 81 |
}
|
| 82 |
|
|
|
|
| 19 |
<!-- Ottimizzazione SEO per migliorare l'indicizzazione -->
|
| 20 |
<meta name="robots" content="index, follow">
|
| 21 |
<meta name="author" content="ServerX">
|
| 22 |
+
|
| 23 |
+
<!-- Personalizzazione dello stile -->
|
| 24 |
+
<style>
|
| 25 |
+
/* Colore della label */
|
| 26 |
+
.label {
|
| 27 |
+
color: black; /* Colore di default per la label */
|
| 28 |
+
}
|
| 29 |
+
|
| 30 |
+
/* Quando il gioco è finito, la label cambierà colore */
|
| 31 |
+
.game-over .label {
|
| 32 |
+
color: red;
|
| 33 |
+
}
|
| 34 |
+
|
| 35 |
+
/* Styling per il campo di input */
|
| 36 |
+
.form-control {
|
| 37 |
+
font-size: 1.25rem;
|
| 38 |
+
}
|
| 39 |
+
</style>
|
| 40 |
</head>
|
| 41 |
<body>
|
| 42 |
<header class="container mt-4">
|
|
|
|
| 46 |
<main class="container">
|
| 47 |
<section id="game-container" class="mt-5">
|
| 48 |
<!-- Display della parola da indovinare -->
|
| 49 |
+
<div id="word-display" class="text-center mb-3">
|
| 50 |
+
<span class="label">____</span>
|
| 51 |
+
</div>
|
| 52 |
|
| 53 |
<!-- Input per la lettera -->
|
| 54 |
<div class="d-flex justify-content-center mb-3">
|
|
|
|
| 88 |
if (guess.length === 1) {
|
| 89 |
console.log(`User guessed: ${guess}`);
|
| 90 |
// Logica di gioco per indovinare la lettera
|
| 91 |
+
// Simuliamo il cambiamento del colore della label quando il gioco finisce
|
| 92 |
+
if (guess === "e") {
|
| 93 |
+
document.getElementById('word-display').classList.add('game-over');
|
| 94 |
+
document.getElementById('game-status').innerText = 'Status: Game Over';
|
| 95 |
+
document.getElementById('game-over-modal').style.display = 'block';
|
| 96 |
+
}
|
| 97 |
}
|
| 98 |
}
|
| 99 |
|
|
|
|
| 101 |
function restartGame() {
|
| 102 |
document.getElementById('game-status').innerText = 'Status: Playing';
|
| 103 |
document.getElementById('game-over-modal').style.display = 'none';
|
| 104 |
+
document.getElementById('word-display').classList.remove('game-over');
|
| 105 |
gameStatus = "playing";
|
| 106 |
}
|
| 107 |
|