找回密码
当前位置：前端开发者 > 教程 > 正文

JS原生 简单的选字游戏 比较虐心(超简易的,,,大神勿喷 谢谢)

2018-11-06 15:14:13 分类：教程 / 更多 / 未分类 阅读(162) 评论(0)

[code=html,html 代码,true]<!DOCTYPE html>
<!–Made in 花小柒–>
<html>
<head>
<meta charset="UTF-8">
<title>选字游戏</title>
<style type="text/css">

all {

            width: 500px;
            border: 1px solid black;
            margin: 0 auto;
            padding: 20px;
        }

        #top {
            overflow: hidden;
        }

        #time {
            float: left;
            font-size: 30px;
        }

        #score {
            float: right;
            font-size: 30px;
        }

        #big_text {
            font-size: 150px;
            width: 250px;
            height: 250px;
            text-align: center;
            line-height: 300px;
            margin: 0 auto;
        }

        #intro {
            font-size: 30px;
            text-indent: 2em;
        }

        #bottom {
            overflow: hidden;
        }

        #bottom div {
            width: 100px;
            height: 100px;
            font-size: 50px;
            line-height: 100px;
            text-align: center;
            float: left;
        }
    </style>
</head>

<body>
    <div id="all">
        <div id="top">
            <div id="time">剩余时间:20</div>
            <div id="score">分数:0</div>
        </div>
        <div id="big_text">黄</div>
        <div id="intro">根据上面的字的颜色从下面选择正确的字，选择正确自动开始</div>
        <div id="bottom">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
</body>
<script type="text/javascript">
    var oBig_text = document.getElementById("big_text");
    var oBottom = document.getElementById("bottom");
    var oBottomDivs = oBottom.getElementsByTagName("div");
    var oScore = document.getElementById("score");
    var oTime = document.getElementById("time");
    var colorArr = ["red", "yellow", "blue", "green", "black"];
    var textArr = ["红", "黄", "蓝", "绿", "黑"];
    var score = 0;//记录分数
    var timer = null;
    var timeCount = 20;//倒计时秒数

    //正确更改颜色和内容
    changeTextAndColor();
    for (var i = 0; i < oBottomDivs.length; i++) {
        oBottomDivs[i].onclick = function () {
            //大的字的颜色 和 本身的字代表的颜色相同
            if (oBig_text.style.color == this.colorEn) {
                if (score == 0) {
                    //开启定时器
                    startTimer();
                }
                score++;
                oScore.innerHTML = "分数:" + score;
                //正确更改颜色和内容
                changeTextAndColor();
            }
        }
    }
    //定时器
    function startTimer () {
        timer = setInterval(function () {
            //判断
            if (timeCount ==0) {
                clearInterval(timer);alert("小主时间到啦
» 本文来自：前端开发者 » 《JS原生 简单的选字游戏 比较虐心(超简易的,,,大神勿喷 谢谢)》
» 本文链接地址：https://www.rokub.com/8843.html
» 您也可以订阅本站：https://www.rokub.com
赞(0)
64K
标签：前端开发者网站前端开发

前端开发者

相关推荐

评论 抢沙发

评论前必须登录！

 

最新评论