vue实现九宫格打地鼠小游戏

最新推荐文章于 2023-01-03 15:21:59 发布

努力添砖java

最新推荐文章于 2023-01-03 15:21:59 发布

阅读量3.9k

点赞数 17

分类专栏：实训文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/qq_51098044/article/details/122255298

版权

实训专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文展示了如何使用Vue.js创建一个九宫格布局，并通过CSS实现鼠标悬停和点击时的交互效果。通过JavaScript实现随机显示和消失的小老鼠动画，以及点击后的小鼠消失和击倒效果。代码详细且易于理解，适合前端开发者参考学习。

摘要由CSDN通过智能技术生成

效果展示：

在这里插入图片描述

在这里插入图片描述
1.首先实现九宫格的布局，当然也可以用很多布局和语法简化代码欢迎大家在评论区讨论哦，这里就用最基础的。

<template>
  <div class="holes">
    <div class="hole">
      <img src="/images/Shixun/mouse.png" class="mouse">
      <img src="/images/Shixun/boom.png" class="boom" alt="">
      <img src="/images/Shixun/hole.png" alt="">
    </div>
    <div class="hole">
      <img src="/images/Shixun/mouse.png" class="mouse">
      <img src="/images/Shixun/boom.png" class="boom" alt="">
      <img src="/images/Shixun/hole.png" alt="">
    </div>
    <div class="hole">
      <img src="/images/Shixun/mouse.png" class="mouse">
      <img src="/images/Shixun/boom.png" class="boom" alt="">
      <img src="/images/Shixun/hole.png" alt="">
    </div>
    <div class="hole">
      <img src="/images/Shixun/mouse.png" class="mouse">
      <img src="/images/Shixun/boom.png" class="boom" alt="">
      <img src="/images/Shixun/hole.png" alt="">
    </div>
    <div class="hole">
      <img src="/images/Shixun/mouse.png" class="mouse">
      <img src="/images/Shixun/boom.png" class="boom" alt="">
      <img src="/images/Shixun/hole.png" alt="">
    </div>
    <div class="hole">
      <img src="/images/Shixun/mouse.png" class="mouse">
      <img src="/images/Shixun/boom.png" class="boom" alt="">
      <img src="/images/Shixun/hole.png" alt="">
    </div>
    <div class="hole">
      <img src="/images/Shixun/mouse.png" class="mouse">
      <img src="/images/Shixun/boom.png" class="boom" alt="">
      <img src="/images/Shixun/hole.png" alt="">
    </div>
    <div class="hole">
      <img src="/images/Shixun/mouse.png" class="mouse">
      <img src="/images/Shixun/boom.png" class="boom" alt="">
      <img src="/images/Shixun/hole.png" alt="">
    </div>
    <div class="hole">
      <img src="/images/Shixun/mouse.png" class="mouse">
      <img src="/images/Shixun/boom.png" class="boom" alt="">
      <img src="/images/Shixun/hole.png" alt="">
    </div>
  </div>
</template>

2.用css调整布局效果和对应的鼠标点击效果

<style  scoped>

*{
  margin: 0;
  padding: 0;
}
.holes{
  width: 602px;
  height: 602px;
  margin: 10px auto;
  border: 1px solid #000;
  display: flex;
  flex-wrap: wrap;
}
.holes:hover{//鼠标经过变化
  cursor: url('/images/Shixun/hammer.ico'),auto;
}
.holes:active{//鼠标点击变化
  cursor: url('/images/Shixun/hammerdown.ico'),auto;
}
.hole{
  width: 200px;
  height: 200px;
  outline: 1px solid red;
  position: relative;
}
.hole>img{
  width: 100%;
  height: 100%;
  position: absolute;
}
.hole>img.mouse{
  width: 150px;
  height: 150px;
  z-index: 2;
  top: 15px;
  left: 25px;
  display: none;
}
.hole .boom{
  z-index: 2;
  display: none;
}
</style>

3.然后实现 1）随机跳出来和消失的小老鼠 2）点击出现小鼠消失和击倒效果

<script>
export default {
  data(){
    return{}
  },
  methods:{

      displayMouse(){
        let hole=document.querySelectorAll('.hole')
        let siteNum1=Math.floor(Math.random()*9)
        let siteNum2=Math.floor(Math.random()*9+2)
        hole[siteNum1].querySelector('.mouse').style.display='block'
        hole[siteNum2].querySelector('.mouse').style.display='none'
      },

      clickMouse(){
        let mouse=document.querySelectorAll('.mouse')

        for(let i=0;i<mouse.length;i++){
          mouse[i].addEventListener('click',function(){
            var that= this
            that.style.display='none'
            console.log(that.nextElementSibling);
            that.nextElementSibling.style.display='block'
            setTimeout(()=>{
              that.nextElementSibling.style.display='none'
              },1000)
          })
        }
      }
  },
  mounted(){
    setInterval(this.displayMouse, 2000);
    this.clickMouse();
  }
}
</script>