62 lines
2.1 KiB
HTML
62 lines
2.1 KiB
HTML
|
<!DOCTYPE html>
|
||
|
<html>
|
||
|
<head>
|
||
|
<meta charset="UTF-8">
|
||
|
<title>Jeu du plus ou moins</title>
|
||
|
</head>
|
||
|
<body>
|
||
|
<h1>Jeu du plus ou moins</h1>
|
||
|
<section id="setup">
|
||
|
|
||
|
<p>Devinez un nombre entre 0 et
|
||
|
<input type="number" name="max" value="100", id="max">
|
||
|
</p>
|
||
|
<button id="start-game" type="button" onclick="startGame()"> Lancer la partie </button>
|
||
|
</section>
|
||
|
<section id="game">
|
||
|
</section>
|
||
|
|
||
|
<script>
|
||
|
// Génère un nombre aléatoire entre 1 et 100
|
||
|
let randomNumber = 0;
|
||
|
|
||
|
function startGame() {
|
||
|
const maximum = parseInt(document.getElementById("max").value)
|
||
|
randomNumber = Math.floor(Math.random() * maximum) + 1;
|
||
|
document.getElementById("game").innerHTML = "<h2> Trouve un nombre entre 0 et " + maximum + "</h2>"+
|
||
|
"<input type='text' id='guess'>" +
|
||
|
"<button type='button' onclick='guessNumber()'>Guess</button>" +
|
||
|
"<p id='result'></p>"
|
||
|
document.getElementById("start-game").innerHTML = "Réinitialiser la partie"
|
||
|
}
|
||
|
|
||
|
function guessNumber() {
|
||
|
// Récupère la valeur saisie par l'utilisateur
|
||
|
const guess = parseInt(document.getElementById("guess").value);
|
||
|
const maximum = parseInt(document.getElementById("max").value)
|
||
|
|
||
|
// Vérifie si la valeur est un nombre
|
||
|
if (isNaN(guess)) {
|
||
|
document.getElementById("result").innerHTML = "Veuillez saisir un nombre valide.";
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
// Vérifie si la valeur est comprise entre 1 et 100
|
||
|
if (guess < 1 || guess > maximum) {
|
||
|
document.getElementById("result").innerHTML = "Le nombre doit être compris entre 1 et " + maximum;
|
||
|
return;
|
||
|
}
|
||
|
|
||
|
// Compare la valeur saisie avec le nombre aléatoire
|
||
|
if (guess < randomNumber) {
|
||
|
document.getElementById("result").innerHTML = "Plus grand.";
|
||
|
} else if (guess > randomNumber) {
|
||
|
document.getElementById("result").innerHTML = "Plus petit.";
|
||
|
} else {
|
||
|
document.getElementById("result").innerHTML = "Bravo, vous avez trouvé le nombre !";
|
||
|
}
|
||
|
}
|
||
|
</script>
|
||
|
</body>
|
||
|
</html>
|