js猜拳游戏

1. 演示效果

2. 分析思路

1. 获取玩家的出拳(获取按钮的标签体)
2. 获取电脑的出拳(随机数)
3. 比较二者的出拳，将比较的结果设置到对应的 span 标签中

3. 代码实现

3.1. 方式一

将点击事件进行动态绑定。

const btns = document.querySelectorAll("button");

//获取需要设置的元素对象
const me = document.querySelector(".me");
const robot = document.querySelector(".robot");
const result = document.querySelector(".result");

//遍历按钮对象添加事件
btns.forEach((item) => {
  //添加事件
  item.addEventListener("click", function () {
    //获取玩家的出拳(获取按钮的标签体)
    let player = item.innerHTML;
    me.innerHTML = player; //将玩家的出拳设置进去

    //获取电脑的出拳(随机数)
    const arr = ["石头", "剪刀", "布"];
    let cmp = arr[Math.floor(Math.random() * arr.length)];
    //console.log(cmp)
    robot.innerHTML = cmp; //将电脑的出拳设置进去

    //比较出拳的结果
    if (
      (player == "石头" && cmp == "剪刀") ||
      (player == "剪刀" && cmp == "布") ||
      (player == "布" && cmp == "石头")
    ) {
      result.innerHTML = "玩家获胜";
    } else if (player == cmp) {
      result.innerHTML = "平局";
    } else {
      result.innerHTML = "电脑获胜";
    }
  });
});

3.2. 方式二

将点击事件进行行内绑定。

    <script>
      // 获取元素
      const buttons = document.querySelectorAll("button");
      const me = document.querySelector(".me");
      const robot = document.querySelector(".robot");
      const result = document.querySelector(".result");

      // 遍历按钮对象添加点击事件
      buttons.forEach((btn) => {
        btn.addEventListener("click", function () {
          // 获取玩家的出拳
          const meChoice = this.innerText;
          me.innerText = meChoice;

          // 电脑出拳
          let arr = ["剪刀", "石头", "布"];
          // 随机获得一个出拳
          let robotChoice = arr[Math.floor(Math.random() * arr.length)];
          robot.innerText = robotChoice;

          // 判断结果
          if (
            (meChoice == "剪刀" && robotChoice == "布") ||
            (meChoice == "石头" && robotChoice == "剪刀") ||
            (meChoice == "布" && robotChoice == "石头")
          ) {
            result.innerText = "玩家获胜";
          } else if (meChoice == robotChoice) {
            result.innerText = "平局";
          } else {
            result.innerText = "电脑获胜";
          }
        });
      });
    </script>