Bulls and Cows 游戏需用 HTML 搭配 JavaScript 实现：HTML 提供输入框与按钮界面，JavaScript 负责校验 4 位无重复数字输入、生成随机秘密数组、分两步计算 bulls（位置值全对）和 cows（值对位错且不重复计数）。
怎么用纯 HTML + JavaScript 实现 Bulls and Cows（公牛母牛）猜数字游戏
纯 HTML 无法实现交互逻辑，必须搭配 JavaScript；Bulls and Cows 的核心是「位置+数值」双重匹配判断，不是简单比大小。直接写 <input type="number"> 容易输错位数或重复数字，得手动校验。
- 用户输入必须是 4 位、无重复、0–9 数字（如
"1234"，不能是"0123"或"1123"） - 服务端不参与——整个游戏在浏览器内存里运行，
secretNumber用数组存（如[2, 5, 8, 1]），避免字符串比较陷阱 - 每次猜测后立刻计算
bulls（位置和值都对）和cows（值对但位置错），注意：一个数字只能被计一次（比如秘密数是[1,2,3,4]，猜[1,1,1,1]，结果是bulls=1, cows=0）
怎么写 calculateBullsAndCows() 函数才不出错
常见错误是嵌套循环暴力匹配导致重复计数，或者把 "0" 当成无效输入直接拒掉（其实 "0123" 是合法的 4 位字符串，但作为数字会被转成 123 丢首位）。正确做法是先校验输入格式，再分两步算：
- 第一遍循环：严格比索引，统计
bulls，同时把已匹配的数字从待查集合中剔除（用布尔标记或临时改值） - 第二遍循环：只比数值存在性，对每个未命中 bull 的猜测数字，在 secret 中找未被占用的位置，找到就
cows++并标记该 secret 位已用 - 别用
includes()或indexOf()直接扫——它们不区分是否已被配对过
function calculateBullsAndCows(guess, secret) {
let bulls = 0, cows = 0;
const used = [false, false, false, false]; // 标记 secret 各位是否已被配对
const guessArr = guess.split('').map(Number);
// Step 1: count bulls
for (let i = 0; i < 4; i++) {
if (guessArr[i] === secret[i]) {
bulls++;
used[i] = true;
}
}
// Step 2: count cows
for (let i = 0; i < 4; i++) {
if (used[i]) continue;
for (let j = 0; j < 4; j++) {
if (!used[j] && guessArr[i] === secret[j]) {
cows++;
used[j] = true;
break;
}
}
}
return { bulls, cows };
}
怎么防止用户乱输：HTML 表单校验 + JS 双重把关
<input pattern="[0-9]{4}"> 只防非数字和长度，拦不住 "1111" 或 "0000"。必须在 JS 提交时立刻检查：
- 用
new Set(guess).size === 4确保无重复（Set自动去重） - 用
/^[0-9]{4}$/.test(guess)确保纯数字且长度为 4（"0123"合法，" 123"不合法） - 不要用
parseInt(guess, 10)转数字——会吃掉前导零，"0123"变成123，长度只剩 3 - 输错时 focus 回输入框并
select()全选，方便重输
为什么 localStorage 存的是 attempts 和 history，而不是整个 secretNumber
刷新页面后如果重新生成 secretNumber，游戏就失去意义。但直接存数组 [2,5,8,1] 到 localStorage 会变成字符串 "2,5,8,1"，取回时得 split(',').map(Number)。更稳妥的是存 JSON：
立即学习“前端免费学习笔记（深入）”；
- 生成新局时：
localStorage.setItem('secret', JSON.stringify([2,5,8,1])) - 页面加载时：
const secret = JSON.parse(localStorage.getItem('secret') || '[]');，并加空数组兜底 - 如果用户清空了 storage 或首次访问，要触发新随机数生成，且确保
getRandomSecret()一定返回无重复的 4 位数组（可用while循环重试，或 Fisher-Yates 洗牌 0–9 再取前 4 位）
最易被忽略的点：移动端软键盘弹出后，输入框可能被遮挡；scrollIntoView({ behavior: 'smooth' }) 要在 input 聚焦后延迟几毫秒再调，否则 iOS 下常失效。
