I am participating in the individual competition of the Nuggets Community Game Creativity Contest. For details, please see: Game Creativity Contest
finished product
Don't lie, just watch the game~
rule
The priority order is special symbol = picture > color, such as the picture below, its meaning is to select the button that is not Yoyo, that is, if you click Hawking or Click, it is correct. When there are no pictures and special symbols, the color becomes the first choice. , for example, the picture below is the same color as the Click button, so clicking the Click button at this time is the correct answer
! is the only special symbol, "not"
Experience link: Vite App (stdue.github.io)
So how is this little game implemented, please see below~
technology
- quick
- tailWindcss
Center circle and countdown circle
The center circle is divided into two parts, one is svg, and the other is a simple div. The function of svg is to realize the display of the countdown of the circle, and the div is responsible for displaying colors, symbols, villains, etc.
For the convenience of viewing, the code is slightly simplified~
<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>
复制代码The countdown effect of the circle is achieved through two attributes of svg: stroke-dasharray and stroke-dashoffset, one is responsible for how many segments the border is cut into, and the other is responsible for displaying how many segments of the border, that is, if the cut is appropriate , you can achieve the effect~
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);
};
复制代码Execute the runtime function and loop the operation of reducing dasharray_num
Display logic for intermediate topics
Define three arrays to store colors, special symbols and pictures respectively
const colorArr = ["#24dfb0", "#207ffe", "#fe8c21"];
const specialArr = ["", "", "!"];
const fontArr = [Yoyo, Hawking, Click, ""];
const color = ref("");
const specialFont = ref("");
const buttonFont = ref("");
复制代码At the same time, three constants are defined to store a certain value in the corresponding array
Every time a question is to be displayed, a value will be randomly selected from these three arrays, and then these values will be displayed on the screen
// color展示颜色
<div
:style="{ background: color }"
>
// specialFont显示特殊符号
{{ specialFont + " " }}
// buttonFont展示图片(之前用的文字，名字忘换了...)
<img :src="buttonFont展示图片" style="height: 50%; margin-top: 25%" />
</div>
复制代码getQuestion function, used to refresh the question
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) - 1will get a random number of 0, 1, 2, and so on
button event
When the button is clicked, it needs to be judged according to the priority of the rules, first paste the code
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();
}
};
复制代码Because the special symbol is special, first judge whether it is "!", if it is "!", it is judged as wrong, if it is not "!", it is judged correctly. Judging the color, there is text to go to the text to judge, no text to go to the color to judge
If the click is correct, extra points will be added. If it is wrong, the clickWrong function will be called to record an error. If the error is 3 times, the game will fail directly.
Regardless of right or wrong, the getQuestion function will be called at the end to refresh the question
clickWrong function
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";
}
};
复制代码In the 1st and 2nd times, the red circle of the background will be enlarged, and when the third time is wrong, the red circle will be retracted and the endTime function will be called.
endTime function
const endTime = () => {
color.value = "";
endShow.value = true;
setTimeout(() => {
end_text.value = `得分:${score.value}`;
}, 2400);
};
复制代码The color is retracted, the end information is displayed, and the score is displayed after the end information is displayed for a period of time.
The basic logic is over here, I hope this article can help you gain something, bye~