如何用JavaScript實現猜數字遊戲

在網路時代，遊戲隨時隨地可以玩，能夠帶來一定的娛樂和快樂。其中，猜數字遊戲是較為經典的一種遊戲，適合所有年齡層。那麼，在本文中，我們將逐步介紹如何用JavaScript實現猜數字遊戲的過程。

步驟1：準備工作

在開始編寫程式碼之前，我們需要先準備工作環境。這裡我們可以使用任何文字編輯器或開發工具。例如：Sublime Text、VS Code等等。對於初學者，我推薦使用Codepen.io這個線上開發工具，非常適合快速編寫小型的JavaScript專案。

步驟2：寫HTML程式碼

首先，我們需要寫HTML程式碼，建立一個簡單的使用者介面。在此程式碼中，我們將建立一個div元素，包含一個h1元素來展示遊戲的標題，一個input元素和一個button元素用於讓使用者輸入猜測的數字，並且一個p元素來顯示遊戲的結果。

下面就是HTML程式碼。

<div>
  <h1 id="猜数字游戏">猜数字游戏</h1>
  <input>
  <button>猜一猜</button>
  <p></p>
</div>

在此，我們建立了一個id為「game」的div元素，並在其中放置了標題、輸入框、按鈕和結果。請注意，我們已在按鈕上新增了一個onclick事件呼叫checkGuess()函數。

步驟3：寫JavaScript程式碼

現在，我們可以開始寫JavaScript程式碼了。在開始之前，我們將定義三個開局變數。

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

這裡的randomNumber變數會產生一個1-100的隨機數字，guesses變數將保存使用者的所有猜測數字，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 = "你猜的数字过大";
  }
  document.getElementById("guess").value = "";
}

在checkGuess()函數中，我們先取得使用者輸入的數字，並檢查是否已經猜過。如果猜過了，我們將彈出一個警告，告訴用戶他們需要猜另一個數字。否則，我們將繼續執行程式碼，並將這個數字加入到guesses數組中。

接下來，我們將count計數器加1，並在resultDiv元素中更新使用者的猜測結果。如果使用者猜對了，我們將彈出一個提示框告訴他們他們猜對了，並更新resultDiv元素。

如果使用者沒有猜對，我們將告訴他們他們猜小了還是猜大了，並更新resultDiv元素。

最後，我們會將輸入框中使用者的猜測清空。

步驟4：測試你的程式碼

現在，我們已經寫了必要的HTML和JavScript程式碼。我們可以透過幾個簡單的步驟來測試我們的程式碼，並看看遊戲能否正常運作。將上述程式碼複製到線上編輯器中，並按下執行按鈕。

遊戲UI現在應該呈現出來了。在輸入框中輸入一個數字，然後按一下「猜一猜」按鈕。如果您猜對了，您將看到一個提示框，告訴您您猜對了，您猜了多少次。

如果你猜錯了，你會看到一個猜小了或猜大了的提示。如果你還沒猜到數字，你可以繼續猜，系統將記錄你的每一個猜測。

綜上所述，透過這篇文章，你可以學習如何使用JavaScript編寫一個猜數字遊戲，並且可以在任何時候隨時隨地欣賞遊戲留下來的好處。

以上是如何用JavaScript實現猜數字遊戲的詳細內容。更多資訊請關注PHP中文網其他相關文章！