JavaScript选字小游戏-原创手记-慕课网

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title></title>
    <style media="screen">
        .wrap {
            position: inherit;
            width: 450px;
            height: 700px;
            background: #efefef;
            border: 1px solid black;
            position: relative;
        }

        .time {
            position: absolute;
            left: 10px;
            top: 20px;
            font-size: 1.8rem;
        }

        .scoring {
            position: absolute;
            right: 30px;
            top: 20px;
            font-size: 1.8rem;
        }

        .show {
            position: absolute;
            left: 30%;
            top: 17%;
            font-size: 10rem;
        }

        .menu {
            position: absolute;
            left: 5%;
            top: 50%;
            width: 90%;
            font-size: 1.8rem;
        }

        .list {
            position: absolute;
            top: 60%;
            width: 100%;
            text-align: center;
        }

        .list p {
            display: inline-block;
            font-size: 4.5rem;
        }
    </style>
</head>

<body>
    <div class="wrap">
        <div class="time">剩余时间:20</div>
        <div class="scoring">完成:0</div>
        <div class="show">红</div>
        <div class="menu">根据上面的字的颜色从下面选择正确的字，选择正确自动开始</div>
        <div class="list">
            <p>红</p>
            <p>红</p>
            <p>红</p>
            <p>红</p>
            <p>红</p>
        </div>
    </div>
    <script type="text/javascript">
        var time = document.querySelector('.time');
        var scoring = document.querySelector('.scoring');
        var show = document.querySelector('.show');
        var list = document.querySelectorAll('.list>p');
        // console.log(show);
        var colors = ['red', 'yellow', 'blue', 'green', 'black'];
        var fonts = ['红', '黄', '蓝', '绿', '黑'];
        var times = 20;
        var score = 0;
        var colorIndex = 0;
        var timer = null; //存储计时器
        //随机函数
        function randFn() {
            var random = Math.floor(Math.random() * 5);
            return random;
        }
        //修改题目 的字和颜色
        function updateShow() {
            colorIndex = randFn();
            var fontIndex = randFn();
            show.innerHTML = fonts[fontIndex];
            show.style.color = colors[colorIndex];
        }
        updateShow();
        //返回随机数组
        function randArrFn() {
            var arr = [];
            while(arr.length < colors.length) {
                var bol = true;
                var rand = randFn();
                for(var i = 0; i < arr.length; i++) {
                    if(arr[i] == rand) {
                        bol = false;
                        break;
                    } else {
                        bol = true;
                    }
                }
                if(bol) {
                    arr.push(rand);
                }
            }
            //  console.log(arr);
            return arr;
        }
        //修改 选项设置 的字体和颜色 并且不能重复
        function updateList() {
            var color = randArrFn();
            var font = randArrFn();
            for(var i = 0; i < list.length; i++) {
                list[i].innerHTML = fonts[font[i]];
                list[i].style.color = colors[color[i]];
                list[i].fontIndex = font[i];
            }
        }
        updateList();
        var flag = false;
        for(var i = 0; i < list.length; i++) {
            list[i].onclick = function() {
                console.log(this.fontIndex);
                // console.log(colorIndex);
                if(this.fontIndex == colorIndex && times != 0) {
                    score += 1;
                    scoring.innerHTML = '完成:' + score;
                    //重置题目
                    updateShow();
                    //选项设置
                    updateList();
                    //计时器开关
                    flag = true;
                    //开始倒计时
                }
            }
        }
        timer = setInterval(function() {
            if(flag) {
                if(times == 0) {
                    flag = false;
                    alert('游戏结束');
                } else {
                    times--;
                    time.innerHTML = '剩余时间:' + times;
                }
            }
        }, 1000)
    </script>
</body>
</html>