本文详解如何实现：按下 enter 键重置双方分数至 0，并在任一玩家率先达到 3 分时自动禁用所有选项按钮，防止继续点击；重置后恢复交互能力。
本文详解如何实现：按下 enter 键重置双方分数至 0，并在任一玩家率先达到 3 分时自动禁用所有选项按钮，防止继续点击；重置后恢复交互能力。
在实现石头剪刀布（Rock-Paper-Scissors）游戏时，常见的交互需求包括：
✅ 游戏过程中实时更新用户与电脑的得分；
✅ 当任意一方得分达到 3 分时，立即终止游戏、显示胜负提示，并禁用所有选择按钮；
✅ 按下 Enter 键后，清空当前状态（重置分数、清空结果提示、还原电脑输出文本），并重新启用按钮，支持新一轮对战。
但原代码存在几个关键问题：
- userPoints 和 computerPoints 是普通变量，而非 DOM 元素，因此 userPoints.textContent = 0 会报错（.textContent 仅适用于元素节点）；
- endGame() 中重复注册 keydown 事件监听器，导致多次按 Enter 后触发多次重置；
- 缺少对选择按钮的禁用/启用逻辑，无法阻止用户在游戏结束后的无效点击；
- reset() 函数被定义了两次（重复声明），造成覆盖风险。
以下是修复并优化后的完整解决方案：
✅ 正确重置分数 + ✅ 禁用/启用按钮
const choices = ['Rock', 'Paper', 'Scissors'];
const userScoreEl = document.querySelector('.result-score-user');
const computerScoreEl = document.querySelector('.result-score-computer');
const computerOutputEl = document.querySelector('.computer-output');
const outcomeEl = document.querySelector('.outcome');
const choiceButtons = document.querySelectorAll('li');
let userPoints = 0;
let computerPoints = 0;
// 初始化显示
userScoreEl.textContent = userPoints;
computerScoreEl.textContent = computerPoints;
computerOutputEl.textContent = 'Computer chose...';
// 启用所有按钮（初始状态）
function enableChoices() {
choiceButtons.forEach(btn => btn.classList.remove('disabled'));
}
// 禁用所有按钮（游戏结束时）
function disableChoices() {
choiceButtons.forEach(btn => btn.classList.add('disabled'));
}
// 判断胜负并更新分数
function isWinner(userChoice) {
const computerChoice = choices[Math.floor(Math.random() * choices.length)];
computerOutputEl.textContent = computerChoice;
const combo = computerChoice + userChoice;
switch (combo) {
case 'RockScissors':
case 'ScissorsPaper':
case 'PaperRock':
outcomeEl.innerHTML = 'You Lose';
computerPoints++;
break;
case 'ScissorsRock':
case 'PaperScissors':
case 'RockPaper':
outcomeEl.innerHTML = 'You Win!';
userPoints++;
break;
default: // 包含所有平局组合（如 'RockRock'）
outcomeEl.innerHTML = 'Draw';
}
// 实时同步 DOM 显示
userScoreEl.textContent = userPoints;
computerScoreEl.textContent = computerPoints;
}
// 检查是否达成胜利条件（3 分），并响应
function checkGameOver() {
if (userPoints >= 3) {
outcomeEl.innerHTML = 'You Win the game!<br>Press Enter to play again';
disableChoices();
return true;
}
if (computerPoints >= 3) {
outcomeEl.innerHTML = 'You Lost the game.<br>Press Enter to play again';
disableChoices();
return true;
}
return false;
}
// 重置游戏状态
function resetGame() {
userPoints = 0;
computerPoints = 0;
userScoreEl.textContent = '0';
computerScoreEl.textContent = '0';
computerOutputEl.textContent = 'Computer chose...';
outcomeEl.innerHTML = '';
enableChoices(); // 关键：重置后必须重新启用按钮
}
// 绑定按键事件（仅绑定一次，避免重复监听）
document.addEventListener('keydown', (e) => {
if (e.key === 'Enter') {
resetGame();
}
});
// 绑定点击事件（每个按钮一次）
choiceButtons.forEach(button => {
button.addEventListener('click', () => {
// 若已禁用，直接忽略
if (button.classList.contains('disabled')) return;
const userChoice = button.textContent.trim();
isWinner(userChoice);
// 每次点击后检查是否结束
if (!checkGameOver()) {
// 可选：添加防抖或视觉反馈（如按钮短暂禁用）
button.style.opacity = '0.7';
setTimeout(() => button.style.opacity = '1', 300);
}
});
});? HTML 补充建议（增强可访问性与样式控制）
为配合上述逻辑，请确保 CSS 中定义 .disabled 类以视觉化禁用状态：
.choices li.disabled {
pointer-events: none;
opacity: 0.4;
cursor: not-allowed;
}同时，建议将 <li> 标签改为 <button> 更语义化（提升无障碍体验）：
<ul class="choices"> <li role="button" tabindex="0">Rock</li> <li role="button" tabindex="0">Paper</li> <li role="button" tabindex="0">Scissors</li> </ul>
并在 JS 中补充键盘支持（如 Enter / Space 触发点击）以完善交互。
⚠️ 注意事项总结
- 不要重复添加事件监听器：document.addEventListener('keydown', ...) 应只调用一次，否则每次游戏结束都会叠加监听器，导致按一次 Enter 执行多次重置；
- 禁用按钮 ≠ 移除事件监听器：使用 pointer-events: none + opacity + class 控制更安全、可逆；
- 变量 vs 元素要分清：userPoints 是数值变量，更新 DOM 必须通过 element.textContent 或 innerHTML；
- 重置后务必调用 enableChoices()：否则按钮将永远处于禁用状态；
- checkGameOver() 应在每次点击后立即执行，确保及时响应胜利条件。
通过以上实现，你的石头剪刀布游戏将具备专业级的交互控制能力：清晰的状态反馈、可靠的禁用机制、无副作用的 Enter 重置流程，且代码结构清晰、易于维护与扩展。
