用基于HTML+CSS+JS的石头剪刀布游戏实现完美人机对战，尽享趣味！

2024-02-06 03:59:01

基于HTML+CSS+JS的石头剪刀布游戏：打造完美人机对战

1. HTML 布局

游戏界面的核心部分包括：

选择区：用户可以选择“石头”、“剪刀”或“布”；
结果区：显示每次对战的结果；
计分板：记录双方胜场数。

<!DOCTYPE html>
<html>
<head>
  
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div id="container">
    <h1>石头剪刀布</h1>
    <div id="choices">
      <button id="rock">石头</button>
      <button id="paper">剪刀</button>
      <button id="scissors">布</button>
    </div>
    <div id="results">
      <h2>结果</h2>
      <p id="winner"></p>
    </div>
    <div id="scoreboard">
      <h2>得分</h2>
      <p id="user-score">用户：0</p>
      <p id="computer-score">电脑：0</p>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>

2. CSS 样式

CSS样式用于美化游戏界面，让游戏更具视觉吸引力。

/* 整体布局 */
#container {
  width: 400px;
  margin: 0 auto;
  text-align: center;
}

/* 选择区 */
#choices {
  display: flex;
  justify-content: space-around;
  margin-bottom: 30px;
}

/* 按钮样式 */
button {
  width: 100px;
  height: 100px;
  border: none;
  border-radius: 50%;
  background-color: #ccc;
  cursor: pointer;
}

/* 结果区 */
#results {
  margin-bottom: 30px;
}

/* 计分板 */
#scoreboard {
  display: flex;
  justify-content: space-around;
}

/* 得分样式 */
p {
  font-size: 24px;
}

3. JavaScript 逻辑

JavaScript代码用于实现游戏逻辑，包括：

用户选择“石头”、“剪刀”或“布”；
计算机随机选择“石头”、“剪刀”或“布”；
根据用户和计算机的选择判断胜负；
更新计分板。

// 获取元素
const choices = document.querySelectorAll('#choices button');
const results = document.getElementById('results');
const winner = document.getElementById('winner');
const userScore = document.getElementById('user-score');
const computerScore = document.getElementById('computer-score');

// 用户选择
choices.forEach((choice) => {
  choice.addEventListener('click', function() {
    // 获取用户选择
    const userChoice = this.id;

    // 计算机随机选择
    const computerChoice = getComputerChoice();

    // 判断胜负
    const winner = getWinner(userChoice, computerChoice);

    // 更新结果
    results.classList.remove('hidden');
    if (winner === 'user') {
      winner.textContent = '你赢了！';
      userScore.textContent = parseInt(userScore.textContent) + 1;
    } else if (winner === 'computer') {
      winner.textContent = '你输了！';
      computerScore.textContent = parseInt(computerScore.textContent) + 1;
    } else {
      winner.textContent = '平局！';
    }
  });
});

// 获取计算机随机选择
function getComputerChoice() {
  const choices = ['rock', 'paper', 'scissors'];
  const randomIndex = Math.floor(Math.random() * 3);
  return choices[randomIndex];
}

// 判断胜负
function getWinner(userChoice, computerChoice) {
  if (userChoice === computerChoice) {
    return 'draw';
  } else if (userChoice === 'rock') {
    if (computerChoice === 'paper') {
      return 'computer';
    } else {
      return 'user';
    }
  } else if (userChoice === 'paper') {
    if (computerChoice === 'scissors') {
      return 'computer';
    } else {
      return 'user';
    }
  } else if (userChoice === 'scissors') {
    if (computerChoice === 'rock') {
      return 'computer';
    } else {
      return 'user';
    }
  }
}