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

数字当てゲームを実装するための純粋な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 を応援していただければ幸いです。

以下もご興味があるかもしれません:
  • JavaScript ベースの推測ゲームのコード例
  • JS 数字推測ゲームの例の説明
  • 数字推測ゲームを実装するJavaScript
  • JSはウェブベースの推測ゲームを実装します
  • 数字当てゲームを実現するための jsp+servlet
  • JSP は億万長者推測ゲームを実装します
  • AngularJS で実装された乱数生成と数値のサイズ推測の例
  • AngularJSは数値の大きさを推測する機能を実装します
  • js は数字推測ゲームを実装します
  • js 数字推測ゲームの簡単な実装コード

<<:  win10にmysql 8.0.18-winx64をインストールする詳細な手順

>>:  Dockerコンテナでyumを呼び出すときのエラーの解決方法

推薦する

MySQL 8.0.12 解凍版インストールチュートリアル個人テスト!

Mysql8.0.12 解凍版のインストール方法をテストしましたので、ご参考までに1. ダウンロー...

モバイル開発におけるHTML5開発の現状を深く理解する

「私たちは次の一連のモバイル製品を HTML5 で作成しています。」 「ええ、最近は多くの人が Ap...

vue3 コンポーネントでの v-model の使用と詳細な説明

目次v-model 入力で双方向バインディングデータを使用するコンポーネント内の v-model他の...

Dockerコンテナのネットワーク管理とネットワーク分離の実装

1. Dockerネットワーク管理1. Dockerコンテナ方式1) Dockerが外部ネットワーク...

React Hooksの使用例

目次簡単なコンポーネントの例より複雑な親子コンポーネントのケースオンセレクトの書き方反応する子供Re...

GNU Parallelの具体的な使用法

それは何ですか? GNU Parallel は、1 台以上のコンピュータでコンピューティング タスク...

パゴダパネルとドッカーを使用して Gogs をインストールするプロセス全体

目次1 Baota Software StoreにDockerをインストールする2 ゴグスイメージを...

VMWare仮想マシンにCentOS7システムをインストールする詳細な手順

インストール前の作業: VMware Workstation がインストールされていることを確認し、...

Linux mpstat コマンドの使用方法の詳細な説明

1. mpstatコマンド1.1 コマンド形式 mpstat [ -A ] [ -u ] [ -V ...

PHP 開発環境の構築に関する win10 docker-toolsbox チュートリアル

画像をダウンロード docker プル mysql:5.7 docker pull php:7.2-...

60件のページング事例と優れた実践例を推奨

<br />構造と階層により複雑さが軽減され、読みやすさが向上します。記事やサイトが整理...

Google の新しい UI から学べること (画像とテキスト)

2011 年に最も顕著なウェブサイトの変更は、一連の製品に新しいユーザー インターフェースを導入した...

CSS における px、em、rem、%、vw、vh 単位の違いの詳細な説明

1.ピクセルpx はピクセルの略語で、画面解像度に対する相対的な長さの単位です。 2. えむ参照は親...

加算、減算、乗算、除算の機能を実現するには、HTML に 2 つの数値を入力します。

1. parseFloat() 関数Web ページ上に簡単な計算機を作成し、テキスト ボックスに ...