本文详解如何实现：按下 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;
}
同时，建议将
