67 lines
2.6 KiB
HTML
67 lines
2.6 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;
|
|
let tries = 0;
|
|
|
|
function startGame() {
|
|
const maximum = parseInt(document.getElementById("max").value)
|
|
randomNumber = Math.floor(Math.random() * maximum) + 1;
|
|
tries = 0
|
|
document.getElementById("game").innerHTML = "<h2> J'ai choisi un nombre, il est entre 0 et " + maximum + ". Trouve le!</h2>"+
|
|
"<input type='text' id='guess'>" +
|
|
`<button id="subbutton" type='button' onclick='guessNumber()'>Je tente !</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)
|
|
|
|
tries++
|
|
document.getElementById("subbutton").innerHTML = `Je tente (déja ${tries} essais)!`
|
|
|
|
// 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 en "+ tries + " essais.";
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|