用 HTML、CSS 和 JavaScript 实现二进制猜数字游戏

在 Web 开发的世界里，我们常常希望通过简单而有趣的项目来巩固和应用所学的知识。今天，我们就来介绍一个基于 HTML、CSS 和 JavaScript 实现的二进制猜数字游戏，这个游戏既可以作为新手入门的练手项目，也能帮助大家更好地理解二进制的原理。

项目背景

二进制猜数字游戏是一个经典的利用二进制原理设计的小游戏。游戏通过展示 6 张卡片，玩家只需告知数字是否在卡片上，就能让程序猜出玩家心中所想的 1 - 63 之间的数字。这个游戏背后的原理是，任何一个 1 - 63 之间的整数都可以用 6 位二进制数来表示，而每张卡片对应二进制数的一位。

项目实现

1. HTML 结构

HTML 部分负责构建游戏的基本结构和布局。以下是核心的 HTML 代码：

html

html 复制代码

<!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 {
            font-family: Arial, sans-serif;
            text-align: center;
            padding: 20px;
        }

        button {
            padding: 10px 20px;
            margin: 5px;
            font-size: 16px;
        }

        #result {
            font-size: 24px;
            font-weight: bold;
            margin-top: 20px;
        }
    </style>
</head>

<body>
    <h1>二进制猜数字游戏</h1>
    <p>我会展示6张卡片，你只需告诉我数字是否在卡片上，我就能猜出你心中所想的1 - 63之间的数字。</p>
    <button onclick="showCard(0)">开始游戏</button>
    <div id="card" style="display: none;">
        <p id="cardText"></p>
        <button onclick="numberIsOnCard()">是</button>
        <button onclick="numberIsNotOnCard()">否</button>
    </div>
    <div id="result"></div>
    <script>
        const cards = [
            [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39, 41, 43, 45, 47, 49, 51, 53, 55, 57, 59, 61, 63],
            [2, 3, 6, 7, 10, 11, 14, 15, 18, 19, 22, 23, 26, 27, 30, 31, 34, 35, 38, 39, 42, 43, 46, 47, 50, 51, 54, 55, 58, 59, 62, 63],
            [4, 5, 6, 7, 12, 13, 14, 15, 20, 21, 22, 23, 28, 29, 30, 31, 36, 37, 38, 39, 44, 45, 46, 47, 52, 53, 54, 55, 60, 61, 62, 63],
            [8, 9, 10, 11, 12, 13, 14, 15, 24, 25, 26, 27, 28, 29, 30, 31, 40, 41, 42, 43, 44, 45, 46, 47, 56, 57, 58, 59, 60, 61, 62, 63],
            [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63],
            [32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63]
        ];
        let currentCard = 0;
        let guessedNumber = 0;

        function showCard(cardIndex) {
            document.querySelector('button').style.display = 'none';
            document.getElementById('card').style.display = 'block';
            document.getElementById('cardText').textContent = `数字是否在以下卡片中：${cards[cardIndex].join(', ')}`;
        }

        function numberIsOnCard() {
            guessedNumber += Math.pow(2, currentCard);
            nextCard();
        }

        function numberIsNotOnCard() {
            nextCard();
        }

        function nextCard() {
            currentCard++;
            if (currentCard < cards.length) {
                showCard(currentCard);
            } else {
                document.getElementById('card').style.display = 'none';
                document.getElementById('result').textContent = `你心中所想的数字是：${guessedNumber}`;
            }
        }
    </script>
</body>

</html>

这段代码创建了一个简单的网页，包含一个标题、一段游戏说明、一个开始游戏的按钮、一个用于显示卡片内容的区域和一个用于显示游戏结果的区域。

2. CSS 样式

CSS 部分用于美化页面，使游戏界面更加美观和易于操作。代码中设置了页面的字体、文本对齐方式、按钮的样式和结果显示区域的样式。

3. JavaScript 逻辑

JavaScript 是实现游戏核心逻辑的部分。以下是关键的 JavaScript 代码：

javascript

javascript 复制代码

const cards = [
    [1, 3, 5, 7, 9, 11, 13, 15, 17, 19, 21, 23, 25, 27, 29, 31, 33, 35, 37, 39, 41, 43, 45, 47, 49, 51, 53, 55, 57, 59, 61, 63],
    [2, 3, 6, 7, 10, 11, 14, 15, 18, 19, 22, 23, 26, 27, 30, 31, 34, 35, 38, 39, 42, 43, 46, 47, 50, 51, 54, 55, 58, 59, 62, 63],
    [4, 5, 6, 7, 12, 13, 14, 15, 20, 21, 22, 23, 28, 29, 30, 31, 36, 37, 38, 39, 44, 45, 46, 47, 52, 53, 54, 55, 60, 61, 62, 63],
    [8, 9, 10, 11, 12, 13, 14, 15, 24, 25, 26, 27, 28, 29, 30, 31, 40, 41, 42, 43, 44, 45, 46, 47, 56, 57, 58, 59, 60, 61, 62, 63],
    [16, 17, 18, 19, 20, 21, 22, 23, 24, 25, 26, 27, 28, 29, 30, 31, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63],
    [32, 33, 34, 35, 36, 37, 38, 39, 40, 41, 42, 43, 44, 45, 46, 47, 48, 49, 50, 51, 52, 53, 54, 55, 56, 57, 58, 59, 60, 61, 62, 63]
];
let currentCard = 0;
let guessedNumber = 0;

function showCard(cardIndex) {
    document.querySelector('button').style.display = 'none';
    document.getElementById('card').style.display = 'block';
    document.getElementById('cardText').textContent = `数字是否在以下卡片中：${cards[cardIndex].join(', ')}`;
}

function numberIsOnCard() {
    guessedNumber += Math.pow(2, currentCard);
    nextCard();
}

function numberIsNotOnCard() {
    nextCard();
}

function nextCard() {
    currentCard++;
    if (currentCard < cards.length) {
        showCard(currentCard);
    } else {
        document.getElementById('card').style.display = 'none';
        document.getElementById('result').textContent = `你心中所想的数字是：${guessedNumber}`;
    }
}

cards 数组存储了 6 张卡片上的数字。
currentCard 变量用于记录当前展示的卡片序号。
guessedNumber 变量用于存储最终猜出的数字。
showCard 函数用于显示指定卡片的内容。
numberIsOnCard 函数在玩家选择 "是" 时，将当前卡片对应的二进制位的值累加到 guessedNumber 中，并切换到下一张卡片。
numberIsNotOnCard 函数在玩家选择 "否" 时，直接切换到下一张卡片。
nextCard 函数用于判断是否还有卡片需要展示，如果有则继续展示下一张，否则显示最终的猜测结果。

项目运行

将上述代码保存为一个 .html 文件，然后在浏览器中打开该文件，即可开始游戏。点击 "开始游戏" 按钮，按照提示依次选择数字是否在卡片上，最后程序会显示出你心中所想的数字。

总结

通过这个项目，我们不仅实现了一个有趣的二进制猜数字游戏，还复习了 HTML、CSS 和 JavaScript 的基础知识。同时，也加深了对二进制原理的理解。希望这个项目能对你有所帮助，让你在 Web 开发的道路上更进一步！

以上就是关于这个二进制猜数字游戏项目的详细介绍，你可以根据自己的需求对代码进行扩展和优化，比如增加更多的交互效果、改进界面设计等。