JS找茬游戏

CSS：

    <style>
        *{padding: 0;margin: 0;box-sizing: border-box;list-style-type: none;}
        body{background-color: #000;}
        .wrap{width: 400px;height: 550px;border: 1px solid #ccc;background-color: #000;margin: 60px auto;position: relative;border-radius: 5px;}
        .back{width: 400px;height: 550px;border: 1px solid #ccc;background-color: #000;position: absolute;top:0;left:0;border-radius: 5px;display: none;}
        .back h1{color: #fff;text-align: center;margin-top: 237px;cursor: pointer;}
        div.content{padding: 50px 50px 0 50px;}
        div.top{color: #fff}
        .fl{float: left}
        .fr{float: right}
        .clearfix:after {visibility: hidden; clear: both; display: block; height: 0px; content: "."}
        .clearfix {zoom: 1; }
        div.mid{width: 300px;height: 300px;margin-top: 30px;border-radius: 5px;overflow: hidden;}
        #li1{background-color: #FDC500; }
        #li1 img{width: 100%}
        ul li img{width: 100%}
        #sec,#level{color: #FF2DAC;font-size: 28px;margin: 0 5px;}
        #start{width: 300px;height: 50px;background-color: #04C0FF;margin-top: 30px;border-radius: 5px;line-height: 50px;text-align: center;cursor: pointer;color: #fff;font-size: 20px;}
    </style>

HTML：

    <div class="wrap">
        <div class="back"><h1 id="back">重新开始</h1></div>
        <div class="content">
            <div class="top clearfix">
                <p class="fl">倒计时:<span id="sec">30.00</span>s</p>
                <p class="fr">第<span id="level">1</span>关</p>
            </div>
            <div class="mid">
                <ul id="oul">
                    <li id="li1"><img src="1.png" alt=""></li>
                </ul>
            </div>
            <p id="start">开始游戏</p>
        </div>
    </div>

    <script src="play.js"></script>
    <script>
        window.onload = function(){
            play.init();
        }
    </script>

js文件 play.js

    var play = {
    "oBack" : document.getElementById("back"),
    "back" : document.getElementsByClassName("back")[0],
    "oSec" : document.getElementById("sec"),
    "oLev" : document.getElementById("level"),
    "oSta" : document.getElementById("start"),
    "oUl" : document.getElementById("oul"),
    "oLi" : document.getElementById("li1"),
    "level" : 1,
    "time" : 30.00,
    "n" : 1,
    // 初始化
    "init" : function(){
        this.start();
        this.restart();
    },
    // 开始
    "start" : function(){
        var This = this;
        This.oLev.innerHTML = This.n;
        This.oSta.onclick = function(){
            This.oSta.remove();
            This.oLi.remove();
            This.timed();
            This.add();
        }
    },
    // 重新开始
    "restart" : function(){
        var This = this;
        this.oBack.onclick = function(){
            This.oBack.parentNode.style.display = "none";
            This.n = 1;
            This.level = 1;
            This.time = 30.00;
            var alli = This.oUl.querySelectorAll("li");
            for (var i = 0; i < alli.length; i++) {
                alli[i].remove();
            }
            This.timed();
            This.add();
        }
    },
    // 游戏倒计时
    "timed" : function(){
        var This = this;
        var timer = setInterval(function(){
            This.time = (This.time-0.02).toFixed(2);
            This.oSec.innerHTML = This.time;
            if(This.time <= 0){
                clearInterval(timer);
                if(This.n < 8){
                    alert("睁眼瞎");
                }else if(This.n >= 20){
                    alert("找不到词语形容你非人类的眼睛");
                }else if(This.n >= 12){
                    alert("火眼金睛");
                }else{
                    alert("高度近视");
                }
                This.oBack.parentNode.style.display = "block";
            }

        },20);
    },
    // 添加图片
    "add" : function(){
        this.level++;
        this.oLev.innerHTML = this.n;
        var aw = this.oUl.offsetWidth;
        for (var i = 0; i < this.level*this.level; i++) {
            var newLi = document.createElement("li");
            newLi.style.float = "left";
            newLi.style.width = aw/this.level + "px";
            newLi.style.height = aw/this.level + "px";
            newLi.style.backgroundColor = "rgb("+this.randcolor(255)+","+this.randcolor(255)+","+this.randcolor(255)+")";
            this.oUl.appendChild(newLi);
            var newImg = document.createElement("img");
            newImg.style.width = aw/this.level + "px";
            newImg.style.height = aw/this.level + "px";
            newImg.src = "1.png";
            newLi.appendChild(newImg);
        }
        var ran = this.randcolor(this.level*this.level);
        var alli = this.oUl.querySelectorAll("li");
        var oImg = alli[ran].children[0];
        oImg.src = "2.png";
        var This = this;
        alli[ran].onclick = function(){
            This.n++;
            for (var i = 0; i < alli.length; i++) {
                alli[i].remove();
            }
            if(This.level >= 11)
                This.level = 11; 
            This.add();
        }
    },
    // 生成随机数
    "randcolor" : function(num){
        return Math.floor(Math.random()*num);
    }
}

注意：兼容IE9以上浏览器
效果：
例子链接：http://pan.baidu.com/s/1pK9jcqJ