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}}
}

ｃｓｓ样式

<style scoped >
.main {display: flex;justify-content: center;
}
.div-class {width:54vh;height:60vh;cursor: pointer;
}
.box-class {border: 1px solid #428bca;width:10vh;height:10vh;float: left;margin: 0.2vh;border-radius: 10%;background-color: #428bca;font-size: 2.5rem;line-height: 10vh;color: white;
}.timer {font-size: 4vh;margin-bottom: 1vh;
}.tip-class {border: 1px solid #a5aeb3;font-size: 2vh;text-align: initial;width: 120vh;padding: 0 3vh;margin-top: 5vh;
}.action-button-class {margin-top: 2vh;width: 15vh;height: 5vh;font-size: 2vh;
}.box-right-class {border: 1px solid #42ca64;width:10vh;height:10vh;float: left;margin: 0.2vh;border-radius: 10%;background-color: #42ca64;font-size: 2.5rem;line-height: 10vh;color: white;
}
</style>

VUE：制作舒尔特方格点击游戏相关推荐

舒尔特方格训练注意力游戏 | 舒尔特Pro
蘑菇云「行空板Python入门教程」第七课：舒尔特方格小游戏
注意力是一切学习的根本,是大脑进行感知.学习.思维等认知活动的基本条件.然而,无论是孩子还是成年人,我们常常会因开小差.注意力无法集中而困扰.此时,找到一个合适的方法来训练我们的注意力势在必行. 舒尔 ...
【鸿蒙万能卡片-Codelabs挑战赛】舒尔特方格游戏万能卡片
前言舒尔特方格游戏,是注意力训练方法之一,可以帮助孩子纠正上课分心走神.回家做作业拖拉毛病,但不能贪玩哦,玩多了,对眼睛,视力不好. 消息通知栏,通知用户当前最优成绩,也就是当前最快时间. 元服务卡 ...
基于 Vue 制作一个猜拳小游戏
目录前言: 项目效果展示: 对应素材: 代码实现思路: 实现代码: 总结: 前言: 在工作学习之余玩一会游戏既能带来快乐,还能缓解生活压力,跟随此文一起制作一个小游戏吧. 描述: 石头剪子布,是一种 ...
用android做图片翻牌小游戏,vue制作翻牌配对小游戏
简友们,好久不见.最近一直忙于工作没时间来为大家分享经验,刚好上周为联*做了一个七夕活动,是vue做的一个翻牌配对小游戏,上线后吸引了无数广大好友前来挑战.也有好友问我这游戏制作难不难呢,可不可以分享 ...
Java小游戏--舒尔特方格
一.逻辑部分 public class GridCalculator {private int row = 0;private int column = 0;private int nextScore ...
vue制作3*3拼图
自从上次发布了vue制作抓娃娃机经验之后,好多朋友来私信我让我多分享一些小游戏的经验.(看来友友们对这种小游戏还是挺感兴趣哦捂脸笑) 好了,回归正题.今天给大家带来一个比较简单的小游戏--拼图.想必大 ...
语言舒尔特方格程序_注意力训练神器——舒尔特方格(成人、孩子均适用)
注意力训练神器--舒尔特方格舒尔特方格训练法,是世界上最专业最普及最简略的注意力训练法.普遍利用于飞行员.航天员的训练,当然,也是学生提高注意力的有效训练法,成人.孩子都适用,特别适合亲子互动游戏. ...
语言舒尔特方格程序_有效提升孩子注意力的方法，舒尔特方格训练法，简单有效...
舒尔特方格训练法今天为大家介绍舒尔特方格训练法,这个方法可以有效提升孩子的注意力,短时间内收到良好的效果. 游戏道具 3×3方格,4×4数字方格,5×5数字方格,6×6数字方格等 1支笔制作方法 ...

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

VUE：制作舒尔特方格点击游戏相关推荐

最新文章

热门文章