猜拳游戏 

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <!-- 设置样式 -->
    <style>
      .box {
        width: 800px;
        background-color: aqua;
        margin: 0 auto;
      }
      #left,
      #right {
        height: 200px;
        width: 400px;
        float: left;
        background-image: url(./img/a.jpg);
      }
      #right {
        transform: scale(-1, 1);
      }
      #decide {
        height: 100px;
        width: 500px;
        text-align: center;
        font-size: 40px;
        color: red;
        margin: 200px auto;
      }
    </style>
  </head>
  <body>
      <!-- 放图片得盒子 -->
    <div class="box">
      <div id="left"></div>
      <div id="right"></div>
    </div>
    <!-- 按钮 -->
    <button id="con">剪刀</button>
    <button id="con2">石头</button>
    <button id="con3">布</button>
    <!-- 判定 -->
    <div id="decide"></div>
    <script>
      //获取id
      var con = document.getElementById("con");
      var con2 = document.getElementById("con2");
      var con3 = document.getElementById("con3");

      var left = document.getElementById("left");
      var right = document.getElementById("right");

      //点击剪刀按钮
      con.onclick = function () {
        //随机取0-3任意小数  不包括3， 0，1，2
        var num = Math.random() * 3;
        //将小数转换为整数
        num = parseInt(num);
        //让左侧图片显示剪刀
        left.style.backgroundPositionY = "0px";
        //如果随机数是0时
        if (num == 0) {
          //右侧图片显示剪刀
          right.style.backgroundPositionY = "0px";
          //弹出平局
          decide.innerHTML = "平局";
          //如果随机数是1时，右侧图片显示石头，弹出输了
        } else if (num == 1) {
          right.style.backgroundPositionY = "-200px";
          decide.innerHTML = "输了";
          //如果随机数是1时，右侧图片显示布，弹出赢了
        } else if (num == 2) {
          right.style.backgroundPositionY = "-400px";
          decide.innerHTML = "赢了";
        }
      };
      //点击石头按钮
      con2.onclick = function () {
        var num = Math.random() * 3;
        num = parseInt(num);
        console.log(num);
        //让左侧图片显示石头
        left.style.backgroundPositionY = "-200px";
        if (num == 0) {
          right.style.backgroundPositionY = "0px";
          decide.innerHTML = "赢了";
        } else if (num == 1) {
          right.style.backgroundPositionY = "-200px";
          decide.innerHTML = "平局";
        } else if (num == 2) {
          right.style.backgroundPositionY = "-400px";
          decide.innerHTML = "输了";
        }
      };

      //点击布按钮
      con3.onclick = function () {
        var num = Math.random() * 3;
        num = parseInt(num);
        console.log(num);

        left.style.backgroundPositionY = "-400px";

        if (num == 0) {
          right.style.backgroundPositionY = "0px";
          decide.innerHTML = "输了";
        } else if (num == 1) {
          right.style.backgroundPositionY = "-200px";
          decide.innerHTML = "赢了";
        } else if (num == 2) {
          right.style.backgroundPositionY = "-400px";
          decide.innerHTML = "平局";
        }
      };
    </script>
  </body>
</html>

 

posted @ 2020-05-01 23:20  live丶  阅读(193)  评论(0)    收藏  举报