Comment implémenter un jeu de devinettes en utilisant JavaScript

À l'ère d'Internet, les jeux peuvent être joués à tout moment et n'importe où, ce qui peut apporter une certaine quantité de divertissement et de bonheur. Parmi eux, le jeu de devinettes est un jeu plus classique et convient à tous les âges. Ainsi, dans cet article, nous présenterons étape par étape comment mettre en œuvre le jeu de devinettes en utilisant JavaScript.

Étape 1 : Préparation

Avant de commencer à écrire du code, nous devons préparer l'environnement de travail. Ici, nous pouvons utiliser n'importe quel éditeur de texte ou outil de développement. Par exemple : Sublime Text, VS Code, etc. Pour les débutants, je recommande d'utiliser Codepen.io, un outil de développement en ligne très adapté pour écrire rapidement de petits projets JavaScript.

Étape 2 : Écrire du code HTML

Tout d'abord, nous devons écrire du code HTML pour créer une interface utilisateur simple. Dans ce code, nous allons créer un élément div qui contient un élément h1 pour afficher le titre du jeu, un élément input et un élément bouton pour permettre à l'utilisateur de saisir un nombre deviné, et un élément p pour afficher le résultat du jeu.

Ce qui suit est le code HTML.

<div id="game">
  <h1>猜数字游戏</h1>
  <input type="text" placeholder="请输入你的猜测" id="guess"></input>
  <button onclick="checkGuess()">猜一猜</button>
  <p id="results"></p>
</div>

Ici, nous créons un élément div avec l'identifiant "jeu" et plaçons le titre, la zone de saisie, le bouton et le résultat à l'intérieur. Notez que nous avons ajouté un événement onclick au bouton qui appelle la fonction checkGuess().

Étape 3 : Écrire du code JavaScript

Maintenant, nous pouvons commencer à écrire du code JavaScript. Avant de commencer, nous définirons trois variables d'ouverture.

var randomNumber = Math.floor(Math.random() * 100) + 1;
var guesses = [];
var count = 0;

La variable randomNumber ici générera un nombre aléatoire de 1 à 100, la variable devinettes enregistrera toutes les suppositions de l'utilisateur et la variable count enregistrera le nombre de suppositions de l'utilisateur.

Ensuite, nous commencerons à écrire la fonction checkGuess().

function checkGuess() {
  var guess = document.getElementById("guess").value;
  if (guesses.indexOf(guess) !== -1) {
    alert("你已经猜过这个数字了，请猜另外一个数字！");
    return;
  }
  guesses.push(guess);
  count++;
  var resultDiv = document.getElementById("results");
  if (guess == randomNumber) {
    alert("恭喜你，你猜对了！你猜了" + count + "次。");
    resultDiv.innerHTML = "恭喜你，你猜对了！你猜了" + count + "次。";
  } else if (guess < randomNumber) {
    resultDiv.innerHTML = "你猜的数字过小";
  } else if (guess > randomNumber) {
    resultDiv.innerHTML = "你猜的数字过大";
  }
  document.getElementById("guess").value = "";
}

Dans la fonction checkGuess(), nous obtenons d'abord le numéro saisi par l'utilisateur et vérifions s'il a été deviné. Si la supposition est réussie, un avertissement apparaîtra indiquant à l'utilisateur qu'il doit deviner un autre numéro. Sinon, nous continuons à exécuter le code et ajoutons ce numéro au tableau des suppositions.

Ensuite, nous incrémentons le compteur de 1 et mettons à jour la supposition de l'utilisateur dans l'élément resultDiv. Si l'utilisateur devine correctement, nous afficherons une fenêtre contextuelle pour lui dire qu'il a bien deviné et mettrons à jour l'élément resultDiv.

Si l'utilisateur ne devine pas correctement, nous lui dirons s'il a deviné inférieur ou supérieur et mettrons à jour l'élément resultDiv.

Enfin, nous effacerons la supposition de l'utilisateur dans la zone de saisie.

Étape 4 : Testez votre code

Maintenant, nous avons écrit le code HTML et JavScript nécessaire. Nous pouvons tester notre code et voir si le jeu fonctionne correctement en quelques étapes simples. Copiez le code ci-dessus dans l'éditeur en ligne et appuyez sur le bouton Exécuter.

L'interface utilisateur du jeu devrait maintenant être rendue. Entrez un nombre dans la zone de saisie et cliquez sur le bouton "Deviner". Si vous avez bien deviné, vous verrez une boîte de dialogue vous indiquant que vous avez bien deviné et combien de fois vous avez deviné.

Si vous vous trompez, vous verrez une invite indiquant que votre estimation est trop faible ou trop élevée. Si vous n'avez pas encore deviné le numéro, vous pouvez continuer à deviner et le système enregistrera chacune de vos suppositions.

Pour résumer, grâce à cet article, vous pouvez apprendre à utiliser JavaScript pour écrire un jeu de devinettes, et vous pourrez profiter des avantages du jeu à tout moment et n'importe où.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!