我正在参加「兔了个兔」创意投稿大赛，详情请看：「兔了个兔」创意投稿大赛

好久没写文章了，惰性泛滥。创意大赛快结束了，混个马克杯吧。今天给大家整个找兔兔小游戏。先看看这磕碜的效果：

哈哈哈，想玩的可以看这里👉找兔兔文字版

玩法简介

初始是一个2*2的小方格，每次只有一个兔字，其他都是免字，点击兔字进入下一轮，字体变小，格子变多。直到第20轮，找到最后一个兔游戏获胜，并显示游戏耗时秒数；中途点到免字的都会弹出失败提示。

代码实现

HTML部分

<div class="grid" :style="`grid-template-columns: repeat(${level}, 1fr);grid-template-rows: repeat(${level}, 1fr)`">
    <div class="word" :style="`font-size: ${250/level}px`" v-for="index in level*level" @click="check(index)">
      {{curIndex === index ? '兔' : '免'}}
    </div>
</div>
<div>耗时：{{second}}秒</div>

我们画了一个网格，网格会跟随level等级的升高而变大，文字大小会根据level等级的升高而变小。每次点击文字会去校验是否点到正确的兔字

JS部分

  import {ref} from 'vue@3.2.45';
  const level = ref(2);
  const curIndex = ref(0);
  const second = ref(0);
  let timer = null;
  let flag = false;
  curIndex.value = Math.ceil(Math.random() * Math.pow(level.value, 2));
  const check = (index) => {
    if(!flag) {
      flag = true;
      timer = setInterval(() => {
        second.value++;
      }, 1000)
    }
    if(level.value > 20) {
      clearInterval(timer);
      flag = false;
      alert(`你真棒！兔 be No.1！耗时仅${second.value}秒`);
      return;
    }
    if(index === curIndex.value) {
      level.value++;
      curIndex.value = Math.ceil(Math.random() * Math.pow(level.value, 2));
    } else {
      alert('你看不到兔兔，你不爱兔兔了！');
    }
  }

定义了一个游戏难度等级level,当前兔字的序号curIndex,以及读秒second。flag是拿来启动和结束计时的变量。可以看到我们在初始的时候给兔字的序号随机了一个数字。这个数字是从1开始到难度等级二次方的一个随机数，并且每次点击的时候，如果正确，这个数字会被重置成一个新的随机数。假如点错了则弹出错误提示。另外当游戏难度达到20以后，游戏则获胜，并显示游戏耗时。

CSS部分

.grid {
  display: grid;
  width: 500px;
  height: 500px;
  border: 3px solid;
  justify-items: center;
  align-items: center;
  .word {
    color: red;
  }
}

css就比较简单了，一个500*500的网格，内容居中，文字颜色红色。纯纯摆烂！

结语

虽说是摆烂式参赛，但2023是值得奋斗的一年，掘友们加油，给我6个赞，赢新年第一个马克杯！