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 = 0
      this.minutes = 0
      this.seconds = 0
      if (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 += 1
      if (this.seconds >= 60) {
        this.seconds = 0
        this.minutes = this.minutes + 1
      }
      if (this.minutes >= 60) {
        this.minutes = 0
        this.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>