JavaScriptを使用して数字当てゲームを実装する方法

インターネット時代では、いつでもどこでもゲームをプレイすることができ、ある程度の娯楽と幸福をもたらすことができます。その中でも、数字当てゲームはより古典的なゲームであり、あらゆる年齢層に適しています。そこでこの記事では、JavaScriptを使用して数字当てゲームを実装する方法をステップバイステップで紹介します。

ステップ 1: 準備

コードを書き始める前に、作業環境を準備する必要があります。ここでは、任意のテキスト エディターまたは開発ツールを使用できます。例: Sublime Text、VS Code など。初心者には、小規模な JavaScript プロジェクトをすばやく作成するのに非常に適したオンライン開発ツールである Codepen.io を使用することをお勧めします。

ステップ 2: HTML コードを作成する

まず、HTML コードを作成して、単純なユーザー インターフェイスを作成する必要があります。このコードでは、ゲームのタイトルを表示する h1 要素、ユーザーが推測した数字を入力できる input 要素と button 要素、ゲームの結果を表示する p 要素を含む div 要素を作成します。

以下は HTML コードです。

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

ここでは、ID が「game」の div 要素を作成し、その中にタイトル、入力ボックス、ボタン、結果を配置します。 checkGuess() 関数を呼び出す onclick イベントをボタンに追加したことに注意してください。

ステップ 3: JavaScript コードを作成する

ここで、JavaScript コードの作成を開始できます。始める前に、3 つの開始変数を定義します。

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

ここのrandomNumber変数は1から100までの乱数を生成し、guess変数はユーザーのすべての推測を保存し、count変数はユーザーの推測の数を保存します。

次に、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 = "";
}

checkGuess() 関数では、まずユーザーが入力した数値を取得し、それが推測されたかどうかを確認します。推測が合格した場合は、別の番号を推測する必要があることをユーザーに知らせる警告がポップアップ表示されます。それ以外の場合は、コードの実行を続行し、この数値を推測配列に追加します。

次に、カウント カウンターを 1 つインクリメントし、resultDiv 要素内のユーザーの推測を更新します。ユーザーの推測が正しければ、ポップアップを表示して推測が正しかったことを伝え、resultDiv 要素を更新します。

ユーザーが正しく推測しなかった場合は、ユーザーが推測した値が低いか高いかを伝え、resultDiv 要素を更新します。

最後に、入力ボックス内のユーザーの推測をクリアします。

ステップ 4: コードをテストする

これで、必要な HTML と JavaScript コードが作成されました。いくつかの簡単な手順でコードをテストし、ゲームが適切に動作するかどうかを確認できます。上記のコードをオンライン エディターにコピーし、実行ボタンを押します。

ゲーム UI がレンダリングされるはずです。入力ボックスに数字を入力し、「推測」ボタンをクリックしてください。推測が正しければ、推測が正しかったことと推測した回数を示すプロンプト ボックスが表示されます。

推測が間違っている場合は、推測が低すぎるか高すぎることを示すプロンプトが表示されます。まだ数字を推測していない場合は、推測を続けることができ、システムはそれぞれの推測を記録します。

要約すると、この記事を通じて、JavaScript を使用して推測ゲームを作成する方法を学ぶことができ、いつでもどこでもゲームの利点を楽しむことができます。

以上がJavaScriptを使用して数字当てゲームを実装する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。