js实现打地鼠的理解

最新推荐文章于 2022-04-10 08:12:29 发布

全栈开发crud师

最新推荐文章于 2022-04-10 08:12:29 发布

阅读量354

点赞数

分类专栏：前端文章标签： javascript css3 前端

本文链接：https://blog.csdn.net/Sunraiseprice/article/details/121091130

版权

前端专栏收录该内容

48 篇文章 0 订阅

订阅专栏

准备条件:坑，地鼠,挨打的地鼠。
函数：出现地鼠，地鼠消失，出现的地鼠和地鼠消失是递进，消失的就是出现的那只地鼠，打了地鼠也是打了出现的地鼠，消失的还是打了的地鼠也就是出现的地鼠

显示的时候出来的是地鼠的图，地鼠图坑的位置要和原来坑的位置一致，所以地鼠出来的时候要设置一下，地鼠消失以后，你现在设的位置肯定要变回去。
打地鼠出来的图的位置和坑的位置要一样，打完地鼠地鼠还是要消失，所以还要把原来的坑的位置显示变回去。(只不过打了地鼠和地鼠隐藏的时候
都是调用的hideof()方法)

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>打地鼠</title>
    <style>
      table {
        background-image: url("images/beijing.jpg");
        width: 325px;
        position: relative;
        left: 50%;
        top: 10px;
        transform: translate(-50%, 0);
      }

      table > caption {
        font-family: "微软雅黑";
        font-size: 20px;
      }

      table > td {
        width: 100px;
        height: 50px;
      }

      img {
        margin-top: 30px;
      }

      body {
        cursor: url("images/e.ico"), -moz-cell;
      }

      .sorce {
        width: 325px;
        height: 100px;
        background-color: rgb(166, 212, 253);
        /* float: left; */
        text-align: center;
        line-height: 40px;
        position: relative;
        left: 50%;
        transform: translate(-50%, 0);
      }

      .d1 {
        position: relative;
      }
    </style>
  </head>

  <body>
    <div class="d1">
      <!-- 定义一个div标签用来存放分数 -->
      <div class="sorce">
        <p id="level">第1关</p>
        <p id="zong">总分：0</p>
      </div>
      <!-- 定义一个表格，存放坑位 -->
      <table id="box">
        <caption>
          打地鼠
        </caption>
        <tr id="t">
          <td><img src="images/keng.gif" alt="keng" /></td>
          <td><img src="images/keng.gif" alt="keng" /></td>
          <td><img src="images/keng.gif" alt="keng" /></td>
        </tr>
        <tr>
          <td><img src="images/keng.gif" alt="keng" /></td>
          <td><img src="images/keng.gif" alt="keng" /></td>
          <td><img src="images/keng.gif" alt="keng" /></td>
        </tr>
        <tr>
          <td><img src="images/keng.gif" alt="keng" /></td>
          <td><img src="images/keng.gif" alt="keng" /></td>
          <td><img src="images/keng.gif" alt="keng" /></td>
        </tr>
      </table>
    </div>

    <script>
      //获取数据
      var dishus = document.getElementsByTagName("img");
      console.log(dishus);

      var nums = 0;
      var sum = 0;
      var box = document.getElementById("box");
      console.log(box);

      var t = document.getElementById("t");
      console.log(t);

      var res = document.getElementsByTagName("tr");
      console.log(res);

      //   alert(dishus.length);
      if (sum == 0) {
        setTimeout(showin, 1000);
        console.log("haha");
      }
      //   地鼠显示方法;
      function showin() {
        //生成的随机是0-8，也就是1-9的格子会出现地鼠
        nums = Math.floor(Math.random() * dishus.length);
        dishus[nums].src = "images/dishu.gif";
        dishus[nums].style.marginTop = "auto";
        dishus[nums].setAttribute("onclick", "beat()");
        setTimeout(hideof, Math.random() * 500 + 2000);
      }

      //地鼠隐藏方法

      function hideof() {
        dishus[nums].src = "images/keng.gif";
        dishus[nums].removeAttribute("onclick");
        dishus[nums].style.marginTop = "30px";
        setTimeout(showin, Math.random() * 500 + 2000);
      }

      //击打地鼠方法

      function beat() {
        dishus[nums].src = "images/shang.gif";
        sum += 10;
        dishus[nums].style.marginTop = "0px";

        document.getElementById("zong").innerHTML = "总分：" + sum;
      }
    </script>
  </body>
</html>

全栈开发crud师

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
0
评论
js实现打地鼠的理解

准备条件:坑，地鼠,挨打的地鼠。函数：出现地鼠，地鼠消失，出现的地鼠和地鼠消失是递进，消失的就是出现的那只地鼠，打了地鼠也是打了出现的地鼠，消失的还是打了的地鼠也就是出现的地鼠显示的时候出来的是地鼠的图，地鼠图坑的位置要和原来坑的位置一致，所以地鼠出来的时候要设置一下，地鼠消失以后，你现在设的位置肯定要变回去。打地鼠出来的图的位置和坑的位置要一样，打完地鼠地鼠还是要消失，所以还要把原来的坑的位置显示变回去。(只不过打了地鼠和地鼠隐藏的时候都是调用的hideof()方法)<!DOCTYPE h
复制链接

扫一扫