原生js实现选字游戏

不念不忘少年蓝@ 2023-06-05 08:12 106阅读 0赞

<!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">
        <title>Document</title>
        <style>
            #wrap {
                width: 400px;
                margin: 30px auto;
                font-size: 18px;
                box-shadow: 5px 5px 20px rgb(231, 188, 130);
                border-radius: 8px;
            }
            #header p:first-child{
                float: left;
                margin-left: 20px;
            }
            #header p:last-child{
                float: right;
                margin-right: 20px;
            }
        
            #main {
                clear: both;
                font-size: 150px;
                text-align: center;
                margin: 120px auto;
            }
            #wrap>p {
                text-indent: 2em;
                line-height: 35px;
                margin: 5px;
            }
            .choose{
                display: flex;
                justify-content: space-around;
            }
            .choose p {
                font-size: 30px;
                cursor: pointer;
            }
            </style>
    </head>
    <body>
        <div id="wrap">
            <div id="header">
                <p>倒计时：<span id="time">10</span>s</p>
                <p>得分：<span id="mark">0</span>分</p>
            </div>
            <div id="main"></div>
            <p>根据上面字体的颜色从下面选择正确的字，选择正确游戏自动开始.</p>
            <div id="choose" class="choose">
                <p>蓝</p>
                <p>黄</p>
                <p>绿</p>
                <p>粉</p>
                <p>红</p>
            </div>
        </div>
    
        <script>
        var time = document.getElementById("time");
        var mark = document.getElementById("mark");
        var main = document.getElementById("main");
        var smallFont = document.querySelector('#choose');
        var choose = document.querySelectorAll('#choose p');
        // console.log(choose);
        
    
        // 文字的数组
        var fontArr = ["红","橙","黄","绿","蓝"];
        // 文字颜色的数组
        var colorArr = ["red","orange","yellow","green","blue"];
        // 声明分数，时间，倒计时，
        var grade = 0; 
        var djs = 10;
        var timer;
        // 设置flag
        var flag = true;
        // 封装函数生成随机数
        function random(a,b){
            return Math.round(Math.random()*(a-b)+b);
        }
        // 随机数组
        function rnArr(){
            var arr = [];
            // 去重
            // 数组长度小于5时
            while(arr.length<5){
                // 生成0-4的随机数作为数组下标
                var n = random(0,4);
                // 生成对应下标的数字在之前数组中不存在，push
                if(arr.indexOf(n)==-1){
                    arr.push(n);
                }
            }
            return arr;
        }
        rnArr();
        // 创建页面文字
        function createFont(){
            // 随机文字数组，随机取出一个作为页面大字（随机的索引的value）
            main.innerHTML = fontArr[random(0,4)];
            // 随机颜色数组，取出一个颜色给大字
            main.style.color = colorArr[random(0,4)];
            // 创建小字
            // 随机数组，作为小字和小字颜色
            var smallIndexArr = rnArr(); //小字数组
            var smallColorArr = rnArr(); //小字颜色数组
            // 让小字随机变化
            // 循环遍历小字数组
            for(var j = 0; j < smallIndexArr.length; j++){
                // 小字数组的每一项设为字体颜色
                var fontIndex = smallIndexArr[j];
                // 小字数组内容作为数组元素的下标，找原始数组内容
                // 给页面小字的元素集合赋值
                choose[j].innerText= fontArr[fontIndex];
                var colorIndex = smallColorArr[j];
                choose[j].style.color = colorArr[colorIndex];
            }
        }
        createFont();
        // 给小字循环绑定点击时间
        for(var k = 0; k < choose.length; k++){
            choose[k].onclick = function(){
                // 获取当前大字的颜色
                var bigColor = main.style.color;
                // 获取当前的的文字
                var word = this.innerText;
                // 判断大字颜色下标和小字内容在文字数组里的下标
                if(colorArr.indexOf(bigColor)==fontArr.indexOf(word)){
                    grade++;
                    mark.innerHTML = grade;
                    createFont();
                    if(flag){
                        // console.log(djs);
                        timer = setInterval(function(){
                            djs--;
                            time.innerHTML = djs;
                            // console.log(djs);
                            if(djs == -1){
                                // 清楚计时器
                                clearInterval(timer);
                                // 结束弹窗
                                alert('辣鸡' + grade +'分');
                                grade = 0;
                                djs = 10;
                                mark.innerHTML = grade;
                                time.innerText = djs;
                                creatFont();
                                flag = true;
                            }
                        },1000)
                    }
                    flag = false;
                }
            }
        }
        </script>
    </body>
    </html>

效果图

![1645790-20190925115615388-327985564.png][]

游戏逻辑： 随机产生页面文字和颜色，选择正确加分。

文章地址  [https://www.cnblogs.com/sandraryan/][https_www.cnblogs.com_sandraryan]

转载于:https://www.cnblogs.com/sandraryan/p/11583803.html

[1645790-20190925115615388-327985564.png]: /images/20230601/7f2cab87532b4c338fddbfe2064aaac6.png
[https_www.cnblogs.com_sandraryan]: https://www.cnblogs.com/sandraryan/