html+css+js小游戏你的鼠标有多快

最新推荐文章于 2024-05-07 09:50:14 发布

阳光正好_微风不燥

最新推荐文章于 2024-05-07 09:50:14 发布

阅读量599

点赞数

分类专栏：前端学习文章标签： javascript css html

本文链接：https://blog.csdn.net/qq_57873576/article/details/128027836

版权

前端学习专栏收录该内容

2 篇文章 0 订阅

订阅专栏

老师布置的一个小练习，现在网上找案例学习着来写，比较少而且找到的都不太喜欢，所以只能自己靠着仅有的一点小知识花了两小时，勉强写了一个出来，也可以说是凑出来的，效果大概达到了，但是还有一点小bug，期待各位大佬、小伙伴解决了能@我一下，一起学习

<!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>
    *{padding: 0;margin: 0;}
    .box{
      position: relative;
      width: 800px;
      height: 600px;
      margin: 60px auto;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      border: 1px solid red;
    }
    .container{
      position: relative;
      width: 100%;
      height: 500px;
      border: 1px solid red;
      overflow: hidden;
    }
    .score{
      position: absolute;
      right: 0;
      top: 0;
      width: 100px;
      height: 100px;
      line-height: 50px;
      text-align: center;
      background-color: rgb(255, 62, 62);
    }
    .game img{
      position: absolute;
      top: -50px;
      /* animation: all 3s linear; */
      animation: expression 6s linear;
    }
    @keyframes expression{
      0%{ top:-15%;}
      100%{ top:115%}
    }
    .shake {
     animation: shake 300ms ease-in-out;
    }
    @keyframes shake {
        20%, 80% { transform: translateX(-20px); }
        30%, 70% { transform: translateX(-10px); }
        50% { transform: translateX(0); }
    }
  </style>
</head>
<body>
  <div class="box">
    <h4>你的鼠标有多快？</h4>
    <div>游戏说明。。。。。。。</div>
    <button>开始游戏</button>

    <!-- 游戏面板 -->
    <div class="container">
      <div class="game"></div>
    </div>

    <!-- 计分板 -->
    <div class="score">
      <div>得分:<span class="add">0</span>分</div>
      <div>失分:<span class="sub">0</span>分</div>
    </div>
  </div>

  <script>
    //获取游戏表情
    let game = document.querySelector(".game");
    //加分
    let add = document.querySelector(".add");
    //减分
    let sub = document.querySelector(".sub");
    //开始按钮
    let btn = document.querySelector("button");
    //大盒子
    let container = document.querySelector(".container");

    // console.log(container.clientHeight);
    //点击开始游戏
    btn.onclick = function(){
      expression()
      //开始游戏按钮禁止状态
      btn.innerText = "游戏正在进行中...";
      btn.disabled = true;
    }
    
    //生成表情
    function expression(){
      
      //生成表情盒子
      var e = document.createElement("img");
      //随机表情
      var bq =  Math.ceil(Math.random() * 50);
      //表情位置
      var left = Math.random() * 90 + 4;
      //添加img图片属性
      e.setAttribute("src",`qq/${bq}.gif`);
      //添加表情样式
      e.style.cssText = `display:inline-block;width:40px;height:40px;left:${left}%`;
      //添加到父元素中
      game.appendChild(e)
      
      //点击变成猪头并加分
      game.onclick = function(){
        //切换猪头
        e.src = "qq/52.gif";
        //加分
        add.innerHTML = (add.innerHTML*1)+1;
        //删除元素并继续游戏
        e.remove()
        expression()
      }

      //定时器持续监听表情距离父亲顶部的距离
      let inter = setInterval(() => {

        //如果大于父亲高度则删除表情、减分等操作
        if(e.offsetTop >= container.clientHeight){
          //添加抖动效果
          container.classList.add('shake')

          setTimeout(() => {
            //删除抖动
            container.classList.remove('shake')
            //删除监听定时器
            clearInterval(inter)
            //减分
            sub.innerHTML = (sub.innerHTML*1)+1;
            //超出距离删除元素
            e.remove()
            //判断得分是否大于失分，超出则重新初始化，没有则继续进行游戏
            if(sub.innerHTML>add.innerHTML){
              alert("游戏结束！！")
              sub.innerHTML = 0;
              add.innerHTML = 0;
              btn.innerText = "开始游戏";
              btn.disabled = false;
            }else{
              //继续进行游戏
              expression()
            }
          }, 100);
        }
      }, 150);
    }
    
  </script>
</body>
</html>