猜数字困难版(1-10000)

小游戏,通过提示每次猜高或猜低以及每次猜中的位数,10次内猜中1-10000的一个数。

javascript 复制代码
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>猜数字游戏困难版</title>
    <style>
        body {
            text-align: center;
            padding-top: 20px;
        }
    </style>
</head>
<body>
<h1>猜数字游戏困难版</h1>
<p>我已经想了一个1到10000之间的数字。你有10次机会猜它是什么。</p>
<label for="guessInput">输入你的猜测:</label>
<input type="number" id="guessInput" required min="1" max="10000">
<button onclick="checkGuess()">猜!</button>
<button onclick="location.reload()">再来一局!</button>
<p id="output"></p>
<ol id="history"></ol>
<script>
    const secretNumber = Math.floor(Math.random() * 10000) + 1;
    let attempts = 10;
    const history = document.getElementById('history');
    const guessInput = document.getElementById('guessInput');
    const output = document.getElementById('output');
    function checkGuess() {
        const userGuess = parseInt(guessInput.value, 10);
        if (isNaN(userGuess)) {
            output.textContent = '请输入有效的数字!';
            return;
        }
        if (attempts > 0) {
		    attempts--;
            const rightNum = countSameDigits(userGuess, secretNumber)
            const guessItem = document.createElement('li');
            if (userGuess === secretNumber) {
                output.textContent = '恭喜你!你猜对了!游戏胜利!';
                attempts = -1;
            } else if (userGuess < secretNumber) {
                output.textContent = '猜低了。再试一次。';
            } else if (userGuess > secretNumber) {
                output.textContent = '猜高了。再试一次。';
            }
            guessItem.textContent = `猜测: ${userGuess};${output.textContent};猜对了${rightNum}位数`;
            history.appendChild(guessItem);            
            if (attempts > 0) {
                output.textContent += ` 剩余次数: ${attempts}`;
            } else if (attempts == 0) {
                output.textContent = ' 游戏失败。正确答案是: ' + secretNumber;
            }
        }
    }
    function countSameDigits(a, b) {
        // 将数字转换为字符串
        const strA = a.toString();
        const strB = b.toString();
        // 确保两个字符串长度相同,较短的字符串前面补0
        const maxLength = Math.max(strA.length, strB.length);
        strA.padStart(maxLength, '0');
        strB.padStart(maxLength, '0');
        let count = 0; // 用于计数相同位上的相同数
        for (let i = 0; i < maxLength; i++) {
            if (strA[i] === strB[i]) {
                count++;
            }
        }
        return count;
    }
</script>
</body>
</html>
相关推荐
EnoYao6 小时前
我写了一个团队体检报告 Skill,把摸鱼的同事扒出来了😅
前端·javascript
梁正雄6 小时前
Python前端-2-css练习
前端·css·python
Never_Satisfied6 小时前
在JavaScript / Node.js中,package.json文件中的依赖项自动选择最新版安装
javascript·node.js·json
蓝莓味的口香糖6 小时前
【vue3】组件的批量全局注册
前端·javascript·vue.js
Fighting_p8 小时前
【element UI】el-select 组件下拉数据某一行文字过多时,文字换行展示,避免el-select下拉框被撑宽,导致页面过丑
前端·javascript
未来之窗软件服务8 小时前
幽冥大陆(一百12)js打造json硬件管道——东方仙盟筑基期
开发语言·javascript·算法·json·仙盟创梦ide·东方仙盟·东方仙盟算法
王家视频教程图书馆8 小时前
vue3从本地选择一个视频 展示到视频组件中
前端·javascript·音视频
天外来鹿9 小时前
Map/Set/WeakMap/WeakSet学习笔记
前端·javascript·笔记·学习
Luna-player9 小时前
前端中stylus是干嘛用的
前端·css·stylus
紫_龙9 小时前
最新版vue3+TypeScript开发入门到实战教程之vue3与vue2语法优劣对比
前端·javascript·typescript