Html與Javascript寫出猜數字遊戲教學

Html與Javascript寫出猜數字遊戲教學

先讓大家試玩一下這個猜數字小遊戲: 猜個數字吧

猜數字遊戲

請猜一個 1 到 10 之間的數字:

在這個 HTML 程式中,使用者可以在輸入框中輸入一個數字,然後按下「猜猜看」按鈕。當使用者按下按鈕時,會呼叫 checkGuess 函數,這個函數會產生一個 1 到 10 的隨機數,然後比較使用者輸入的數字和正確的數字。如果使用者猜對了,就會顯示「恭喜你猜對了!」,否則會顯示「很遺憾,你猜錯了,正確的數字是 xx。」,其中 xx 是正確的數字。

<html>
  <head>
    <title>猜個數字吧</title>
  </head>
  <body>
    <h1>猜數字遊戲</h1>
    <p>請猜一個 1 到 10 之間的數字:</p>
    <input type="text" id="guess">
    <button onclick="checkGuess()">猜猜看</button>
    <p id="result"></p>
    <script>
      function checkGuess() {
        // 產生一個 1 到 10 的隨機數
        const correctNumber = Math.floor(Math.random() * 10) + 1;
        // 取得使用者輸入的數字
        const guess = document.getElementById('guess').value;
        // 比較使用者輸入的數字和正確的數字
        if (guess == correctNumber) {
          document.getElementById('result').innerHTML = '恭喜你猜對了!';
        } else {
          document.getElementById('result').innerHTML = '很遺憾,你猜錯了,正確的數字是 ' + correctNumber + '。';
        }
      }
    </script>
  </body>
</html>

以上就是今日的分享

發表迴響

%d 位部落客按了讚: