我正在参加掘金社区游戏创意投稿大赛个人赛，详情请看：游戏创意投稿大赛
介绍：
这个游戏就是在1分钟内，找出不同颜色的yoyo，点击它之后，进入下一个环节
初始的时候，只有4个色块，随着游戏的深入，色块的行列都会增加，但是最大的色块会限制在121个；
采用的技术栈是vite + vue3 + element plus
游戏地址：
642134542.github.io/find-color/…
代码地址：
游戏界面
游戏开发过程
因为该游戏的思路比较简单，所以搭建的过程我就不一一赘述，只会说明下，开发过程中的思路
1、布局
首先创建600 * 600的游戏区域，里面会放置若干个小div；均匀布局
样式采用的是浮动 float：left
因为是若干个div，行和列是相等的，所以需要考虑每个div的宽高，包括间隔
扫描二维码关注公众号，回复：
13791424 查看本文章
初始化设置行列
rowRect: 2, // 初始为2
给定的每个div的样式通过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、随机颜色以及相似颜色
随机颜色通过计算0~255的随机数，形成三组数，组成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 }
}
复制代码至于相似颜色，我并没有去计算随机颜色的周围颜色，而是采用rgba的透明度，这样也可以有一定的相似性和辨认度
3、随机数
需要获取
0<=x<=rowRect2
的随机数
/**
* 获取随机数
*/
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、如何生成不同颜色的yoyo投影
本来打算微调yoyo的图片的，时间有限，最后采用的投影
这里用到的是css的滤镜 filter drop-shadow
filter: drop-shadow(rgb(95, 153, 159) 112px 0px 0px);
transform: translateX(-112px);
复制代码因为采用了投影，向右偏移了等宽的位移，所以我们要把投影向左移入到div中，在div的父盒子中增加overflow:hidden 样式，这样就可以形成不同颜色的投影
5、点击事件
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、倒计时：
使用setTimeout模拟setInterval 实现倒计时
let loop = null;
/**
* 倒计时
*/
const countDown = () => {
clearTimeout(loop);
loop = setTimeout(() => {
if (data.deadTime > 0) {
data.deadTime -= 1;
countDown();
} else {
data.rowRect = 0;
}
}, 1000);
};
复制代码7、结束
重置变量，清空定时器
最后
时间有限，有很多思路，奈何回家要洗奶瓶，抱歉