I am participating in the nuggets Community game creative submission Contest. For details, please see: Game Creative Submission Contest

Vite App (stdue.github. IO)

The finished product

Don’t say empty, first look at the game ~

The rules

The order of precedence is the special symbol = image > color, as in the image below, which means that selecting a button that is not Yoyo is correct if Hawking or Click is clickedColor is preferred when there are no images or special symbols, such as the image below, which is the same color as the Click button, so clicking on the Click button is the correct answer

! Is the only special symbol, which is not.

So how to achieve this small game, please see below ~

technology

  • vite
  • tailWindcss

Center circle and countdown circle

The center circle is divided into two parts, one is SVG, and the other is a simple DIV. SVG is mainly used to display the turning countdown, while DIV is responsible for displaying colors, symbols and villains

For easy viewing, the code has been 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>
Copy the code

The circle countdown effect is achieved by using two SVG attributes: stroke-Dasharray and stroke-Dashoffset. One is responsible for how many borders to cut and the other for how many borders to display, which means that if cut properly, the effect can be achieved

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);
};
Copy the code

Execute the Runtime function and loop through the dasharray_num reduction

Display logic for intermediate questions

Define three arrays for colors, special symbols, and images

const colorArr = ["#24dfb0"."#207ffe"."#fe8c21"];
const specialArr = ["".""."!"];
const fontArr = [Yoyo, Hawking, Click, ""];
const color = ref("");
const specialFont = ref("");
const buttonFont = ref("");
Copy the code

Three constants are defined to hold a value in the corresponding array

Each time a question is displayed, a value is randomly drawn from the three arrays and displayed on the screen

// color displays the color<div
  :style="{ background: color }"
>// specialFont displays special symbols {{specialFont + ""}} // buttonFont displays images.<img :src="ButtonFont display image" style="height: 50%; margin-top: 25%" />
</div>
Copy the code

The 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]; }};Copy the code
  • Math.ceil(Math.random() * 3) - 1Gets a random number of 0,1,2, and so on

Button events

When you click the button, you need to judge according to the priority of the rule, and paste the code first

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 the text is empty, use color
        if (updateColor == color.value) {
          clickWrong();
        } else{ score.value++; }}else {
        // If there is a text, use the text to judge
        if (updateFont == buttonFont.value) {
          clickWrong();
        } else{ score.value++; }}}else {
      // Yes
      if (buttonFont.value == "") {
        // If special is empty and text is empty, use color judgment
        if (updateColor == color.value) {
          score.value++;
        } else{ clickWrong(); }}else {
        // If special is empty and text exists, use text judgment
        if (updateFont == buttonFont.value) {
          score.value++;
        } else{ clickWrong(); } } } getQuestion(); }};Copy the code

Because special characters are special, check whether they are “! “first. “, if “! If no! Is displayed, an error is displayed. Then select the correct judgment, the logic on both sides is almost the same, is to judge the text first, then judge the color, there is text to judge the text without text to judge the color

Bonus points for clicking correctly, and call the clickWrong function to record an error if it is wrong

Right or wrong, the getQuestion function is 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"; }};Copy the code

The red circle in the background is enlarged on the first and second passes, and the red circle is retracted on the third pass and the endTime function is called

The endTime function

const endTime = () = > {
  color.value = "";
  endShow.value = true;
  setTimeout(() = > {
    end_text.value = ` score:${score.value}`;
  }, 2400);
};
Copy the code

Color recall, display end information, end information display after a period of time to display the score

This is the end of the basic logic, I hope this article can help you learn, goodbye ~