原生js实现选字游戏

Posted sandraryan

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了原生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实现选字游戏的主要内容,如果未能解决你的问题,请参考以下文章

原生JS实现简易打字游戏

原生JS实现简易打字游戏

原生JS实现简易打字游戏

一个简单用原生js实现的小游戏----FlappyBird

原生JS实现的h5小游戏-植物大战僵尸

原生JS实现简易扫雷游戏