石头剪刀布：从儿童游戏到零和博弈的数字密码学

每一次点击，都是对2000年博弈论历史的瞬间重演。

你有没有想过，这个看似简单的儿童游戏，实际上是人类最早接触的博弈论原型？从中国古代的“手势令”到日本的“虫拳”，再到全球化的“石头剪刀布”，这个游戏横跨文化、语言和时代，成为人类共通的策略语言。

今天，我们要构建的，正是这种策略语言的数字版本。它看似简单——三种选择，三种结果——但其背后却隐藏着博弈论、随机性、人机交互和心理战的深度数学。这不仅仅是条件判断的练习，更是一场关于如何用代码模拟人类决策的哲学实验。

一、 界面的三元宇宙：HTML如何构建一个策略竞技场

让我们从HTML结构开始，这个界面必须同时服务于5岁儿童和博弈论学者：

<div class=\”game-container\”>
<h1>石头剪刀布</h1>
<div class=\”choices\”>
<button class=\”choice\” data-choice=\”rock\”>石头</button>
<button class=\”choice\” data-choice=\”paper\”>布</button>
<button class=\”choice\” data-choice=\”scissors\”>剪刀</button>
</div>
<p id=\”resultDisplay\”></p>
</div>

这个极简的结构，实际上是一个精心设计的决策界面：

1. 标题的跨文化共鸣 <h1>石头剪刀布</h1> 这个标题使用的是中文，但这个游戏在不同文化中有不同名称：

• 英语：Rock Paper Scissors
• 法语：Pierre Feuille Ciseaux
• 日语：じゃんけん (Janken)
• 韩语：가위 바위 보 (Gawi Bawi Bo)

这种文化差异引出了一个有趣的本地化问题：在全球化应用中，我们可能需要根据用户的语言环境动态显示标题和按钮文本。

2. 按钮作为策略门户 三个按钮代表了游戏的完整策略空间。在博弈论中，这被称为“策略集”——玩家可以选择的所有可能行动。每个按钮都有两个关键属性：

• class=\”choice\”：样式和选择的钩子
• data-choice=\”rock\”：数据属性存储策略标识，而不是依赖按钮文本

使用数据属性而非按钮文本来标识选择，这是一个重要的设计决策。它实现了关注点分离：按钮文本是给人看的（可能本地化），数据属性是给代码读的（稳定、可预测）。

3. 结果的空白画布 <p id=\”resultDisplay\”></p> 开始时是空的，这很重要。空状态创造了期待的空间。在游戏设计中，结果的揭示是一个关键时刻，空白的画布放大了这种期待感。

二、 视觉的均衡三角：CSS如何营造公平竞技场

游戏界面的视觉设计必须传达公平性和均衡性——没有任何选择应该看起来比其他选择更有优势。

body {

font-family: Arial, sans-serif;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}

熟悉的居中布局在这里创造了仪式感。游戏是一种仪式化的冲突，而居中布局将这种仪式置于舞台中心。Arial字体是中立、无个性的选择——不会偏向任何文化或风格。

.game-container {

text-align: center;
background-color: #f0f0f0;
padding: 20px;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}

这个容器的设计语言延续了我们之前项目的模式，但在游戏语境中有特殊含义：

• 圆角：软化了竞争的边缘，暗示这是友好的游戏
• 阴影：创造深度，暗示这是一个重要的交互空间
• 浅灰色背景：中性、无干扰，让用户专注于游戏本身

这种设计反映了现代游戏UI的趋势：将传统游戏的严肃性与数字游戏的友好性相结合。

.choices {

display: flex;
justify-content: center;
gap: 10px;
margin-bottom: 20px;
}

button.choice {

padding: 10px 20px;
font-size: 16px;
cursor: pointer;
}

选择按钮的布局是关键设计：

• display: flex 创建水平布局
• justify-content: center 确保三个按钮居中
• gap: 10px 提供视觉分离，强调每个选择的独立性
• 三个按钮完全相同的样式，强调了游戏的平衡性

但这里有一个有趣的细节：为什么没有为不同选择使用不同的颜色或图标？在更完整的游戏中，我们可能会为每个选择设计独特的视觉标识（如石头用灰色、布用米色、剪刀用银色），以增强可识别性和视觉吸引力。

三、 博弈论的代码实现：JavaScript如何模拟策略冲突

现在，我们来到这个游戏的核心：JavaScript如何实现这个古老博弈的数字版本。

const choices = [\’rock\’, \’paper\’, \’scissors\’];

这个简单的数组，定义了游戏的完整策略空间。选择将选项定义为字符串数组，而不是对象或映射，这是一个简洁的设计。但在更复杂的游戏中，我们可能需要为每个选项存储更多信息：

const choices = [
{

id: \’rock\’, name: \’石头\’, beats: \’scissors\’, icon: \’🪨\’ },
{

id: \’paper\’, name: \’布\’, beats: \’rock\’, icon: \’📄\’ },
{

id: \’scissors\’, name: \’剪刀\’, beats: \’paper\’, icon: \’✂️\’ }
];

这种结构化的数据更容易扩展和维护，特别是当我们需要添加新功能（如图标、多语言名称、胜率统计）时。

游戏逻辑：条件判断中的数学之美

document.querySelectorAll(\’.choice\’).forEach(button => {

button.addEventListener(\’click\’, function()