猜數字小游戲

廢話不多說，直接上代碼：

（給純白的一句話：將下面代碼CV你電腦桌面創建的txt檔案里，然后改后綴名為html就可以直接玩啦！【代碼能給的注釋我都給啦，不信你還看不明白！】）

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>猜數字</title>
</head>
<body>
<h1>猜數字游戲</h1>
<p>請輸入1~100之間的自然數：</p>
<input type="text" class="userNumber">
<button class="checkNumber">確定</button>
<!--用戶所猜的數字-->
<p class="guess"></p>
<!--告訴用戶是否猜正確-->
<p class="lastResult"></p>
<!--判斷數字高了還是低了-->
<p class="judge"></p>
<script>
    // 定義一個亂數   范圍1~100
    var randomNumber = Math.floor(Math.random()*100+1);
    console.log(randomNumber);
    // 獲取元素
    var userNumber = document.getElementsByClassName("userNumber")[0];
    var checkNumber = document.getElementsByClassName("checkNumber")[0];
    var guess = document.getElementsByClassName("guess")[0];
    var lastResult = document.getElementsByClassName("lastResult")[0];
    var judge = document.getElementsByClassName("judge")[0];
    // 定義猜的次數
    var guessCount = 1;
    // 判斷數字的函式
    function checkGuess() {
        // 用戶輸入的數字
        var userGuess = Number(userNumber.value);
        if(guessCount ===1){
            //textContent 作用加入文本內容
            guess.textContent = "上次猜的數字是：";
        }
        // 把用戶猜的數字顯示出來
        guess.textContent += userGuess + " ";
        // 判斷用戶輸入的數字是否與亂數一致
        if(userGuess === randomNumber){         //用戶回答正確的情況
            lastResult.textContent = "恭喜你，答對了！";
            lastResult.style.backgroundColor = "green";
            judge.textContent = "";
            gameover();
        }
        // 用戶所猜的次數到達10次的時候，結束游戲
        else if(guessCount === 10){
            lastResult.textContent = "游戲結束";
            gameover();
        }
        // 用戶猜1~10次且猜錯的時候
        else{
            lastResult.textContent = "你猜錯了";
            lastResult.style.backgroundColor = "red";
            // 判斷用戶輸入的數字與系統生成的數字的大小比較
            if(userGuess<randomNumber){
                judge.textContent = "你猜低了";
            }else if(userGuess>randomNumber){
                judge.textContent = "你猜高了";
            }
        }
        // 猜測的次數要加1
        guessCount++;
        // 清空用戶輸入框
        userNumber.value = "";
        // 焦點事件  讓焦點回到輸入框   在每次輸入之后讓滑鼠指標回到輸入框中
        userNumber.focus();
    }
    // 確定按鈕的事件
    checkNumber.addEventListener("click",checkGuess);
    // 游戲結束的函式
    function gameover() {
        // 輸入框禁用
        userNumber.disabled = true;
        // 按鈕的禁用
        checkNumber.disable = true;
        // 創建一個按鈕
        resetButton = document.createElement("button");
        resetButton.textContent = "開始新游戲";
        // 向body里面加一個按鈕元素
        document.body.appendChild(resetButton);
        // 點擊開始新游戲，要重置游戲
        resetButton.addEventListener("click",resetGame);
    }
    // 游戲重置的函式
    function resetGame() {
        // 猜的次數重新賦值
        checkNumber = 1;
        // 獲取所有p標簽元素
        var resetText = document.querySelectorAll("p");
        // 清空p標簽的文本內容
        for(var i=1;i<resetText.length;i++){
            resetText[i].textContent = "";
        }
        // 洗掉開始新游戲的按鈕
        resetButton.parentNode.removeChild(resetButton);
        // 取消禁用
        userNumber.disabled = false;
        checkNumber.disable = false;
        // 清空輸入框
        userNumber.value = "";
        // 讓滑鼠指標重新回到輸入框中
        userNumber.focus();
        // 讓第二個p標簽的背景色設定為白色
        lastResult.style.backgroundColor = "white";
        randomNumber = Math.floor(Math.random()*100+1);
        console.log(randomNumber);
    }
</script>
</body>
</html>

轉載請註明出處，本文鏈接：https://www.uj5u.com/qita/289401.html

標籤：其他

上一篇：抽獎小游戲——純前端實作（純小白也能看懂&CV直接拿走直接玩）

下一篇：Unity UGUI原始碼決議

猜數字游戲——純前端實作（純小白也能看懂&CV直接拿走直接玩）

廢話不多說，直接上代碼：