uniapp + vue 实现色弱测试小游戏
uniapp
最终的效果：点击色块中不同的色块，跳到下一关
准备一些静态数据，放到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: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 9,
blockCount: 64,
commonColor: '#33cc94',
specialColor: '#18e79b',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 10,
blockCount: 64,
commonColor: '#33ccc7',
specialColor: '#19e6df',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 11,
blockCount: 64,
commonColor: '#33cc8a',
specialColor: '#1ae58d',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 12,
blockCount: 64,
commonColor: '#cc4233',
specialColor: '#e42f1b',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 13,
blockCount: 64,
commonColor: '#7033cc',
specialColor: '#6b1be4',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 14,
blockCount: 64,
commonColor: '#ccb533',
specialColor: '#e3c51c',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 15,
blockCount: 64,
commonColor: '#6133cc',
specialColor: '#581de2',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 16,
blockCount: 64,
commonColor: '#cc6b33',
specialColor: '#e2651d',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 17,
blockCount: 64,
commonColor: '#cc337a',
specialColor: '#e11e79',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 18,
blockCount: 64,
commonColor: '#5e33cc',
specialColor: '#561fe0',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 19,
blockCount: 64,
commonColor: '#cca333',
specialColor: '#e0ac1f',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 20,
blockCount: 64,
commonColor: '#33cc57',
specialColor: '#20df4d',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 21,
blockCount: 64,
commonColor: '#cc3833',
specialColor: '#de2721',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 22,
blockCount: 64,
commonColor: '#33bfcc',
specialColor: '#21cede',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 23,
blockCount: 64,
commonColor: '#cc3345',
specialColor: '#dd2238',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 24,
blockCount: 64,
commonColor: '#ccad33',
specialColor: '#ddb722',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 25,
blockCount: 64,
commonColor: '#33c2cc',
specialColor: '#23d0dc',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 26,
blockCount: 64,
commonColor: '#cc8f33',
specialColor: '#db9224',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 27,
blockCount: 64,
commonColor: '#33a1cc',
specialColor: '#33a7db',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 28,
blockCount: 64,
commonColor: '#cc33c2',
specialColor: '#cc24d1',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 29,
blockCount: 64,
commonColor: '#3373cc',
specialColor: '#3370cd',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
{
index: 30,
blockCount: 64,
commonColor: '#7acccc',
specialColor: '#7bccca',
specialColor_position: getRandomIntNum(64),
style: {
width: '42px',
height: '42px',
border_radius: '5px',
box_shadow: '2px 2px 4px #848484'
}
},
]
export const seruoResultText = [
{
index: 0,
level: 'LV0',
text: '无目之眼'
},
{
index: 1,
level: 'LV1',
text: '凡胎之眼'
},
{
index: 2,
level: 'LV2',
text: '迟钝之眼'
},
{
index: 3,
level: 'LV3',
text: '惺忪之眼'
},
{
index: 4,
level: 'LV4',
text: '柔情之眼'
},
{
index: 5,
level: 'LV5',
text: '慈祥之眼'
},
{
index: 6,
level: 'LV6',
text: '专注之眼'
},
{
index: 7,
level: 'LV7',
text: '善良之眼'
},
{
index: 8,
level: 'LV8',
text: '坚定之眼'
},
{
index: 9,
level: 'LV9',
text: '敏锐之眼'
},
{
index: 10,
level: 'LV10',
text: '明眸之眼'
},
{
index: 11,
level: 'LV11',
text: '不羁之眼'
},
{
index: 12,
level: 'LV12',
text: '虎目之眼'
},
{
index: 13,
level: 'LV13',
text: '脉脉之眼'
},
{
index: 14,
level: 'LV14',
text: '炯炯之眼'
},
{
index: 15,
level: 'LV15',
text: '皓月之眼'
},
{
index: 16,
level: 'LV16',
text: '犀利之眼'
},
{
index: 17,
level: 'LV17',
text: '灼灼之眼'
},
{
index: 18,
level: 'LV18',
text: '深沉之眼'
},
{
index: 19,
level: 'LV19',
text: '睿智之眼'
},
{
index: 20,
level: 'LV20',
text: '深邃之眼'
},
{
index: 21,
level: 'LV21',
text: '秋瞳之眼'
},
{
index: 22,
level: 'LV22',
text: '先天之眼'
},
{
index: 23,
level: 'LV23',
text: '悟空之眼'
},
{
index: 24,
level: 'LV24',
text: '金刚之眼'
},
{
index: 25,
level: 'LV25',
text: '刑天之眼'
},
{
index: 26,
level: 'LV26',
text: '杨戬之眼'
},
{
index: 27,
level: 'LV27',
text: '恶魔之眼'
},
{
index: 28,
level: 'LV28',
text: '天使之眼'
},
{
index: 29,
level: 'LV29',
text: '光之眼'
},
{
index: 30,
level: 'LV30',
text: '审判之眼'
},
]
接下来两个vue文件，分别对应两个页面
<template>
<view class="bg">
<view class="title">
色弱小测试
</view>
<view class="rules">
找出所有色块里颜色不同的一个
</view>
<view class="start_game">
<button id="btn_start" type="default" @click="startGame">开始</button>
</view>
</view>
</template>
<script>
export default {
data() {
return {
};
},
onLoad() {
// 显示加载中，500毫秒之后消失
this.loading();
},
methods: {
// 显示加载中，500毫秒之后消失
loading(){
uni.showLoading({
title: '加载中...',
mask: true
})
setTimeout(() => {
uni.hideLoading();
}, 500)
},
// 点击开始按钮开始游戏
startGame(){
uni.navigateTo({
url: '/pages/games/achromatismTestDetail'
})
}
}
}
</script>
<style lang="less" scoped>
@import url('../../static/css/basic.css');
.title {
width: 100%;
padding-top: 30px;
text-align: center;
color: #ff557f;
font-weight: 600;
font-size: 28px;
}
.rules {
width: 100%;
margin-top: 50px;
text-align: center;
color: #c282c2;
font-size: 15px;
}
.start_game {
margin-top: 150px;
text-align: center;
button {
width: 150px;
height: 65px;
color: #f5f5f5;
font-size: 25px;
font-weight: 600;
background-color: #f4517a;
box-shadow: 3px 3px 6px #848484;
}
}
</style>
<template>
<view class="bg_red">
<view class="title">
色弱小测试
</view>
<view class="game_main">
<view class="time_score">
<view class="time">
<text>时间：</text>
<text>{{countdown}}</text>
</view>
<view class="score">
<text>得分：</text>
<text>{{score}}</text>
</view>
</view>
<view class="color_block_main">
<view
:style="{'background-color': (index == dataObject.specialColor_position ? dataObject.specialColor : dataObject.commonColor), 'width': dataObject.style.width, 'height': dataObject.style.height, 'border-radius': dataObject.style.border_radius, 'box-shadow': dataObject.style.box_shadow}"
v-for="(item,index) in dataObject.blockCount" :key="index" @click="clickSpecial(index)">
</view>
</view>
</view>
<!-- 遮罩层 -->
<view class="countdown_end_mask" v-show="resultShow">
<view class="title_success">
测试成功
</view>
<view class="success_content">
<view class="success_content_top">
<text class="success_content_text">{{resultObject.text}}: </text>
<text class="success_content_level">{{resultObject.level}}</text>
</view>
<view class="success_content_bottom">
<uni-icons type="home-filled" size="30" class="home" @click="toHomePage"></uni-icons>
<button size="30" @click="reRestart" class="restart_btn">再来一次</button>
<button class="redo" open-type="share" @click="toShare">
<uni-icons type="redo" size="30"></uni-icons>
</button>
</view>
</view>
</view>
</view>
</template>
<script>
import {
seruoDatas,
seruoResultText,
getRandomIntNum
} from '../../static/js/seruoData.js';
export default {
data() {
return {
currentLevel: 0, // 当前关卡
countdown: 60, // 倒计时
score: 0, // 分数
timer: null, // 定时器
resultShow: false, // 倒计时结束后遮罩层显示
resultObject: {
index: 0,
level: 'LV0',
text: '无目之眼'
}, // 最终测试结果
dataObject: {
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'
}
}, // 等级0 分数0 的时候要展示的颜色块数量，特殊颜色块的颜色，以及特殊颜色块的位置
}
},
onLoad() {
// 显示加载中，500毫秒之后消失
this.loading();
// 将第一个数据对象取出来
this.getFirstDataObject();
// 加载分享菜单
this.loadingShareMenu();
},
methods: {
// 显示加载中，500毫秒之后消失
loading() {
uni.showLoading({
title: '加载中...',
mask: true
})
setTimeout(() => {
uni.hideLoading();
// 倒计时
this.startCountdown();
}, 500)
},
// 倒计时
startCountdown() {
if (!this.timer) {
this.timer = setInterval(() => {
if (this.countdown > 0 && this.countdown <= 60) {
this.countdown--;
} else {
clearInterval(this.timer);
this.timer = null;
// 显示遮罩层，看多少等级
this.getResult();
}
}, 1000)
}
},
// 将第一个数据对象取出来
getFirstDataObject() {
// 当前关卡：0
this.currentLevel = 0;
this.dataObject = seruoDatas[0];
},
// 点击方块
clickSpecial(index) {
// 如果点击到了特殊颜色的方块，就到下一关
if (index == this.dataObject.specialColor_position) {
if (this.currentLevel == 30) {
this.getResult();
} else {
this.currentLevel++;
this.score++;
this.dataObject = seruoDatas[this.currentLevel]
}
}
},
// 得到最终结果
getResult() {
this.resultShow = true;
this.resultObject = seruoResultText[this.currentLevel];
},
// 去首页
toHomePage() {
uni.navigateTo({
url: '/pages/index/index'
})
},
// 再来一次
reRestart() {
// 页面重载
const pages = getCurrentPages()
// 声明一个pages使用getCurrentPages方法
const curPage = pages[pages.length - 1]
// 声明一个当前页面
curPage.onLoad(curPage.options) // 传入参数
curPage.onShow()
// 执行刷新
curPage.onReady()
this.resultShow = false;
this.score = 0;
this.currentLevel = 0;
this.countdown = 60;
this.getFirstDataObject();
},
// 加载分享菜单
loadingShareMenu() {
wx.showShareMenu({
withShareTicket: true,
//设置下方的Menus菜单，才能够让发送给朋友与分享到朋友圈两个按钮可以点击
menus: ["shareAppMessage", "shareTimeline"]
})
},
// 去分享
toShare() {
uni.share({
provider: "weixin",
scene: "WXSceneSession",
type: 1,
summary: "色弱测试，看你能到第几关，快来跟我一起玩吧！",
success: function(res) {
console.log("success:" + JSON.stringify(res));
},
fail: function(err) {
console.log("fail:" + JSON.stringify(err));
}
});
}
}
}
</script>
<style lang="less" scoped>
.bg_red {
width: 100%;
min-height: 100vh;
background-color: #f06060;
.title {
width: 100%;
font-size: 30px;
font-weight: 700;
padding-top: 50px;
color: aliceblue;
text-align: center;
}
.game_main {
width: 92%;
margin-top: 50px;
margin-left: auto;
margin-right: auto;
.time_score {
display: flex;
justify-content: space-between;
.time {
font-size: 17px;
color: aliceblue;
}
.score {
font-size: 17px;
color: aliceblue;
}
}
.color_block_main {
margin-top: 10px;
width: 100%;
height: 350px;
border-radius: 10px;
background-color: #fff;
border: 6px solid #fff;
position: relative;
left: -7px;
display: flex;
justify-content: space-around;
flex-wrap: wrap;
padding-top: 5px;
.per_color_block {
width: 160px;
height: 160px;
border-radius: 10px;
box-shadow: 3px 3px 6px #848484;
}
}
}
.countdown_end_mask {
position: absolute;
left: 27px;
top: 180px;
width: 86%;
height: 360px;
background-color: #f17f14;
opacity: 0.9;
z-index: 999999;
border-radius: 10px;
.title_success {
width: 100%;
text-align: center;
font-size: 40px;
font-weight: 800;
color: aliceblue;
}
.success_content {
margin-top: 10px;
width: 100%;
height: 300px;
background-color: #fff5d4;
display: flex;
flex-direction: column;
justify-content: space-around;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
.success_content_top {
text-align: center;
.success_content_text {
font-size: 26px;
color: #a15a19;
font-weight: 600;
margin-right: 10px;
}
.success_content_level {
font-size: 26px;
color: #a15a19;
font-weight: 600;
}
}
.success_content_bottom {
display: flex;
align-items: center;
justify-content: space-evenly;
.restart_btn {
width: 140px;
height: 50px;
border-radius: 15px;
background-color: #e9a62f;
color: #ffffff;
font-size: 20px;
letter-spacing: 2px;
font-weight: 600;
position: relative;
left: 30px;
}
.home {
position: relative;
left: 25px;
}
.redo {
width: 50px;
height: 50px;
border-radius: 50%;
background-color: #fff5d4;
text-align: center;
uni-icons {
position: relative;
top: -10px;
}
}
}
}
}
}
</style>
通过vue动态绑定样式的方式，去渲染每一关的色块颜色以及大小。
