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

Introduction:

The game is to find different colors of Yoyo within a minute, click on it and enter the next link

There are only four blocks to start with, and the number of blocks increases as the game progresses, but the maximum block is limited to 121;

The technology stack used is Vite + VUe3 + Element Plus

Game Address:

642134542. The dead simple. IO/find – color /…

Code Address:

Github.com/642134542/f…

The game interface

Game Development Process

Because the idea of the game is relatively simple, so I will not go into the process of building, only to explain the idea of the development process

1, the layout

First, create a 600 * 600 game area with several small divs. Uniform layout

The style uses a floating float: left

Because there are several divs, and the rows and columns are equal, you need to consider the width and height of each div, including the spacing

Initialize the rows and columns

RowRect: 2, // start with 2

Given the style of each div by computed style

const itemStyle = computed(() => { const margin = (data.rowRect - 1) * 10; // Each div is spaced 10px, const n = (600-margin)/data.rowrect; return { width: `${n}px`, height: `${n}px`, } });Copy the code

2. Random colors and similar colors

Random color A random number ranging from 0 to 255 is calculated to form three groups of numbers to form RGB

Export function getRandomColors(Transparency = 0.9) {const result = []; for (let i = 0; i < 3; i++) { result.push(Math.floor(Math.random() * 255)); Const color = 'rgba(${result.tostring ()})' const similarityColor = 'rgba(${result.tostring ()})' const similarityColor = `rgba(${result.toString()},${transparency})` return { color, similarityColor } }Copy the code

For similar colors, I did not calculate the surrounding colors of random colors, but used RGBA transparency, so that there is a certain degree of similarity and recognition

3. Random number

Need to get

0<=x<=rowRect2

The random number

/ function RandomNumBoth(Min, Max){const Range = max-min; const Rand = Math.random(); return Min + Math.round(Rand * Range); Const getRandomNum = () => {const Max = data.rowRect * data.rowRect data.randomNum = RandomNumBoth(1, max); };Copy the code

4. How to generate yoYO projections of different colors

Originally intended to fine tune yoyo pictures, time is limited, and finally adopted the projection

The CSS filter drop-shadow is used here

filter: drop-shadow(rgb(95, 153, 159) 112px 0px 0px); 

transform: translateX(-112px); 
Copy the code

Because the shadow is shifted to the right by the same width, we need to move the shadow to the left in the div, and add overflow: Hidden style to the parent box of the DIV, so that we can create a different color shadow

5. Click events

const pickColor = (n, index) => { if (data.rowRect === 2) { data.deadTime -= 1; countDown(); } if (data.rowRect <= 10) {data.rowrect += 1; } data.score += 10; getRandomNum(); getColor(); }};Copy the code

6. Countdown:

Use setTimeout to simulate setInterval to achieve countdown

let loop = null; /** * countDown */ const countDown = () => {clearTimeout(loop); loop = setTimeout(() => { if (data.deadTime > 0) { data.deadTime -= 1; countDown(); } else { data.rowRect = 0; }}, 1000); };Copy the code

In July and end

Reset variable, empty timer

The last

Time is limited, I have a lot of ideas, how to go home to wash the bottle, sorry