三分钟学会打地鼠小游戏

小章鱼234

已于 2023-07-09 09:52:46 修改

阅读量440

点赞数 3

文章标签： html css3 javascript

于 2023-07-09 09:46:26 首次发布

本文链接：https://blog.csdn.net/weixin_56172044/article/details/131619645

版权

打地鼠

1.游戏介绍

操作条件：鼠标点击地鼠打中地鼠分数就会加一

结束条件：在规定的时间内就会结束

2.代码分析

需求：

在屏幕中会有土堆的图片出现
随机让地鼠从土堆中闪现
点击地鼠就会让分数加加
到1分钟之后游戏结束

实现效果图：

在这里插入图片描述

3.代码实现

代码最后实现的很简单，主要的就是土地鼠的出现，通过CSS3的过渡搭配随机数与定时器就能够实现土地鼠的运动，在规定的时间中结束，主要使用了延迟器。

3.1土地鼠的出现

需求：

1.每一秒就会出现一个土地鼠（定时器）

2.随机出现土地鼠（随机数）

 // 点击按钮 地鼠出现
    startBtn.addEventListener('click', function (e) {

      // 开启定时器
      if (flagTimer) {
        flagTimer = false
        interval = setInterval(function () {
          const index = getRandom(0, moleList.length - 1)
          const active = document.querySelector('.active')
          active && active.classList.remove('active')
          // console.log(active);
          moleList[index].classList.add('active')
        }, 800)
      }

主要是通过CSS3属性

/* 地鼠 */
    .mole {
      transform: translate(-50%, 100%);

      transition: transform 1s;
    }

    .active {
      transform: translate(-50%, 0);
    }

3.2点击土地鼠加分

需求：

1.每次点击土地鼠，能够让上面分数加加（给每个土地鼠添加一个点击函数）

 let num = 0
      for (let i = 0; i < moleList.length; i++) {
        moleList[i].addEventListener('click', function (e) {
          span.innerHTML = ++num
        })
      }
    })

3.3规定的时间结束游戏

需求：

1.能够给游戏加一个结束条件我的结束条件是根据时间长短判断


      // 五秒后后停止定时器
      setTimeout(function () {
        const active = document.querySelector('.active')
        active && active.classList.remove('active')
        span.innerHTML = 0
        alert('游戏结束')
        clearInterval(interval)
        flagTimer = true

      }, 1000 * 5)

总结：

先设置好土地鼠的CSS布局让它在屏幕中不显示，最后通过给土地鼠添加一个类让他能够重新出现在页面上
每次土地鼠的地方都是不固定的，这样就需要想到使用随机函数进行设置
土地鼠属性每秒都是在运动，所以需要添加一个定时器，这样的效果是让我们每秒都能看到不同的土壤中出现土地鼠
写的不是很好，主要也是技术有限，有些想要实现的功能也没有实现，想在里面添加一个背景音乐,但是谷歌好像不支持，还有就是想在点击土地鼠的时候能够有声音没有实现希望大佬们指点一二

<video controls="" autoplay="" name="media"> <source src="音乐链接" type="audio/mpeg"</video>

附件：完整代码

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8" />
  <meta name="viewport"
    content="width=device-width, initial-scale=1.0,maximum-scale=1,minimum-scale=1,user-scalable=no" />
  <title>02-打地鼠.html</title>
  <style>
    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    ul {
      list-style: none;
      width: 1200px;
      display: flex;
      flex-wrap: wrap;
      margin: 0 auto;
    }

    li {
      width: 400px;
      height: 300px;

      border: 1px solid #000;

      position: relative;

      overflow: hidden;
    }

    img {
      position: absolute;
      left: 50%;
      bottom: 0;
      transform: translate(-50%, 0);
    }

    /* 泥土 */
    .dirt {
      z-index: 100;

      background-image: linear-gradient(to bottom,
          transparent 50%,
          #fff 50%,
          #fff 100%);
    }

    /* 地鼠 */
    .mole {
      transform: translate(-50%, 100%);

      transition: transform 1s;
    }

    .active {
      transform: translate(-50%, 0);
    }

    h1 {
      text-align: center;
    }

    button {
      width: 100px;
      height: 40px;
      border-radius: 20px;
      font-size: 18px;
      display: block;
      margin: 10px auto;
    }
  </style>
</head>

<body>
  <h1>打地鼠游戏 : <span>0</span></h1>
  <button>开始</button>
  <ul>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
    <li>
      <img class="dirt" src="./images/dirt.svg" alt="" />
      <img class="mole" src="./images/mole.svg" alt="" />
    </li>
  </ul>
  <script>

    const startBtn = document.querySelector('button') // 开始按钮
    const moleList = document.querySelectorAll('.mole') // 地鼠图片
    const span = document.querySelector('h1 span') // 文字
    let flagTimer = true
    let interval
    // 点击按钮 地鼠出现
    startBtn.addEventListener('click', function (e) {

      // 开启定时器
      if (flagTimer) {
        flagTimer = false
        interval = setInterval(function () {
          const index = getRandom(0, moleList.length - 1)
          const active = document.querySelector('.active')
          active && active.classList.remove('active')
          // console.log(active);
          moleList[index].classList.add('active')
        }, 800)
      }

      // 五秒后后停止定时器
      setTimeout(function () {
        const active = document.querySelector('.active')
        active && active.classList.remove('active')
        span.innerHTML = 0
        alert('游戏结束')
        clearInterval(interval)
        flagTimer = true

      }, 1000 * 5)



      // 点击土地鼠加分
      let num = 0
      for (let i = 0; i < moleList.length; i++) {
        moleList[i].addEventListener('click', function (e) {
          span.innerHTML = ++num
        })
      }
    })



    // 随机函数
    function getRandom(min, max) {
      return Math.floor(Math.random() * (max - min + 1)) + min;
    }
  </script>
</body>

</html>

小章鱼234

关注

3
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
三分钟学会打地鼠小游戏

操作条件：鼠标点击地鼠打中地鼠分数就会加一结束条件：在规定的时间内就会结束先设置好土地鼠的CSS布局让它在屏幕中不显示，最后通过给土地鼠添加一个类让他能够重新出现在页面上每次土地鼠的地方都是不固定的，这样就需要想到使用随机函数进行设置土地鼠属性每秒都是在运动，所以需要添加一个定时器，这样的效果是让我们每秒都能看到不同的土壤中出现土地鼠。
复制链接

扫一扫