尚武科技——负责任的企业公民

尚武十年[点击进入]

科技以人为本
尚武旗下网站
尚武科技
搜索图标
Sitemap | Mail | 合作答疑 | 招贤纳士
网站公告 尚武科技服务热线:0311-87882018
   
我们是谁  |  企业文化  |  新闻动态  |  加入我们  |  行业知识
摔鼠标系列,选字游戏

我是石家庄做网站的一名前端工程师,今天我给大家分享的选字游戏的demo。希望这个demo希望对大家能有所帮助把代码贴到下面了

 

<html lang="en">

<head>

<meta charset="UTF-8">

<title>Document</title>

<style type="text/css">

/* 样式 */

*{

    margin:0;

    padding: 0;

    font-family: "微软雅黑";

}

body,html{

    height: 100%;

}

#wrap{

    width: 400px;

    margin: 0 auto;

    position: relative;

    height: 100%;

    min-height: 500px;

    max-height: 600px;

    border: 1px solid red;

}

#dao{

    position: absolute;

    left: 20px;

    top: 20px;

    font-size: 2em;

}

#wan{

    position: absolute;

    top: 20px;

    font-size: 2em;

    right: 20px;

}

#show{

    font-size: 10em;

    top: 90px;

    left: 120px;

    position: absolute;

}

#menu{

    padding: 40px;

    font-size: 2em;

    top: 250px;

    position: absolute;

}

#ul1{

    position: absolute;

    left: 0;

    bottom: 0;

    list-style: none;

}

#ul1 li{

    float: left;

    font-size: 5em;

}

</style>

</head>

<body>

<div id="wrap">

    <div id="dao">剩余时间:50</div>

    <div id="wan">完成:100</div>

    <div id="show">红</div>

    <div id="menu">根据上面的字的颜色从下面选择正确的字,选择正确自动开始</div>

    <ul id="ul1">

        <li>绿</li>

        <li>蓝</li>

        <li>黑</li>

        <li>黄</li>

        <li>红</li>

    </ul>

</div>

</body>

<script type="text/javascript">

    var show = document.querySelector("#show");

    var lis = document.querySelectorAll("#ul1>li");

    var menu = document.querySelector("#menu");

    var wan = document.querySelector("#wan");

    var dao = document.querySelector("#dao");

    

    var colors = ["red","green","blue","yellow","black"];

    var fonts = ["红","绿","蓝","黄","黑"];

    

    var num = 0;

    

    var showColorR;

    

    var countDown = 50;

    var timerBol = false;

    var clickBol = true;

    

    function gameOver(){

        if (num<5){

            alert("色盲,你该去吃药!!");

        }else if (num<8){

            alert("色弱,洗洗眼睛再来吧!");

        }else if (num<15){

            alert("你的智商超过5%的人了!!需要充值!");

        }else if(num<25){

            alert("少年仍需努力!!!");

        }else{

            alert("厉害了我的哥")

        }

    }

    

    var timer = setInterval(function (){

        

        if (timerBol){

            countDown--;

            dao.innerHTML = "剩余时间:"+countDown;

            if (countDown<=0){

                gameOver();

                clickBol = false;

                clearInterval(timer);

            }

        }

        

    },1000);

    

    function randFn(min,max){

        return parseInt(Math.random()*(max-min))+min;

    }

    

    function showRand(){

        //坑

        showColorR = randFn(0,5);

        var showFontR = randFn(0,5);

        

        show.style.color = colors[showColorR];

        show.innerHTML = fonts[showFontR];

    }

    

    function smallArr(){

        

        var arr = [];

        

        while(arr.length<5){

            var r = randFn(0,5);

            var bol = true;

            

            for (var i=0; i<arr.length; i++){

                if (arr[i]==r){

                    bol = false;

                    break;

                }

            }

            if (bol){

                arr.push(r);

            }

        }

        

        return arr;

    }

    

    function textRand(){

        var colorArr = smallArr();

        var fontArr = smallArr();

        

        for (var i=0; i<colorArr.length; i++){

            lis[i].style.color = colors[colorArr[i]];

            lis[i].innerHTML = fonts[fontArr[i]];

            lis[i].fontIndex = fontArr[i];

        }

    }

    

    showRand();

    textRand();

    

    for (var i=0; i<lis.length; i++){

        lis[i].onclick = function (){

//          alert(this.style.color);

            if (showColorR==this.fontIndex&&clickBol){

//              alert("点对了");

                timerBol = true;

                menu.style.display = "none";

                showRand();

                textRand();

                num++;

                

                wan.innerHTML="完成:"+num;

            }

        }

    }

</script>

</html>

 

以上就是石家庄做网站的尚武科技π为大家分享的选字游戏demo希望对各位小伙伴有所帮助。      

如果大家对有什么技术方面的问题,可以关注石家庄做网站的尚武科技官方公众号“尚武科技π”,其中会有大量关于”互联网+”的相关的内容供大家互相学习了解,同时欢迎大家一起讨论技术问题。

通过以上内容的说明,大家对选字游戏demo已经有了一定的了解。如果大家对这个demo有什么问题可以在尚武科技π留言,我们会在下期的文章更新中为您解答您的问题。 

希望石家庄做网站的尚武科技做网站做的越来越好。

如果大家觉得尚武科技π写的文章对大家有用的话别忘了分享给朋友,万分感谢大家对尚武科技的支持




上一篇:关于网站设计你记住了吗?(2)             下一篇:网站建设好后,还有那些不能缺少的工作?

标签:
尚武科技
睿亿网络用心服务的团队,竭诚为您服务 客服不能及时回复您,您可点击QQ进行交谈
欲了解业务详情,请拨打咨询热线:
总部电话:0311-87882018    值班电话:15512183667
在线服务: 尚武科技售前专员   尚武科技售前专员  尚武科技技术专员  尚武科技美工专员  尚武科技售后专员  
Copyright © 2008-2019 尚武科技 保留所有权利 >冀ICP备07012169号    Copyright © 2008 www.sw-tech.cn, Inc. All rights reserved