首页 > 代码库 > 选字游戏

选字游戏

<!DOCTYPE html><html lang="en"><head>    <meta charset="UTF-8">    <title>选字游戏</title>    <style>        #wrap{width: 400px;height: 600px;border: 1px solid red;margin: auto}        #big{font-size: 140px;text-align: center}        li{list-style: none;float: left;width: 20%;font-size: 40px;}    </style>    <script src="js/jquery-1.7.1.min.js"></script></head><body>    <div id="wrap">        <div id="big"></div>        <p>根据上面的文字选择正确的颜色</p>        <ul id="small">            <li></li>            <li></li>            <li></li>            <li></li>            <li></li>        </ul>    </div>    <script type="text/javascript">        $(function(){            var bigTextNum = 0;            //创建随机数            function randFn(max,min){                return parseInt(Math.random()*(max-min)+min)            }            //创建颜色数组            var arrAllText = [,,,,绿];            var arrAllColor = [red,black,yellow,blue,green];            //为上面一个div添加随机文字            function setBig(){                $("#big").css({                    color:arrAllColor[randFn(0,5)],                })                ranTextNum=randFn(0,5);                //储存下标                bigTextNum=ranTextNum;                $("#big").text(arrAllText[ranTextNum]);            }            setBig();            //为下面的li添加文字            function setSmall(){                //这是为了防止第二次时事件带来的影响,清除所有事件                $("li").off("click");                //深拷贝******                var arrTempText = [].concat(arrAllText);                var arrTempColor = [].concat(arrAllColor);                var lis=$("#small li");                for (var i = 0; i < lis.length; i++) {                    var num=randFn(0,arrTempText.length);                    lis.eq(i).text(arrTempText[num]);                    var numC=randFn(0,arrTempColor.length);                    lis.eq(i).css("color",arrTempColor[numC]);                    //比较上面文字和下面文字的下标,因为他们是对应的                    if(arrAllColor[bigTextNum] == arrTempColor[numC]){                        lis.eq(i).on("click",function(){                            setBig();                            setSmall();                        })                    }                    //防止li里出现重复的字,所以添加一个从数组里删除一个                    arrTempText.splice(num,1);                    arrTempColor.splice(numC,1);                };            }            setSmall();        })    </script></body></html>

技术分享

选字游戏