JavaScript猜数字游戏

最新推荐文章于 2023-03-25 15:43:49 发布

本心_

最新推荐文章于 2023-03-25 15:43:49 发布

阅读量2.6k

点赞数 1

分类专栏： Web 文章标签： javascript

本文链接：https://blog.csdn.net/weixin_40571331/article/details/106642590

版权

Web 专栏收录该内容

31 篇文章 3 订阅

订阅专栏

最终效果：

猜数字

游戏规则：游戏在开始前随机选择一个1~100的数字，然后邀请玩家在10论内猜出游戏。每轮后对会告知玩家正确与否，如果猜对了，游戏结束，玩家胜利。如果猜错了，应当告知玩家是猜大了还是猜小了。每次游戏有10次机会，玩家用完所有机会后游戏自动结束。

游戏逻辑：

代码实现:

<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">

    <title>猜数字游戏</title>

    <style>
        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>Guess The Number Game</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>

    <script>
        // 获取类名，动态生成数据
        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');

        // 生成一个0~100的随机数
        let randomNum = Math.floor(Math.random()*100)+1;

        // 设置竞猜次数，初始值为1
        let times = 1;

        // 重置按钮，游戏结束时出现，点击后回到游戏初始状态
        let resetButton;
        
        function checkGuess() {
            let inputNum = Number(guessField.value);
            if (times === 1) guesses.textContent = '你猜的数字是: '; // 当第一次游戏时，生成新字符串
            guesses.textContent += inputNum + ' '; // 动态更新每次猜测的数字
            if (inputNum === randomNum) { // 若猜对了

                // 设置lastResult类对应的标签的字体和背景颜色
                lastResult.textContent = '恭喜你，你猜对了!';
                lastResult.style.backgroundColor = 'green';
                lowOrHi.textContent = '';
                
                // 重置游戏
                setGOV(); 
            } else if (times === 10) { // 若10次猜测机会用完
                lastResult.textContent = '你已经把机会用完！';
                lastResult.style.backgroundColor = 'pink';
                lowOrHi.textContent = '';
                setGOV();
            } else {  // 若猜错了
                lastResult.textContent = '你猜错了';
                lastResult.style.backgroundColor = 'red';
                if (inputNum < randomNum) lowOrHi.textContent = '你猜小了';
                else lowOrHi.textContent = '你猜大了';
            }
            times++;
            guessField.value = ''; // 清空输入域
            guessField.focus(); // 重新聚焦在此
        }

        // 给提交按钮设置监听事件，每次点击执行一次checkGuess函数
        guessSubmit.addEventListener('click', checkGuess);

        // 重置游戏，使游戏回到初始状态
        function setGOV() {
            // 输入域和提交案件设置为不可用
            guessField.disabled = true; 
            guessSubmit.disabled = true;

            // 创建重置按钮
            resetButton = document.createElement('button'); 
            resetButton.textContent = '重新开始游戏';
            document.body.appendChild(resetButton);

            // 设置重置按钮监听事件
            resetButton.addEventListener('click', resetGame);
        }

        // 重置函数
        function resetGame() {
            
            // 游戏次数重新为设为1
            times = 1;

            // 获取类resultParas下所有的p标签并将其内容设置为空
            let resetParas = document.querySelectorAll('.resultParas p');
            for (let i = 0; i < resetParas.length; i++) 
                resetParas[i].textContent = '';

            // 输入框内容为空
            guessField.value = '';

            // 输入框和提交按钮重新开放
            guessField.disabled = false;
            guessSubmit.disabled = false;

            // 重新聚焦到输入框
            guessField.focus();

            // 设置背景色为白色lastResult类对应的标签为白色
            lastResult.style.backgroundColor = 'white';

            // 删除重置按钮
            resetButton.parentNode.removeChild(resetButton);

            // 更新随机数
            randomNum = Math.floor(Math.random()*100)+1;
        }

    </script>
</body>

</html>

本例子原型为MDN官方案例，想详细了解可查看官方文档。

本心_

关注

1
点赞
踩
16

收藏

觉得还不错? 一键收藏
0
评论
JavaScript猜数字游戏

游戏规则：游戏在开始前随机选择一个1~100的数字，然后邀请玩家在10论内猜出游戏。每轮后对会告知玩家正确与否，如果猜对了，游戏结束，玩家胜利。如果猜错了，应当告知玩家是猜大了还是猜小了。每次游戏有10次机会，玩家用完所有机会后游戏自动结束。游戏逻辑：代码实现:<!DOCTYPE html><html><head> <meta charset="utf-8"> <title>猜数字游戏</title&
复制链接

扫一扫

专栏目录