uniapp + vue 实现色弱测试小游戏

最新推荐文章于 2024-05-22 16:59:21 发布

Fantasy嘿

最新推荐文章于 2024-05-22 16:59:21 发布

阅读量393

点赞数

分类专栏：代码色弱测试前端文章标签： javascript 前端 html

本文链接：https://blog.csdn.net/weixin_50794535/article/details/128560290

版权

最终的效果：点击色块中不同的色块，跳到下一关

准备一些静态数据，放到js目录下，在vue文件中引入即可

// 在1到比1大的任意整数之间随机取一个整数
export const getRandomIntNum = (maxNum) =>{
   
	return Math.floor(Math.random() * maxNum);
}


export const seruoDatas = [
	{
   
		index: 0,
		blockCount: 4,
		commonColor: '#3399cc',
		specialColor: '#0da6f2',
		specialColor_position: getRandomIntNum(4),
		style: {
   
			width: '160px',
			height: '160px',
			border_radius: '10px',
			box_shadow: '3px 3px 6px #848484'
		}
	},
	{
   
		index: 1,
		blockCount: 9,
		commonColor: '#bdcc33',
		specialColor: '#daf10e',
		specialColor_position: getRandomIntNum(9),
		style: {
   
			width: '110px',
			height: '110px',
			border_radius: '8px',
			box_shadow: '3px 3px 6px #848484'
		}
	},
	{
   
		index: 2,
		blockCount: 16,
		commonColor: '#cc3369',
		specialColor: '#f00f5e',
		specialColor_position: getRandomIntNum(16),
		style: {
   
			width: '80px',
			height: '80px',
			border_radius: '8px',
			box_shadow: '3px 3px 6px #848484'
		}
	},
	{
   
		index: 3,
		blockCount: 25,
		commonColor: '#6b33cc',
		specialColor: '#6211ed',
		specialColor_position: getRandomIntNum(25),
		style: {
   
			width: '65px',
			height: '65px',
			border_radius: '8px',
			box_shadow: '3px 3px 6px #848484'
		}
	},
	{
   
		index: 4,
		blockCount: 36,
		commonColor: '#33cb54',
		specialColor: '#12ed41',
		specialColor_position: getRandomIntNum(36),
		style: {
   
			width: '55px',
			height: '55px',
			border_radius: '8px',
			box_shadow: '3px 3px 6px #848484'
		}
	},
	{
   
		index: 5,
		blockCount: 49,
		commonColor: '#cc4233',
		specialColor: '#ec2913',
		specialColor_position: getRandomIntNum(49),
		style: {
   
			width: '48px',
			height: '48px',
			border_radius: '5px',
			box_shadow: '2px 2px 4px #848484'
		}
	},
	{
   
		index: 6,
		blockCount: 64,
		commonColor: '#3359cc',
		specialColor: '#144aeb',
		specialColor_position: getRandomIntNum(64),
		style: {
   
			width: '42px',
			height: '42px',
			border_radius: '5px',
			box_shadow: '2px 2px 4px #848484'
		}
	},
	{
   
		index: 7,
		blockCount: 64,
		commonColor: '#cc3378',
		specialColor: '#e91675',
		specialColor_position: getRandomIntNum(64),
		style: {
   
			width: '42px',
			height: '42px',
			border_radius: '5px',
			box_shadow: '2px 2px 4px #848484'
		}
	},
	{
   
		index: 8,
		blockCount: 64,
		commonColor: '#c733cc',
		specialColor: '#e117e8',
		specialColor_position: getRandom