我正在参加掘金社区游戏创意投稿大赛个人赛,详情请看:游戏创意投稿大赛
成品
不说虚的,先看游戏~
规则
优先级顺序是 特殊符号=图片>颜色,比如下面这张图片,其意义就是选中不是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收回,显示结束信息,结束信息显示一段时间后显示所得分数
到这里基本的逻辑就结束啦,希望这篇文章能够让你有所收获,再见~