原生js实现选字游戏

<!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>
效果图
游戏逻辑：随机产生页面文字和颜色，选择正确加分。
文章地址 https://www.cnblogs.com/sandraryan/
巴特西

原生js实现选字游戏

最新文章

热门文章
