js小游戏-打地鼠

kmgmq

于 2024-04-18 16:06:43 发布

阅读量437

点赞数 13

文章标签： javascript css css3

本文链接：https://blog.csdn.net/kmgmq/article/details/137925400

版权

<!DOCTYPE html>
<html lang="en">
<link rel="stylesheet" href="./打地鼠.css">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<!-- 添加CSS -->
<style>
  /* 清除默认界面 */
  * {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
  }

  li {
    list-style: none;
  }

  body {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    /* 设置最小高度为视口高度 */
    /* background-color: greenyellow; */
  }

  .homepage {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 516px;
    height: 378px;
    /* background-color: #fff; */
    background-image: url(./image/打地鼠图片.png);
    margin: auto;
    position: relative;
    top: 0;
    left: 0;
  }

  /* 时间进度条 */
  .progress {
    width: 240px;
    height: 20px;
    background-color: pink;
    position: absolute;
    top: 0;
    left: 0;
  }

  /* 进度条减少 */
  .progressReduce {
    width: 240px;
    height: 20px;
    background-color: rgb(192, 243, 255);
    position: absolute;
    top: 0;
    left: 0;
  }

  /* 得分 */
  .grade {
    width: 50px;
    height: 50px;
    position: absolute;
    top: 20px;
    left: 20px;
  }

  /* 隐藏 */
  .hide {
    display: none;
  }

  /* 开始游戏 */
  .startGame {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    position: absolute;
    top: 190px;
    left: 160px;
    font-weight: 700;
    font-size: 40px;
  }

  /* 游戏结束 */
  .endGame {
    width: 200px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    position: absolute;
    top: 100px;
    left: 160px;
    font-weight: 700;
    font-size: 40px;
  }

  .endGame1 {
    width: 320px;
    height: 100px;
    text-align: center;
    line-height: 100px;
    position: absolute;
    top: 200px;
    left: 100px;
    font-weight: 700;
    font-size: 40px;
  }

  /* 锤子图标 */
  .hammer {
    width: 50px;
    height: 50px;
    background-image: url(./image/地鼠锤子\(1\).png);
    position: absolute;

  }

  .hammerbgc {
    background-image: url(./image/锤.png);
  }
</style>
<!-- 标签界面 -->

<body>
  <div class="homepage"><!-- 主页 -->
    <!-- 时间进度条背景 -->
    <div class="progress">时间</div>
    <!-- 时间进度条减少 -->
    <div class="progressReduce">时间</div>
    <!-- 得分 -->
    <div class="grade">
      得分:<span></span>
    </div>
    <div class="grade1"></div>
    <!-- 存放9个盒子（洞） -->
    <!-- 后面用JS调整 -->
    <ul class="dishuimg">
      <li class="i1 hide"></li>
      <li class="i2 hide"></li>
      <li class="i3 hide"></li>
      <li class="i4 hide"></li>
      <li class="i5 hide"></li>
      <li class="i6 hide"></li>
      <li class="i7 hide"></li>
      <li class="i8 hide"></li>
      <li class="i9 hide"></li>
    </ul>
    <!-- 开始游戏 -->
    <button class="startGame">开始游戏</button>
    <!-- 结束游戏 -->
    <div class="endGame hide">游戏结束</div>
    <div class="endGame1 hide"></div>
    <!-- 锤子图标 -->
    <div class="hammer hide"></div>
  </div><!-- 主页结束 -->

</body>
<!-- 添加JS -->
<script>

  // 开始按钮
  let grade = 0
  const startGame = document.querySelector('.startGame')
  startGame.addEventListener('click', function () {
    startGame.classList.add('hide')
    gradeset()
    let t = 1
    // 计时器函数
    const jishiqi = setInterval(function () {
      //判断有没有到60秒，有就停止
      if (t === 30) {
        clearInterval(jishiqi)
      }
      //随机生成两个地鼠并在两秒后隐藏
      suijixianshi()
      t++
    }, 2000)
    //减小时间盒子函数
    reducetime()
  })


  //运行使用的函数 //随机显示两个地鼠
  function suijixianshi() {
    //随机数设置
    const randomInt1 = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
    const randomInt2 = Math.floor(Math.random() * (9 - 1 + 1)) + 1;
    const li1 = document.querySelector(`.i${randomInt1}`)
    const li2 = document.querySelector(`.i${randomInt2}`)
    li1.classList.toggle('hide')
    li2.classList.toggle('hide')

    //点击增加分数
    const ul = document.querySelector('.dishuimg');
    ul.addEventListener('click', addGrade);


    //2秒后清空界面
    setTimeout(function () {
      li1.classList.add('hide')
      li2.classList.add('hide')
    }, 2000);
  }

  //盒子随时间减少函数
  function reducetime() {
    const progressReduce = document.querySelector('.progressReduce')
    let width = 240
    // 定时器，每隔一段时间减少盒子的宽度
    const timer = setInterval(function () {
      width -= 4;  // 每次减少1px，可以根据需求调整
      progressReduce.style.width = `${width}px`;

      //开始按钮消失
      if (width === 40) {
        progressReduce.innerHTML = ''
      }

      if (width <= 0) {
        clearInterval(timer);  // 达到目标宽度时停止定时器
      }

      //游戏结束代码
      if (width === 0) {
        const gameEnd = document.querySelector('.endGame')
        const gameEnd1 = document.querySelector('.endGame1')
        gameEnd.classList.remove('hide')
        gameEnd1.classList.remove('hide')
        gameEnd1.innerHTML = `您最后的分数是${grade}`
      }
    }, 1000);  // 每1000毫秒(即1秒)执行一次


  }

  //分数刷新设置
  function gradeset() {
    const grade0 = document.querySelector('.grade span')
    grade0.innerHTML = `${grade}`
  }

  //点击增加分数设置
  function addGrade(e) {
    if (e.target.classList.contains('hide')) {
      return; // 如果点击的是已隐藏的地鼠，则不执行后续操作
    }
    e.target.classList.add('hide')
    grade++//增加分数
    gradeset()//刷新分数
    e.target.removeEventListener('click', addGrade)
  }

  //游戏结束代码见盒子随时间减少函数

  //锤子随鼠标移动设置
  const homepage = document.querySelector('.homepage')//主页
  const hammer = document.querySelector('.hammer')//锤子图片
  //鼠标进入盒子，锤子显示
  homepage.addEventListener('mouseenter', function () {
    hammer.classList.remove('hide')
  })
  //鼠标离开盒子，锤子隐藏
  homepage.addEventListener('mouseleave', function () {
    hammer.classList.add('hide')
  })
  //鼠标在盒子内移动，锤子随鼠标移动
  homepage.addEventListener('mousemove', function (e) {
    //锤子的坐标=鼠标在页面中的坐标-主界面在页面的坐标
    let x = e.pageX - homepage.getBoundingClientRect().left
    //因为锤子在Y轴移动时会出现bug，所以y轴还要减去隐藏的那部分界面的坐标
    let y = e.pageY - homepage.getBoundingClientRect().top - document.documentElement.scrollTop
    // console.log(x, y);
    hammer.style.left = x + 1 + 'px'
    hammer.style.top = y + 1 + 'px'
  })
  //鼠标点击，锤子更换
  homepage.addEventListener('click', () => {
    hammer.classList.add('hammerbgc')
    setTimeout(() => {
      hammer.classList.remove('hammerbgc')
    }, 200)
  })


  //改进点:
  //      1.减分机制，点到不一样的盒子会减分
  //      2.点击盒子后盒子的变化(也就是换一张图片)
  //      3.将鼠标变成锤子(参考放大镜项目，需要计算坐标)
  //      4.点击后锤子的变化
  //      5.重来机制(看广告、充值?)

</script>

</html>

配套CSS

.i1 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 150px;
  left: 110px;
  background-image: url(./image/地鼠图片\(11\).png);
}

.i2 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 150px;
  left: 235px;
  background-image: url(./image/地鼠图片\(11\).png);
}

.i3 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 150px;
  left: 375px;
  background-image: url(./image/地鼠图片\(11\).png);
}

.i4 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 210px;
  left: 90px;
  background-image: url(./image/地鼠图片\(11\).png);
}

.i5 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 220px;
  left: 235px;
  background-image: url(./image/地鼠图片\(11\).png);
}

.i6 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 220px;
  left: 375px;
  background-image: url(./image/地鼠图片\(11\).png);
}

.i7 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 270px;
  left: 85px;
  background-image: url(./image/地鼠图片\(11\).png);
}

.i8 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 280px;
  left: 235px;
  background-image: url(./image/地鼠图片\(11\).png);
}

.i9 {
  width: 50px;
  height: 50px;
  position: absolute;
  top: 280px;
  left: 390px;
  background-image: url(./image/地鼠图片\(11\).png);
}