石头剪刀布是一款简单有趣的游戏，双方需要同时做出“石头”、“剪刀”或“布”的手势。这个游戏只有两种可能的结果：平局，或者一方获胜另一方落败。
前置知识：
实现思路
- 首先，让我们为游戏创建 HTML 结构。
- 然后，我们可以使用 CSS 来美化网页，增强其视觉吸引力和响应能力。
- 在 JavaScript 中，我们需要创建一个函数 game()，它将包含游戏的所有核心逻辑。
- 在函数内部，声明三个变量 playerScore、computerScore 和 moves，分别用来记录玩家得分、电脑得分以及已完成的回合数。
- 创建一个函数 playGame()。在该函数内部，使用 DOM 操作获取我们在 HTML 中创建的三个按钮作为玩家输入。创建一个数组 playerOptions，将这三个按钮作为其元素。同样，为电脑选项创建一个数组。
- 在 playerOptions 上使用 forEach() 循环，这样我们就可以通过一段代码为所有按钮添加事件监听器。在循环内部，将回合计数器（moves）加 1，并通过从 10 中减去已完成回合数，在屏幕上显示剩余的回合数。为电脑选项生成一个随机值，并将其与玩家的输入进行比较。
- 创建一个函数 winner()，它接收两个参数：一个是玩家的输入，另一个是电脑的选择。该函数将判定是玩家还是电脑赢得该回合。
- 创建一个函数 gameOver()，它将显示带有“重新开始”按钮的最终结果。当回合数达到 10 时，将调用该函数。
- 最后，在 game() 函数内部调用 playGame() 函数。
示例： 这个示例展示了上述方法的代码实现。
HTML
CODEBLOCK_92146ed8
CSS
/ styles.css /
/ universal selector – Applies to whole document /
*{
padding: 0;
margin: 0;
box-sizing: border-box;
background: #082c6c;
color: #fff;
}
/ To center everything in game /
.game{
display: flex;
flex-direction: column;
height: 100vh;
width: 100vw;
justify-content: center;
align-items: center;
}
/ Title of the game /
.title{
position: absolute;
top: 0;
font-size: 4rem;
z-index: 2;
}
/ Score Board /
.score{
display: flex;
width: 30vw;
justify-content: space-evenly;
position: absolute;
top: 70px;
z-index: 1;
}
/ Score /
.p-count,.c-count{
text-align: center;
font-size: 1.5rem;
margin-top: 1rem;
}
/ displaying three buttons in one line /
.options{
display: flex;
width: 50vw;
justify-content: space-evenly;
margin-top: 2rem;
}
/ Styling on all three buttons /
.rock, .paper, .scissor{
padding: 0.8rem;
width: 100px;
border-radius: 10px;
background: green;
outline: none;
border-color: green;
border: none;
cursor: pointer;
}
.move{
font-size: 2rem;
font-weight: bold;
}
/ Reload button style /
.reload {
display: none