如何为石头剪刀布游戏扩展无限选项，无需重复编写条件判断

嘿，我完全懂你想要的那种灵活可扩展的游戏逻辑——不用每次加新选项（比如lizard、spock）就堆一堆else if，对吧？咱们把你的代码重构一下，让它轻松支持无限扩展，核心思路是用规则映射对象来替代硬编码的条件判断，下面一步步来：

核心思路 #

我们定义一个规则对象，每个键代表玩家的选择，对应的值是这个选择能击败的所有选项数组。这样新增选项时，只需要往这个对象里加一行配置，完全不用碰胜负判断的核心逻辑！

重构后的完整代码 #

let userScore = 0;
let computerScore = 0;
const userScoreSpan = document.getElementById("user-score");
const computerScoreSpan = document.getElementById("computer-score");
const scoreMessage = document.getElementById("score-message");

// 1. 定义胜负规则：键是玩家选择，值是该选择能击败的选项数组
const gameRules = {
  steen: ["schaar"],
  papier: ["steen"],
  schaar: ["papier"],
  // 新增选项只需在这里加配置！比如：
  lizard: ["spock", "papier"],
  spock: ["steen", "schaar"]
};

// 2. 电脑随机选择：直接从规则对象的键里取，自动适配新增选项
function getRandomChoice() {
  const choices = Object.keys(gameRules);
  const randomNumber = Math.floor(Math.random() * choices.length);
  return choices[randomNumber];
}

function win() {
  userScore++;
  userScoreSpan.innerHTML = userScore;
  scoreMessage.innerHTML = "<span style='color: green;'>You Won!</span>";
}

function lose() {
  computerScore++;
  computerScoreSpan.innerHTML = computerScore;
  scoreMessage.innerHTML = "<span style='color: red;'>You Lost!</span>";
}

function draw() {
  scoreMessage.innerHTML = "It's a Draw!";
}

// 3. 重构后的游戏逻辑：完全不用else if！
function Game(userChoice) {
  const computerChoice = getRandomChoice();
  
  // 先判断平局
  if (userChoice === computerChoice) {
    draw();
    return;
  }
  
  // 检查玩家选择是否能击败电脑选择
  if (gameRules[userChoice].includes(computerChoice)) {
    win();
  } else {
    lose();
  }
}

// 4. 绑定UI事件：新增选项只需加对应的事件监听
function main() {
  // 原有选项
  document.getElementById("schaar").addEventListener("click", () => Game("schaar"));
  document.getElementById("steen").addEventListener("click", () => Game("steen"));
  document.getElementById("papier").addEventListener("click", () => Game("papier"));
  
  // 新增选项的事件监听（如果有对应的DOM元素）
  // document.getElementById("lizard").addEventListener("click", () => Game("lizard"));
  // document.getElementById("spock").addEventListener("click", () => Game("spock"));
}

main();

扩展步骤（新增选项比如lizard） #

1. 在gameRules对象里添加一行：lizard: ["spock", "papier"]（定义lizard能击败的选项）
2. 在HTML里添加对应的DOM元素（比如<div id="lizard">Lizard</div>）
3. 在main()函数里加一行事件监听：document.getElementById("lizard").addEventListener("click", () => Game("lizard"));
4. 搞定！不用改任何其他逻辑

为什么这个方案更好？ #

• 极致可扩展：新增N个选项都只需要重复上面3步，核心逻辑完全不用动
• 代码简洁易读：把硬编码的条件变成了清晰的规则配置，谁都能看懂
• 维护成本低：以后改胜负规则，直接改gameRules就行，不用在一堆else if里找

内容的提问来源于stack exchange，提问作者Jonas.D