I am participating in the individual competition of the Nuggets Community Game Creativity Contest. For details, please see: Game Creativity Contest
introduce:
This game is to find yoyos of different colors within 1 minute, click on it, go to the next link
At the beginning, there are only 4 color blocks. As the game progresses, the ranks of color blocks will increase, but the maximum color block will be limited to 121;
The technology stack used is vite+ vue3+element plus
Game address:
642134542.github.io/find-color/…
Code address:
game interface
game development process
Because the idea of the game is relatively simple, I will not go into details about the construction process, but will only explain the ideas in the development process.
1. Layout
First create a 600 * 600 game area, which will place several small divs; evenly layout
The style uses floating float: left
Because there are several divs, the rows and columns are equal, so you need to consider the width and height of each div, including the interval
Initialize the setup queue
rowRect: 2, // initially 2
The style of each div given is calculated by computed
const itemStyle = computed(() => {
const margin = (data.rowRect - 1) * 10; // 每个div的间隔为10px，
const n = (600 - margin) / data.rowRect;
return {
width: `${n}px`,
height: `${n}px`,
}
});
复制代码2. Random colors and similar colors
Random colors form three groups of numbers by calculating random numbers from 0 to 255 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));//获取0-255之间的随机数
}
const color = `rgba(${result.toString()})`
const similarityColor = `rgba(${result.toString()},${transparency})`
return { color, similarityColor }
}
复制代码As for similar colors, I did not calculate the surrounding colors of random colors, but used the transparency of rgba, which can also have a certain degree of similarity and recognition.
3. Random numbers
need to get
0<=x<=rowRect2
random number of
/**
* 获取随机数
*/
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);
};
复制代码4. How to generate yoyo projections of different colors
I originally planned to fine-tune yoyo's pictures, but the time was limited, and the projection was finally used
Here is the css filter filter drop-shadow
filter: drop-shadow(rgb(95, 153, 159) 112px 0px 0px);
transform: translateX(-112px);
复制代码Because the projection is used, the displacement of equal width is shifted to the right, so we need to move the projection to the left into the div, and add the overflow:hidden style to the parent box of the div, so that projections of different colors can be formed.
5. Click event
const pickColor = (n, index) => {
if (data.rowRect === 2) {
data.deadTime -= 1;
countDown();
}
if (data.randomNum === index) { // 寻找成功
if (data.rowRect <= 10) {
data.rowRect += 1;
}
data.score += 10;
getRandomNum();
getColor();
}
};
复制代码6. Countdown:
Use setTimeout to simulate setInterval to implement countdown
let loop = null;
/**
* 倒计时
*/
const countDown = () => {
clearTimeout(loop);
loop = setTimeout(() => {
if (data.deadTime > 0) {
data.deadTime -= 1;
countDown();
} else {
data.rowRect = 0;
}
}, 1000);
};
复制代码7. End
reset variable, clear timer
At last
Time is limited, there are many ideas, but I have to wash the bottle when I go home, sorry