本文于 2025年8月19日 11:35 更新，注意查看最新内容
在B站看到一个关于算命的纪录片，里面有一个大家经常见到的街头小游戏，叫不说话知道你姓啥，大概就是给你几张卡片，每张卡片上的名字若干，然后你选一张有你姓氏的，然后把一本小册子盖住地上一块含有你名字的区域，盖住的区域名字大概有十来个，对方就能知道你姓啥。感觉还挺有意思的，于是去了解了一下，原理是用二进制实现了一个算法，于是用AI也写了一个类似的在线版，大家有兴趣可以玩一下。最后，相信科学，反对迷信。
https://lab.lklog.cn/caixingshi/
源码如下：
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>猜姓氏</title>
<style>
* {
box-sizing: border-box;
margin: 0;
padding: 0;
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}
body {
background: linear-gradient(135deg, #6e8efb, #a777e3);
min-height: 100vh;
padding: 20px;
color: #333;
}
.container {
background: rgba(255, 255, 255, 0.95);
border-radius: 20px;
box-shadow: 0 15px 35px rgba(0, 0, 0, 0.2);
padding: 35px;
max-width: 1200px;
margin: 0 auto;
text-align: center;
}
h1 {
color: #4a2bca;
margin-bottom: 25px;
font-size: 2.5rem;
text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.1);
position: relative;
display: inline-block;
}
h1::after {
content: '';
position: absolute;
bottom: -10px;
left: 25%;
width: 50%;
height: 4px;
background: linear-gradient(90deg, transparent, #4a2bca, transparent);
border-radius: 2px;
}
.instructions {
margin-bottom: 30px;
font-size: 1.2rem;
line-height: 1.6;
color: #555;
padding: 0 20px;
}
.highlight {
background: linear-gradient(120deg, #a777e3, #6e8efb);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
font-weight: bold;
}
/* 统一网格容器样式 - 一行显示3个 */
.card-container, .large-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 25px;
margin-bottom: 35px;
}
/* 卡片和区域统一样式 - 确保完全一致 */
.card, .grid-cell {
background: white;
border-radius: 18px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.12);
padding: 20px;
cursor: pointer;
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
position: relative;
overflow: hidden;
aspect-ratio: 3/4; /* 保持一致的宽高比 */
}
.card::before, .grid-cell::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 5px;
background: linear-gradient(90deg, #6e8efb, #a777e3);
opacity: 0;
transition: opacity 0.3s ease;
}
.card:hover, .grid-cell:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 30px rgba(0, 0, 0, 0.18);
}
.card:hover::before, .grid-cell:hover::before {
opacity: 1;
}
.card.selected, .grid-cell.selected {
border: 3px solid #4a2bca;
transform: scale(1.05);
box-shadow: 0 15px 30px rgba(74, 43, 202, 0.2);
}
.card-title, .grid-title {
font-weight: bold;
margin-bottom: 15px;
color: #4a2bca;
font-size: 1.3rem;
height: 30px; /* 固定标题高度，确保内容对齐 */
}
/* 统一内部网格样式 */
.card-grid, .grid-inner-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
grid-template-rows: repeat(4, 1fr);
gap: 10px;
height: calc(100% - 45px); /* 精确计算高度，避免溢出 */
}
/* 统一姓氏单元格样式 */
.surname-cell, .grid-surname-cell {
padding: 8px 5px;
background: #f0f4ff;
border-radius: 10px;
font-size: 0.95rem;
display: flex;
align-items: center;
justify-content: center;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.05);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.large-grid-container {
background: #f8faff;
border-radius: 18px;
padding: 25px;
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
margin: 20px auto;
}
.btn {
background: linear-gradient(135deg, #6e8efb, #a777e3);
color: white;
border: none;
border-radius: 50px;
padding: 16px 40px;
font-size: 1.2rem;
font-weight: bold;
cursor: pointer;
transition: all 0.3s ease;
margin-top: 25px;
}
.btn:hover {
transform: translateY(-3px);
box-shadow: 0 8px 25px rgba(106, 142, 251, 0.6);
}
.btn:disabled {
background: #cccccc;
cursor: not-allowed;
transform: none;
box-shadow: none;
}
.result {
margin-top: 40px;
padding: 30px;
background: linear-gradient(135deg, #e6f7ff, #f0f4ff);
border-radius: 20px;
animation: fadeIn 0.6s ease;
}
@keyframes fadeIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.result h2 {
color: #4a2bca;
margin-bottom: 20px;
font-size: 2rem;
}
.result-surname {
font-size: 4.5rem;
font-weight: bold;
color: #ff6b6b;
margin: 20px 0;
animation: pulse 1.5s infinite;
}
@keyframes pulse {
0% { transform: scale(1); }
50% { transform: scale(1.05); }
100% { transform: scale(1); }
}
.play-again {
background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
margin-top: 20px;
}
.step {
display: none;
}
.step.active {
display: block;
animation: fadeIn 0.6s ease;
}
.progress-bar {
display: flex;
justify-content: space-between;
max-width: 400px;
margin: 0 auto 40px;
position: relative;
}
.progress-step {
width: 40px;
height: 40px;
border-radius: 50%;
background: #ddd;
display: flex;
align-items: center;
justify-content: center;
font-weight: bold;
color: #777;
z-index: 2;
}
.progress-step.active {
background: #4a2bca;
color: white;
}
.progress-step.completed {
background: #8a63d2;
color: white;
}
.progress-bar::before {
content: '';
position: absolute;
top: 50%;
left: 20px;
right: 20px;
height: 6px;
background: #ddd;
transform: translateY(-50%);
z-index: 1;
}
/* 调试信息样式 */
.debug-info {
margin-top: 20px;
padding: 10px;
background: #f0f0f0;
border-radius: 8px;
font-size: 0.8rem;
color: #666;
display: none;
}
</style>
</head>
<body>
<div class="container">
<h1>猜姓氏</h1>
<div class="progress-bar">
<div class="progress-step active">1</div>
<div class="progress-step">2</div>
<div class="progress-step">结果</div>
</div>
<div class="step active" id="step1">
<div class="instructions">
<p>请从下面<span class="highlight">9张卡片</span>中选择<span class="highlight">包含您真实姓氏</span>的一张卡片。</p>
</div>
<div class="card-container" id="cardContainer">
<!-- 卡片将由JavaScript生成 -->
</div>
<button class="btn" id="nextToStep2" disabled>下一步</button>
</div>
<div class="step" id="step2">
<div class="instructions">
<p>请从下面<span class="highlight">16个区域</span>中选择<span class="highlight">包含您真实姓氏</span>的区域。</p>
</div>
<div class="large-grid-container">
<div class="large-grid" id="largeGrid">
<!-- 大网格将由JavaScript生成 -->
</div>
</div>
<button class="btn" id="showResult" disabled>揭晓答案</button>
</div>
<div class="step" id="step3">
<div class="result">
<h2><a href="https://lklog.cn" target="_blank">龙鲲博客</a>猜出您的姓氏是：</h2>
<div class="result-surname" id="resultSurname">?</div>
<button class="btn play-again" id="playAgain">再玩一次</button>
</div>
</div>
<!-- 调试信息区域 -->
<div class="debug-info" id="debugInfo"></div>
</div>
<script>
document.addEventListener('DOMContentLoaded', function() {
// 重新设计的姓氏数据结构 - 确保每个(card, grid)组合唯一
const surnameData = {
// 卡片0 (第一张卡片) 上的姓氏
"李": {card: 0, grid: 0},
"王": {card: 0, grid: 1},
"张": {card: 0, grid: 2},
"刘": {card: 0, grid: 3},
"陈": {card: 0, grid: 4},
"杨": {card: 0, grid: 5},
"赵": {card: 0, grid: 6},
"黄": {card: 0, grid: 7},
"周": {card: 0, grid: 8},
"吴": {card: 0, grid: 9},
"徐": {card: 0, grid: 10},
"孙": {card: 0, grid: 11},
"胡": {card: 0, grid: 12},
"朱": {card: 0, grid: 13},
"高": {card: 0, grid: 14},
"林": {card: 0, grid: 15},
// 卡片1 (第二张卡片) 上的姓氏
"何": {card: 1, grid: 0},
"郭": {card: 1, grid: 1},
"马": {card: 1, grid: 2},
"罗": {card: 1, grid: 3},
"梁": {card: 1, grid: 4},
"宋": {card: 1, grid: 5},
"郑": {card: 1, grid: 6},
"谢": {card: 1, grid: 7},
"韩": {card: 1, grid: 8},
"唐": {card: 1, grid: 9},
"冯": {card: 1, grid: 10},
"于": {card: 1, grid: 11},
"董": {card: 1, grid: 12},
"萧": {card: 1, grid: 13},
"程": {card: 1, grid: 14},
"曹": {card: 1, grid: 15},
// 卡片2 (第三张卡片) 上的姓氏
"袁": {card: 2, grid: 0},
"邓": {card: 2, grid: 1},
"许": {card: 2, grid: 2},
"傅": {card: 2, grid: 3},
"沈": {card: 2, grid: 4},
"曾": {card: 2, grid: 5},
"彭": {card: 2, grid: 6},
"吕": {card: 2, grid: 7},
"苏": {card: 2, grid: 8},
"卢": {card: 2, grid: 9},
"蒋": {card: 2, grid: 10},
"蔡": {card: 2, grid: 11},
"贾": {card: 2, grid: 12},
"丁": {card: 2, grid: 13},
"魏": {card: 2, grid: 14},
"薛": {card: 2, grid: 15},
// 卡片3 (第四张卡片) 上的姓氏
"叶": {card: 3, grid: 0},
"阎": {card: 3, grid: 1},
"余": {card: 3, grid: 2},
"潘": {card: 3, grid: 3},
"杜": {card: 3, grid: 4},
"戴": {card: 3, grid: 5},
"夏": {card: 3, grid: 6},
"锺": {card: 3, grid: 7},
"汪": {card: 3, grid: 8},
"田": {card: 3, grid: 9},
"任": {card: 3, grid: 10},
"姜": {card: 3, grid: 11},
"范": {card: 3, grid: 12},
"方": {card: 3, grid: 13},
"石": {card: 3, grid: 14},
"姚": {card: 3, grid: 15},
// 卡片4 (第五张卡片) 上的姓氏
"谭": {card: 4, grid: 0},
"廖": {card: 4, grid: 1},
"邹": {card: 4, grid: 2},
"熊": {card: 4, grid: 3},
"金": {card: 4, grid: 4},
"陆": {card: 4, grid: 5},
"郝": {card: 4, grid: 6},
"孔": {card: 4, grid: 7},
"白": {card: 4, grid: 8},
"崔": {card: 4, grid: 9},
"康": {card: 4, grid: 10},
"毛": {card: 4, grid: 11},
"邱": {card: 4, grid: 12},
"秦": {card: 4, grid: 13},
"江": {card: 4, grid: 14},
"史": {card: 4, grid: 15},
// 卡片5 (第六张卡片) 上的姓氏
"顾": {card: 5, grid: 0},
"侯": {card: 5, grid: 1},
"邵": {card: 5, grid: 2},
"孟": {card: 5, grid: 3},
"龙": {card: 5, grid: 4},
"万": {card: 5, grid: 5},
"段": {card: 5, grid: 6},
"雷": {card: 5, grid: 7},
"钱": {card: 5, grid: 8},
"汤": {card: 5, grid: 9},
"尹": {card: 5, grid: 10},
"黎": {card: 5, grid: 11},
"易": {card: 5, grid: 12},
"常": {card: 5, grid: 13},
"武": {card: 5, grid: 14},
"乔": {card: 5, grid: 15},
// 卡片6 (第七张卡片) 上的姓氏
"贺": {card: 6, grid: 0},
"赖": {card: 6, grid: 1},
"龚": {card: 6, grid: 2},
"文": {card: 6, grid: 3},
"庞": {card: 6, grid: 4},
"樊": {card: 6, grid: 5},
"兰": {card: 6, grid: 6},
"殷": {card: 6, grid: 7},
"施": {card: 6, grid: 8},
"陶": {card: 6, grid: 9},
"洪": {card: 6, grid: 10},
"翟": {card: 6, grid: 11},
"安": {card: 6, grid: 12},
"颜": {card: 6, grid: 13},
"倪": {card: 6, grid: 14},
"严": {card: 6, grid: 15},
// 卡片7 (第八张卡片) 上的姓氏
"牛": {card: 7, grid: 0},
"温": {card: 7, grid: 1},
"芦": {card: 7, grid: 2},
"季": {card: 7, grid: 3},
"俞": {card: 7, grid: 4},
"章": {card: 7, grid: 5},
"鲁": {card: 7, grid: 6},
"葛": {card: 7, grid: 7},
"伍": {card: 7, grid: 8},
"韦": {card: 7, grid: 9},
"申": {card: 7, grid: 10},
"尤": {card: 7, grid: 11},
"毕": {card: 7, grid: 12},
"聂": {card: 7, grid: 13},
"丛": {card: 7, grid: 14},
"焦": {card: 7, grid: 15},
// 卡片8 (第九张卡片) 上的姓氏
"向": {card: 8, grid: 0},
"柳": {card: 8, grid: 1},
"邢": {card: 8, grid: 2},
"路": {card: 8, grid: 3},
"岳": {card: 8, grid: 4},
"齐": {card: 8, grid: 5},
"梅": {card: 8, grid: 6},
"莫": {card: 8, grid: 7},
"庄": {card: 8, grid: 8},
"辛": {card: 8, grid: 9},
"管": {card: 8, grid: 10},
"祝": {card: 8, grid: 11},
"左": {card: 8, grid: 12},
"涂": {card: 8, grid: 13},
"谷": {card: 8, grid: 14},
"时": {card: 8, grid: 15}
};
// 游戏状态
const gameState = {
selectedCard: null, // 选中的卡片索引
selectedGrid: null, // 选中的区域索引
allSurnames: Object.keys(surnameData) // 所有姓氏列表
};
// 验证数据完整性和唯一性
function validateSurnameData() {
const cardCounts = Array(9).fill(0);
const gridCounts = Array(16).fill(0);
const combinations = new Set();
const errors = [];
// 检查每个卡片和区域是否有正确数量的姓氏
for (const surname in surnameData) {
const {card, grid} = surnameData[surname];
cardCounts[card]++;
gridCounts[grid]++;
// 检查组合唯一性
const key = `${card},${grid}`;
if (combinations.has(key)) {
errors.push(`组合 (卡片${card + 1}, 区域${grid + 1}) 不唯一，被多个姓氏使用`);
}
combinations.add(key);
}
// 检查卡片姓氏数量 (应为16个)
cardCounts.forEach((count, index) => {
if (count !== 16) {
errors.push(`卡片 ${index + 1} 姓氏数量错误: 应有16个，实际有${count}个`);
}
});
// 检查区域姓氏数量 (应为9个)
gridCounts.forEach((count, index) => {
if (count !== 9) {
errors.push(`区域 ${index + 1} 姓氏数量错误: 应有9个，实际有${count}个`);
}
});
// 显示调试信息
const debugInfo = document.getElementById('debugInfo');
if (errors.length === 0) {
debugInfo.textContent = "数据验证通过: 所有卡片各有16个姓氏，所有区域各有9个姓氏，所有组合唯一";
} else {
debugInfo.textContent = "数据验证错误:\n" + errors.join("\n");
}
return errors.length === 0;
}
// 生成卡片（第一步）
function generateCards() {
const cardContainer = document.getElementById('cardContainer');
cardContainer.innerHTML = '';
// 为每张卡片(0-8)生成内容
for (let cardIndex = 0; cardIndex < 9; cardIndex++) {
const card = document.createElement('div');
card.className = 'card';
card.dataset.index = cardIndex;
// 卡片标题
const title = document.createElement('div');
title.className = 'card-title';
title.textContent = `卡片 ${cardIndex + 1}`;
card.appendChild(title);
// 姓氏网格
const grid = document.createElement('div');
grid.className = 'card-grid';
// 收集该卡片上的所有姓氏
const cardSurnames = [];
for (const surname in surnameData) {
if (surnameData[surname].card === cardIndex) {
cardSurnames.push(surname);
}
}
// 填充4x4网格 (确保16个)
for (let i = 0; i < 16; i++) {
const cell = document.createElement('div');
cell.className = 'surname-cell';
cell.textContent = cardSurnames[i];
grid.appendChild(cell);
}
card.appendChild(grid);
// 添加点击事件
card.addEventListener('click', () => {
toggleCardSelection(cardIndex);
});
cardContainer.appendChild(card);
}
}
// 切换卡片选择状态
function toggleCardSelection(cardIndex) {
if (gameState.selectedCard === cardIndex) {
gameState.selectedCard = null;
document.querySelectorAll('.card').forEach(card => {
card.classList.remove('selected');
});
} else {
gameState.selectedCard = cardIndex;
document.querySelectorAll('.card').forEach((card, idx) => {
card.classList.toggle('selected', idx === cardIndex);
});
}
document.getElementById('nextToStep2').disabled = gameState.selectedCard === null;
}
// 生成区域（第二步）
function generateLargeGrid() {
const largeGrid = document.getElementById('largeGrid');
largeGrid.innerHTML = '';
// 修改为4x4网格布局
largeGrid.style.gridTemplateColumns = 'repeat(4, 1fr)';
// 为每个区域(0-15)生成内容
for (let gridIndex = 0; gridIndex < 16; gridIndex++) {
const cell = document.createElement('div');
cell.className = 'grid-cell';
cell.dataset.index = gridIndex;
// 区域标题
const title = document.createElement('div');
title.className = 'grid-title';
title.textContent = `区域 ${gridIndex + 1}`;
cell.appendChild(title);
// 姓氏网格 - 使用3x3网格，因为每个区域有9个姓氏
const innerGrid = document.createElement('div');
innerGrid.className = 'card-grid';
innerGrid.style.gridTemplateColumns = 'repeat(3, 1fr)';
innerGrid.style.gridTemplateRows = 'repeat(3, 1fr)';
// 收集该区域上的所有姓氏
const gridSurnames = [];
for (const surname in surnameData) {
if (surnameData[surname].grid === gridIndex) {
gridSurnames.push(surname);
}
}
// 填充3x3网格 (确保9个)
for (let i = 0; i < 9; i++) {
const surnameCell = document.createElement('div');
surnameCell.className = 'surname-cell';
surnameCell.textContent = gridSurnames[i];
innerGrid.appendChild(surnameCell);
}
cell.appendChild(innerGrid);
// 添加点击事件
cell.addEventListener('click', () => {
toggleGridSelection(gridIndex);
});
largeGrid.appendChild(cell);
}
}
// 切换区域选择状态
function toggleGridSelection(gridIndex) {
if (gameState.selectedGrid === gridIndex) {
gameState.selectedGrid = null;
document.querySelectorAll('.grid-cell').forEach(cell => {
cell.classList.remove('selected');
});
} else {
gameState.selectedGrid = gridIndex;
document.querySelectorAll('.grid-cell').forEach((cell, idx) => {
cell.classList.toggle('selected', idx === gridIndex);
});
}
document.getElementById('showResult').disabled = gameState.selectedGrid === null;
}
// 根据选择的卡片和区域猜测姓氏
function guessSurname() {
for (const surname in surnameData) {
const data = surnameData[surname];
if (data.card === gameState.selectedCard && data.grid === gameState.selectedGrid) {
return surname;
}
}
return "未知";
}
// 初始化游戏事件监听
function initEventListeners() {
// 下一步按钮
document.getElementById('nextToStep2').addEventListener('click', () => {
document.getElementById('step1').classList.remove('active');
document.getElementById('step2').classList.add('active');
// 更新进度条
document.querySelectorAll('.progress-step')[0].classList.add('completed');
document.querySelectorAll('.progress-step')[1].classList.add('active');
// 生成区域网格
generateLargeGrid();
});
// 揭晓答案按钮
document.getElementById('showResult').addEventListener('click', () => {
document.getElementById('step2').classList.remove('active');
document.getElementById('step3').classList.add('active');
// 更新进度条
document.querySelectorAll('.progress-step')[1].classList.add('completed');
document.querySelectorAll('.progress-step')[2].classList.add('active');
// 显示结果
const resultElement = document.getElementById('resultSurname');
resultElement.textContent = '思考中...';
setTimeout(() => {
resultElement.textContent = guessSurname();
}, 1000);
});
// 再玩一次按钮
document.getElementById('playAgain').addEventListener('click', () => {
// 重置游戏状态
gameState.selectedCard = null;
gameState.selectedGrid = null;
// 重置界面
document.getElementById('step3').classList.remove('active');
document.getElementById('step1').classList.add('active');
// 重置进度条
document.querySelectorAll('.progress-step').forEach(step => {
step.classList.remove('active', 'completed');
});
document.querySelectorAll('.progress-step')[0].classList.add('active');
// 重新生成卡片
generateCards();
// 禁用按钮
document.getElementById('nextToStep2').disabled = true;
document.getElementById('showResult').disabled = true;
});
}
// 初始化游戏
function initGame() {
// 验证数据
validateSurnameData();
// 生成卡片
generateCards();
// 初始化事件监听
initEventListeners();
}
// 启动游戏
initGame();
});
</script>
</body>
</html>
Comments | NOTHING