[Html/CSS] 基于 HTML+CSS+JS 的石头剪刀布游戏

// 变量 const choices = [{     id: 1,     name: "石头",     image: "./img/rock.png"   },{     id: 2,     name: "布",     image: "./img/paper.png"   },{     id: 3,     name: "剪刀",     image: "./img/scissors.png"   }]  let playerPoints = document.querySelector(".playerPoints") let computerPoints = document.querySelector(".computerPoints") let playerChoiceImg = document.querySelector("#playerChoiceImg") let playerChoiceTxt = document.querySelector("#playerChoiceTxt") let computerChoiceImg = document.querySelector("#computerChoiceImg") let computerChoiceTxt = document.querySelector("#computerChoiceTxt") let buttons = document.querySelectorAll(".btn") let points = [0, 0] let randomNumber;

// 事件监听 buttons.forEach((button) => {   button.addEventListener("click", () => {     if (button.textContent === "石头") {       playerChoiceImg.src = choices[0].image;       playerChoiceTxt.textContent = choices[0].name;     } else if (button.textContent === "布") {       playerChoiceImg.src = choices[1].image;       playerChoiceTxt.textContent = choices[1].name;     } else if (button.textContent === "剪刀") {       playerChoiceImg.src = choices[2].image;       playerChoiceTxt.textContent = choices[2].name;     }     getComputerChoice();     console.log(points);   }) })

正如大家在上面代码中看到的那样，我使用 if-else 语句以及根据按钮的 textContent 来定义哪个按钮执行什么操作。

if-else 语句：

如果按钮本身有 “石头” 文字，那么会在 playerChoiceTxt 中显示 “石头”，同时将 playerChoiceImg 的图像源更改为存储在对象中的图像源，其他 2 个也是如此。

之后，我创建了计算机的选择功能，如下所示：

// 选择功能 function getComputerChoice() {   computerChoiceImg.src = "./img/gif.gif"   setTimeout(() => {     randomNumber = Math.floor(Math.random() * 3);     computerChoiceImg.src = choices[randomNumber].image;     computerChoiceTxt.textContent = choices[randomNumber].name;     gameRules();     playerPoints.textContent = points[0];     computerPoints.textContent = points[1];     whoWon();   }, 1000); }

1. 我用石头、剪纸和剪刀的 3 幅图创建了一个循环 gif。

1b1f5532c9dd4671aaad4885bce3b12c.gif

2023-1-8 13:53 上传

2. 然后添加了一个 setTimeout，它负责动画的时长。

3. 在里面我让函数创建一个介于 0-2 之间的随机数，这是选择对象中的元素编号，这将指示计算机的选择。

4. 将文本和图像内容更改为所选对象元素的名称和图像源。

5. 然后运行 ​​gameRules () 函数（我们稍后会谈到）。

6. 更新了每个玩家点数指示器的文本内容。

34fc7abb4cc54a8e8da2d74a90b75ae1.png

2023-1-8 13:53 上传

7. 检查每个函数调用的分数，以检查是否有人获胜。（whoWon () 函数）

函数 gameRules ()

function gameRules() {   if (playerChoiceTxt.textContent === choices[0].name && computerChoiceTxt.textContent === choices[1].name) {     points[1]++;   } else if (playerChoiceTxt.textContent === choices[1].name && computerChoiceTxt.textContent === choices[2].name) {     points[1]++;   } else if (playerChoiceTxt.textContent === choices[2].name && computerChoiceTxt.textContent === choices[0].name) {     points[1]++;   } else if (playerChoiceTxt.textContent === computerChoiceTxt.textContent) {     console.log("draw");   } else {     points[0]++;   } }

这个函数检查玩家的选择并检查计算机选择是否可以战胜它。我已经根据游戏规则设置了这些 if-else 语句。如果计算机赢了，则计算机的分数加 1，否则玩家的分数加 1。

函数 whoWon ()

又是 if-else 语句

function whoWon() {   if (points[0] === 10) {     alert("你干掉了AI成功取得胜利!")     points = [0, 0];   } else if (points[1] === 10) {     alert("你被人工智能打败了!")     points = [0, 0];   } }

最后只要检查点数组是否有人已经达到 10 个分，如果是，则将这些点重置为其初始值。

嗯…… 大概就是这样，如果大家有任何问题 / 建议 / 评论，请随时与我联系。

代码我已经放在 GitHub 上了，欢迎来取，顺带给个星星吧

https://github.com/wanghao221/moyu