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

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

项目背景

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

项目实现

1. HTML 结构

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

html

    
    
    
    



    
二进制猜数字游戏
    
我会展示6张卡片，你只需告诉我数字是否在卡片上，我就能猜出你心中所想的1 - 63之间的数字。
    开始游戏
    

        

        是
        否
    
    

    

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

2. CSS 样式

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

3. 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 开发的道路上更进一步！

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