温习了下js知识

做了个游戏:

<!DOCTYPE html>
<html>

    <head>
        <meta charset="UTF-8">
        <title></title>
        <style type="text/css">
            #cont {
                margin-top: 100px;
                width: 400px;
                height: 400px;
                border: 1px solid brown;
                position: relative;
            
            }
            
            #main {
                top: -100px;
                width: 400px;
                height: 400px;
                border: 1px solid blueviolet;
                position: absolute;
            }
            
            .row {
                height: 100px;
            }
            
            .row div {
                width: 98px;
                height: 98px;
                border: 1px solid black;
                float: left;
            }
            
            .black {
                background: black;
            }
        </style>
    </head>

    <body>
        <h2 id="score">0</h2>
        <div id="cont">
            <div id="main"></div>
        </div>
    </body>
    <script type="text/javascript">
        //创建div
        var main = document.getElementById("main")
        var clock=null;
        var k=true;
        var speed=2;
        function cDiv(className) {
            var div = document.createElement("div");
            if(className) {
                div.className = className;
            }
            return div;
        }

        function cRow() {
            var ind = Math.floor(Math.random() * 4)
            var row = cDiv('row');
            for(var i = 0; i < 4; i++) {
                if(i == ind) {
                    row.appendChild(cDiv('black'));
                } else {
                    row.appendChild(cDiv());
                }
            }
            if(main.firstChild) {
                main.insertBefore(row, main.firstChild)
            } else {
                main.appendChild(row);
            }

        }

        function init() {
            for(var i = 0; i < 4; i++) {
                cRow();
            }
            main.onclick=function(ev){
                ev.target=ev.target||ev.srcElement;
                if(k==false){
                    alert("请点击刷新")
                }else if (ev.target.className=="") {
                    clearInterval(clock)
                    k=false;
                    alert("输了1")
                }else{
                    var score=document.getElementById("score");
                    var src=parseInt(score.innerHTML)+1;
                    score.innerHTML=src;
                    if(src%10==0){
                        speed=speed+1;
                    }
                    ev.target.className="";
                    ev.target.parentNode.pass=true;             
                }
            }
            clock=window.setInterval('move();', 40)
        }
        init();

        function move() {
            var top = getStyle(main, "top");
            top = parseInt(top)+speed;
            main.style.top = top  + 'px';
            
            if(top>0){
                cRow();
                main.style.top="-100px";
                if (main.lastChild.pass==undefined) {
                    clearInterval(clock)
                    k=false;
                    alert("输了2")
                }
            }
            if (main.children.length>=5) {
                main.removeChild(main.lastChild)
            }
            
        }

        function getStyle(el, attr) {
            return el.currentStyle ? el.currentStyle[attr] : getComputedStyle(el, null)[attr];
        }
        
    </script>

</html>

推荐阅读更多精彩内容