vue实现注意力测试考验小游戏代码-html代码-BFW代码库

代码语言：html

所属分类：游戏

代码描述：vue实现注意力测试考验小游戏代码，点击开始游戏，从1到25依次点击数字，看你最快能几秒完成

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <style>
        @charset "utf-8";
    * { margin: 0; padding: 0; }
    li,ul { list-style: none; }
    .wrap {
    	width: 724px;
    	height: 362px;
    	margin: 50px auto;
    	box-sizing: border-box;
    }
    .wrap h3 { 
    	text-align: center;
    	line-height: 48px;
    	}
    #main {
    	width: 100%;
    	height: 100%;
    	display: flex;
    	flex-flow: row;
    	box-sizing: border-box; 
    	justify-content: center;          
    }
    .main { 
    	flex: 0 0 50%;
    	display: flex;
    	flex-flow: wrap;
    	box-sizing: border-box;
    	}
    .box {
    	background-color: #fff;
    	border: 1px solid #ddd;
    	box-sizing: border-box;
    }
    .box p {
    	width: 70px;
    	line-height: 71px;
    	text-align: center;
    }
    .control {
    	width: 100%;
    	margin-top: 20px;
    	display: flex;
    	flex-flow: row;
    	justify-content: space-between;
    }
    .right {
    	background-color: #066;
    	color: #fff;
    }
    .top {
    	flex: 0 0 50%;
    	padding: 0 15px;
    	overflow: scroll;
    }
    .top li {
    	display: flex;
    	flex-flow: row;
    	justify-content: space-around;
    	border-bottom: 1px solid #ddd;
    	margin-bottom: 8px;            
    }
    .top li span { 
    	display: block;
    	flex: 1;
    	text-align: center;
    }
    </style>

</head>

<body>

    <div class="wrap">
        <h3>15秒注意力大考验</h3>
        <div id="main">
            <div class="main">
                <box v-for="(item, index) in items" :key="index" :num="item" :times="times" :rest="rest" :add-times.sync='times' :time-count.sync='timeCount'></box>
                <div class="control">
                    <button @click="startGame">开始游戏</button>
                    <p>用时：{{time}} 秒</p>
                </div>
            </div>
        </div>
    </div>
    <template id="box">
        <li class="box" @click="clickBox()" :class="{right: isRight}" :data-id=num.id>
            <p>{{num.val}}</p>
        </li>
    </template>
    <template>
        <div></div>
    </template>

    <script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/vue@2.6.1.js"></script>
    <script>
        // 方格组件
        Vue.component('box', {
            template: '#box',
            props: ['num', 'times', 'rest'],
            data() {
                return {
                    isRight: false,
                    isNum: 0
                }
            },

            methods: {
                /*
                ** @desc: clickBox 点击方块的函数，点击正确的方块并计数，通过正确点击次数与方块数字相比较，是否按顺序点击方块，如果是，add-times加1次，并更改方块样式。如果所有方块都点完，则更改time-count的值。同时判断是否开始游戏，如果没有开始游戏则跳出提示
                ** @method: vm.$emit(event, newval)
                ** @param:
                ** @return:
                ** @key: this.$emit 子组件更新父组件的方法，通过在父组件中绑定子组件:add-times.sync='times' 
                */
                clickBox: function() {
                    let t = this.times + 1
                    if(this.num.val == this.times && this.rest == true) {
                        this.isRight = true;
                        this.$emit('update:add-times', t)
                        if(t == 26){
                            this.$emit('update:time-count', true)
                        }
                    }else if(this.rest == false) {
                        alert('请开始游戏');
                    }
                }
            },
            watch: {
                /*
                ** @desc: rest 监听rest变量的值，来判断游戏是否重新开始，重置方块所有的样式
                ** @method:
                ** @param:
                ** @return:
                */
                'rest': function(newnum) {
                    this.isRight = false
                }
            }
        })

        var v = new Vue({
            el: '#main',
            data: {
                items: [],
                times: 1, // 正确点击次数
                rest: false, // 重置标识
                time: 0, // 计时
                timeSend: null,
                timeCount: false, // 方块点完标识
                players: JSON.parse(localStorage.getItem('list'))
            },
            // TODO 应当增加一个载入网页时，导入成绩的方法
            created: function() {
                // 创建方格
                this.buildBox();
                // 开始计时
                // this.totalTime();
            },

            watch: {
                /*
                ** @desc: timeCount 监听方块是不是点完25块
                ** @method: clearInterval(intervalID) 取消设置的计数任务
                ** @param:
      .........完整代码请登录后点击上方下载按钮下载查看