想玩一点又动脑子又拼手速的小游戏？来试试这款掘金30秒！

我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛

成品

不说虚的，先看游戏~

规则

优先级顺序是 特殊符号=图片>颜色，比如下面这张图片，其意义就是选中不是Yoyo的按钮，即如果点击Hawking或者Click都是正确的 当没有图片和特殊符号的时候，颜色便成为了首选，比如下面这张图片与Click按钮的颜色相同，所以这个时候点击Click按钮即为正确答案

!是唯一的特殊符号，即“非”

体验链接：Vite App (stdue.github.io)

那么这个小游戏是如何实现的呢，请看下文~

技术

• vite
• tailWindcss

中心圆与倒计时圆圈

中心圆分为两部分，一个是svg，另外一个是单纯的div，svg的作用主要就是实现转圈倒计时的显示，而div则负责显示颜色，符号，小人等

为了方便观看，代码稍微做了些简化~

<svg
  :style="{
    'stroke-dasharray': dasharray_num,
    'stroke-dashoffset': dashoffset_num,
  }"
>
  <circle
    stroke="#1e80ff"
    stroke-width="15"
    fill="#8a919f"
  ></circle>
</svg>

<div :style="{ 'border-radius': '50%' }" >
  <div :style="{ background: color }">
    {{ specialFont + "  " }}
    <img :src="buttonFont"/>
  </div>
</div>
复制代码

而圆圈的倒计时效果是通过svg的两个属性:stroke-dasharray和stroke-dashoffset来实现的，一个负责将边框切成多少段，另一个负责显示多少段的边框，也就是说如果切的合适的话，就可以实现效果~

const dasharray_num = ref(1005);
const dashoffset_num = ref(1005);
const runTime = () => {
  timer.value = setInterval(() => {
    dashoffset_num.value--;
    if (dashoffset_num.value == 0) {
      clearInterval(timer.value);
      endTime();
    }
  }, 29.8);
};
复制代码

执行runtime函数，循环dasharray_num减少的操作即可

中间题目的显示逻辑

定义三个数组，分别存放颜色，特殊符号和图片

const colorArr = ["#24dfb0", "#207ffe", "#fe8c21"];
const specialArr = ["", "", "!"];
const fontArr = [Yoyo, Hawking, Click, ""];
const color = ref("");
const specialFont = ref("");
const buttonFont = ref("");
复制代码

同时定义出来三个常量用来存放相应数组中的某一个值

在每一次要显示题目时，都会从这三个数组中随机抽取一个值，再将这些值展示到画面上

// color展示颜色
<div
  :style="{ background: color }"
>
// specialFont显示特殊符号
  {{ specialFont + "  " }}
  // buttonFont展示图片(之前用的文字，名字忘换了...)
  <img :src="buttonFont展示图片" style="height: 50%; margin-top: 25%" />
</div>
复制代码

getQuestion函数，用来刷新题目

const getQuestion = () => {
  if (wrongCount.value != 3) {
    color.value = colorArr[Math.ceil(Math.random() * 3) - 1];
    specialFont.value = specialArr[Math.ceil(Math.random() * 3) - 1];
    buttonFont.value = fontArr[Math.ceil(Math.random() * 4) - 1];
  }
};
复制代码

• Math.ceil(Math.random() * 3) - 1会获取0,1,2的随机一个数字，以此类推

按钮事件

在点击按钮时需要根据规则的优先级来进行判断，先贴代码

const buttonClick = (index: number) => {
  if (index == 0) {
    updateScore("#24dfb0", Yoyo);
  } else if (index == 1) {
    updateScore("#207ffe", Hawking);
  } else {
    updateScore("#fe8c21", Click);
  }
};
const updateScore = (updateColor: string, updateFont: string) => {
  if (!startShow.value && !endShow.value) {
    if (specialFont.value == "!") {
      // no的情况
      if (buttonFont.value == "") {
        // 如果文字为空则用颜色判断
        if (updateColor == color.value) {
          clickWrong();
        } else {
          score.value++;
        }
      } else {
        // 如果文字为有则用文字判断
        if (updateFont == buttonFont.value) {
          clickWrong();
        } else {
          score.value++;
        }
      }
    } else {
      // yes的情况
      if (buttonFont.value == "") {
        // 如特殊为空且文字为空则使用颜色判断
        if (updateColor == color.value) {
          score.value++;
        } else {
          clickWrong();
        }
      } else {
        // 如特殊为空且文字为有则使用文字判断
        if (updateFont == buttonFont.value) {
          score.value++;
        } else {
          clickWrong();
        }
      }
    }
    getQuestion();
  }
};
复制代码

因为特殊符号比较特殊，所以先判断它是否为“!”，如果是“!”则选中判断为错误，如果不是“!”则选中判断正确，两边的逻辑几乎一致，都是先判断文字，再判断颜色，有文字走文字判断没有文字走颜色判断

如果点击正确的话则加分，如果错误的话则调用clickWrong函数记录一次错误，错误满3次判断游戏直接失败

无论对错在最后都会调用getQuestion函数刷新题目

clickWrong函数

const wrongScale = ref("scale-100");
const wrongCount = ref(0);
const clickWrong = () => {
  wrongCount.value++;
  if (wrongCount.value == 1) {
    wrongScale.value = "scale-105";
  } else if (wrongCount.value == 2) {
    wrongScale.value = "scale-150";
  } else {
    clearInterval(timer.value);
    endTime();
    wrongScale.value = "scale-0";
  }
};
复制代码

在1次和2次会将背景的红圆放大，在错第三次的时候收回红圆并调用endTime函数

endTime函数

const endTime = () => {
  color.value = "";
  endShow.value = true;
  setTimeout(() => {
    end_text.value = `得分:${score.value}`;
  }, 2400);
};
复制代码

color收回，显示结束信息，结束信息显示一段时间后显示所得分数

到这里基本的逻辑就结束啦，希望这篇文章能够让你有所收获，再见~