数字当てゲームを実装するための純粋なJavaScript

100 以内の自然数をランダムに選択し、プレイヤーに 10 ラウンド以内にその数を推測させる数字推測ゲームを開発します。各ラウンドの終了後、プレイヤーは答えが正しかったかどうか、また間違っていた場合には数字が低すぎたか高すぎたかを知らされる必要があります。そして、前のラウンドでプレイヤーが推測した数字が表示されます。プレイヤーが正しく推測するか、チャンスがなくなると、ゲームは終了します。ゲーム終了後、プレイヤーは再度開始することを選択できます。

考え：

1. 100以内の自然数をランダムに生成する

2. プレーヤーの現在のラウンド番号を記録します。 1から始める

3. プレイヤーに数字を推測する方法を提供する

4. 結果が送信されたら、まずそれを記録して、ユーザーが以前の推測を確認できるようにします。

5. 次に、彼が正しいかどうかを確認します

6. 正しい場合:

1. お祝いメッセージを表示する

2. プレイヤーが推測できないようにする

3. 継続プレイヤーがゲームを再開するためのスペースを表示する

7. 何か問題が起きた場合

1. プレイヤーに間違っていると伝える

2. 語順彼らは別の推測を入力する

3. 端数プラス1

8. エラーが発生し、プレイヤーにターンが残っていない場合

1. ゲームが終了したことをプレイヤーに伝える

2. プレイヤーが推測できないようにする

3. ディスプレイスペースにより、プレイヤーはゲームを再開できる

9. ゲームが再起動したら、ゲームロジックとUIが完全に再充電されていることを確認し、手順1に戻ります。

HTMLコード:

<!DOCTYPE html>
<html lang="ja">
  <ヘッド>
    <メタ文字セット="UTF-8" />
    <meta http-equiv="X-UA-compatible" content="IE=edge" />
    <meta name="viewport" content="width=デバイス幅、初期スケール=1.0" />
    <title>数字当てゲーム</title>
    <script type="text/javascript" src="./JS/数字当てゲーム.js" async></script>
/*実際の状況に応じて変更してください*/
  </head>
  <本文>
    <p class="推測"></p>
    <p class="lastResult"></p>
    <p class="lowOrHi"></p>
    <label for="guessField">数字を推測してください:</label>
    <input type="text" id="推測フィールド" class="推測フィールド" />
    <input type="submit" value="OK" class="guessSubmit" />
  </本文>
</html>

jsコード:

randomNumber = Math.floor(Math.random() * 100) + 1 とします。
const 推測 = document.querySelector(".推測");
定数 lastResult = document.querySelector(".lastResult");
定数lowOrHi = document.querySelector(".lowOrHi");
const guessSubmit = document.querySelector(".guessSubmit");
const guessField = document.querySelector(".guessField");
guessCount = 1 とします。
resetButton を実行します。
/* ゲームロジック */
関数 checkGuess() {
  /* ユーザー入力を取得し、数値に変換します*/
  userGuess = Number(guessField.value); とします。
  推測回数が1の場合
    guesses.textContent = "最後の推測:";
  }
  guesses.textContent += userGuess + " ";
 
  if (userGuess === randomNumber) {
    lastResult.textContent = "おめでとうございます！正解です";
    lastResult.style.backgroundColor = "緑";
    lowOrHi.textContent = "";
    ゲームオーバーを設定します。
  } そうでない場合 (推測数 === 10) {
    lastResult.textContent = "!!! ゲームオーバー!!!";
    ゲームオーバーを設定します。
  } それ以外 {
    lastResult.textContent = "あなたの推測は間違っています";
    lastResult.style.backgroundColor = "赤";
    if (userGuess < ランダムナンバー) {
      lowOrHi.textContent = "あなたの推測は低すぎます";
    } それ以外 {
      lowOrHi.textContent = "高すぎると推測しました";
    }
  }
  推測カウント++;
  guessField.value = "";
  guessField.focus();
}
/* ゲームを終了する */
関数setGameOver() {
  guessField.disabled = true;
  guessSubmit.disabled = true;
  リセットボタン = document.createElement("ボタン");
  resetButton.textContent = "新しいゲームを開始";
  document.body.appendChild(リセットボタン);
  resetButton.addEventListener("click", resetGame);
}
/* 初期化 */
関数resetGame() {
  推測数 = 1;
  const resetParas = document.querySelectorAll(".resultParas p");
  (i = 0 とします; i < resetParas.length; i++) {
    resetParas[i].textContent = " ";
  }
 
  リセットボタンの親ノードを削除します。
  guessField.disabled = false;
  guessSubmit.disabled = false;
  guessField.value = "";
  guessField.focus();
  lastResult.style.backgroundColor = "白";
  ランダム数値 = Math.floor(Math.random() * 100) + 1;
}
guessSubmit.addEventListener("click", checkGuess);

以上がこの記事の全内容です。皆様の勉強のお役に立てれば幸いです。また、123WORDPRESS.COM を応援していただければ幸いです。

以下もご興味があるかもしれません: