100字范文 > VUE：制作舒尔特方格点击游戏

VUE：制作舒尔特方格点击游戏

时间：2021-12-05 01:58:41

相关推荐

VUE：制作舒尔特方格点击游戏

练习：舒尔特方格点击游戏：一个简单的点击方格的游戏，按照顺序点击ｄｉｖ并进行颜色的改变，点击错误重新开始，有简单的计时功能以及错误提示

效果图：

<template ><div class="main" ><div v-if="isAction" ><div class="timer" ><div >{{ nowTime }}</div></div><div class="div-class" ><div v-for="(item, index) of number":key="index"class="box-class"@click="changeColor(item, index)"><span class="span-class" >{{ item }}</span></div></div></div><div v-else ><el-button type="primary"class="action-button-class"@click="actiomGame()">开始游戏</el-button><div class="tip-class" ><p > 舒尔特方格(Schulte Grid)是在一张方形卡片上画上 1cm*1cm 的 25 个方格，格子内任意填写上阿拉伯数字 1 ~ 25 等共 25 个数字。</p><p > 训练时，要求被测者用手指按1~25的顺序依次指出其位置，同时诵读出声，施测者一旁记录所用时间。数完25个数字所用时间越短，注意力水平越高。</p><p >以7—12岁年龄组为例，能达到26秒以上为优秀，学习成绩应是名列前茅，42秒属于中等水平，班级排名会在中游或偏下，50秒则问题较大，考试会出现不及格现象。</p><p > 以12―14岁年龄组为例，能到达16秒以上为优良，学习成就应是名列前茅，26秒属于中等水平，班级排名会在中游或偏下，36秒则问题较大，测验会呈现不合格现象。</p><p > 18岁及以上成年人最好可到达8秒的程度，20秒为中等程度。</p><p > “舒尔特方格”不但可以简单测量注意力水平，而且是很好的训练方法。又是心理咨询师进行心理治疗时常用的基本方法。</p><p >舒尔特方格是全世界范围内最简单，最有效也是最科学的注意力训练方法。寻找目标数字时，注意力是需要极度集中的，把这短暂的高强度的集中精力过程反复练习，大脑的集中注意力功能就会不断的加固，提高。注意水平越来越高。</p></div></div><el-dialog v-model="dialogVisible"title="Tips"width="30%":before-close="handleClose"><span v-if="isRight" >测试完成,用时{{ nowTime }},快去看一下成绩吧</span><span v-else >啊哦~ 点错了哦,下一个应该点击{{ count }}呦~</span><template #footer ><span class="dialog-footer" ><el-button type="primary" @click="handleClose" >确定</el-button></span></template></el-dialog></div></template>

ｊｓ代码

export default {name: 'AttentionTest',data() {return {number: [], // 随机展示25个数字isAction: false, // 点击改变方块颜色count: 0, // 计算点击次数timer: null, // 计时nowTime: '00:00:00', // 时间显示hour: 0,minutes: 0,seconds: 0,dialogVisible: false, // 弹窗是否可见isRight: false // 是否完成}},mounted() {this.getNumber()},methods: {// 开始游戏actiomGame() {this.nowTime = '00:00:00'this.hour = 0this.minutes = 0this.seconds = 0if (this.timer) {clearInterval(this.timer)}this.timer = setInterval(this.startTimer, 1000)this.isAction = true},// 初始化数组getNumber() {const arr = []for (let i = 1; i <= 25; i++) {arr.push(i)this.number = arr.sort(() => Math.random() > 0.5 ? -1 : 1)}},// 选择正确则改变方块颜色changeColor(item, index) {this.count++if (item === this.count) { // 点击正确document.getElementsByClassName('box-class')[index].style.background = '#42ca64'document.getElementsByClassName('box-class')[index].style.border = '1px solid #42ca64'if (this.count === 25) { // 游戏完成clearInterval(this.timer) // 清空计时器this.dialogVisible = true // 展示提示框this.isRight = true // 完成提示}} else { // 点击错误document.getElementsByClassName('box-class')[index].style.background = 'red'document.getElementsByClassName('box-class')[index].style.border = '1px solid red'clearInterval(this.timer)// 清空计时器this.dialogVisible = true// 展示提示框this.isRight = false// 未完成提示}},// 开启定时器startTimer() {this.seconds += 1if (this.seconds >= 60) {this.seconds = 0this.minutes = this.minutes + 1}if (this.minutes >= 60) {this.minutes = 0this.hour = this.hour + 1}this.nowTime = `${this.toZero(this.hour) + ':' + this.toZero(this.minutes) + ':' + this.toZero(this.seconds)}`},toZero(timeNumber) {return timeNumber < 10 ? '0' + timeNumber : timeNumber},// 关闭弹窗handleClose() {this.dialogVisible = false // 关闭弹窗this.isAction = false // 重新进入页面this.count = 0 // 清空计数this.getNumber() // 重置方格this.isRight = false}}}

ｃｓｓ样式

本内容不代表本网观点和政治立场，如有侵犯你的权益请联系我们处理。

网友评论

网友评论仅供其表达个人看法，并不表明网站立场。