web之-猜数字小游戏

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8"/>
        <title>猜数字游戏</title>
        <style type="text/css">
            html{
                font-family: sans-serif;
            }
            body{
                width: 50%;
                max-width: 800px;
                min-width: 480px;
                margin: 0 auto;
            }
            .lastResult{
                color: white;
                padding: 3px;
            }
        
        </style>
    </head>
    <body>
        <h1>猜数字游戏</h1>
        <p>我刚才随机选定了一个100以内的自然数。看你能否在10次以内猜中它。每次我都会告诉你所采的结果是高了还是低了。</p>
        <div class="form">
            <label for="guessField">请猜数：</label>
            <input type="text" id="guessField" class="guessField"/>
            <input type="submit" value = "确定" class="guessSubmit"/>
        </div>
        
        <div class="resultParas">
            <p class="guesses"></p>
            <p class="lastResult"></p>
            <p class="lowOrHi"></p>
        </div>

    </body>
    <script>
        let randomNumber = Math.floor(Math.random() * 100) + 1;
        const guesses = document.querySelector('.guesses');
        const lastResult = document.querySelector('.lastResult');
        const lowOrHi = document.querySelector('.lowOrHi');

        const guessField = document.querySelector('.guessField');
        const guessSubmit = document.querySelector('.guessSubmit');

        let guessCount = 1;
        let resetButton;

        guessField.focus();
        
        function checkGuess(){
           const userGuess = Number(guessField.value);
           if(guessCount === 1){
               guesses.textContent = '上次猜的数： ';
           }
           guesses.textContent += userGuess + ' ';
            
           if(userGuess === randomNumber){
                lastResult.textContent = '恭喜你猜对啦！';
                lastResult.style.backgroundColor = 'green';
                lowOrHi.textContent = '';
                setGameOver();
           }else if(guessCount == 10){
               lastResult.textContent = '!!!GAME OVER!!!';
               setGameOver();
           }else{
               lastResult.textContent = '你猜错了！';
               lastResult.style.backgroundColor = 'red';
               if(userGuess < randomNumber){
                   lowOrHi.textContent = '你猜小了！';
               }else if(userGuess > randomNumber){
                   lowOrHi.textContent = '你猜大了！';
               }
           }
                guessCount++;
                guessField.value = '';
                guessField.focus();
        }
        
        guessSubmit.addEventListener('click',checkGuess);

        function setGameOver(){
            guessField.disabled = true;
            guessSubmit.disabled = true;
            resetButton = document.createElement('button');
            resetButton.textContent = '开始新游戏';
            document.body.appendChild(resetButton);
            resetButton.addEventListener('click',resetGame);
        }

        function resetGame(){
            guessCount = 1;
            const resetParas = document.querySelectorAll('.resultParas p');
            for(let i = 0; i < resetParas.length; i++){
                resetParas[i].textContent = '';
            }
            resetButton.parentNode.removeChild(resetButton);
            guessField.disabled = false;
            guessSubmit.disabled = false;
            guessField.value = '';
            guessField.focus();

            lastResult.style.backgroundColor = 'white';
            randomNumber = Math.floor(random() * 100 + 1);
        }






    </script>
</html>
来自：MDN
web之-猜数字小游戏

猜你喜欢
