超可爱的打地鼠小游戏，还不来看看吗？

我正在参加「码上掘金挑战赛」详情请看：码上掘金挑战赛来了！

代码部分

code.juejin.cn/pen/7142894… 由于刚刚使用掘金的代码编辑器，很多地方使用的还不是很顺利，代码写的不是很好请大家多多指教，图片好像只能用网络图片，所以画的比较粗糙，还有很多需要完善的地方。接下来介绍一下简单的css和js的思路。

代码思路：

<template>
  <div class="box-con">
    <div class="box-item" v-for="item in list" @click="hit(item)">
      <div class="box-cycle"></div>
      <img class="mouse" v-if="item.id==index"   src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fp8.itc.cn%2Fq_70%2Fimages03%2F20210413%2Fe3f16da350e646e58c908ebe89de79b6.png&refer=http%3A%2F%2Fp8.itc.cn&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665731003&t=530a688d35b3d12fee4c93c026338a75">
      <img class="boom" v-if="item.id==hitIndx"  src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fku.90sjimg.com%2Felement_pic%2F00%2F16%2F07%2F2857995f6a16538.jpg&refer=http%3A%2F%2Fku.90sjimg.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1665741075&t=cd2b0ea0021db1f655bb945981393bae">
      <div class="box-cycle-left1"></div>
      <div class="box-cycle-right1"></div>
    </div>
  </div>
</template>

css ：利用flex布局画出九宫格，接着画出一个半圆对地鼠的下半身做一个遮挡，形成一个地鼠探头出来的效果,利用animation的动画进行margin的移动，这样探头效果后有一个动态的过程，如果地鼠探头没有被点击，那么地鼠还会重新缩回去

<script>
import { defineComponent, ref ,reactive} from 'vue';

export default defineComponent({
  setup() {
    const count = ref(0);
    const list = reactive([{id:1},{id:2},{id:3},{id:4},{id:5},{id:6},{id:7},{id:8},{id:9}])
    function addCount() {
      count.value += 1;
    } 
    let index = ref(1)
    setInterval(()=>{
      let i = Math.ceil(Math.random()*10)
      hitIndx.value = 0
      index.value = i==10?9:i
      // console.log(index)
    },1500)
    let hitIndx = ref(0)
    function hit(item) {
      if(item.id==index.value){
        hitIndx.value = index.value;
        index.value = 0
      }
      console.log(e)
    } 
    return {
      count,
      addCount,
      list,
      index,
      hitIndx,
      hit
    };
  },
});
</script>

JS : 用数组保留9个对象，利用随机数产生一到九点随机数，判断当前随机数和地鼠id数相同，则显示地鼠的图片，点击地鼠的时候将点击的id和当前随机数id进行比较，如果相同，则证明为是点击到地鼠，进行爆炸图片的显示，地鼠的出现时间使用定时器来进行，每1.5秒出现一次。