别踩白块 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<style>
#cont {
    margin-top:100px;
    width: 400px;
    height: 400px;
    border:1px solid blue;
    position: relative;
}

#main {
    width: 400px;
    height: 400px;
    position: relative;
    top:-100px;
}

.row {
    height: 100px;
}

.row div {
    width: 98px;
    height: 98px;
    border:1px solid gray;
    float: left;
}

.black {
    background: black;
}

</style>
<body>
    <h1>别踩白块第7步:加速及加速时的bug处理</h1>
    <h2 id="sc">0</h2>
    <div id="cont">
        <div id="main"></div>
    </div>
</body>
<script>
var main = document.getElementById('main');
var clock = null;
var state = true;
var speed = 2;

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

// 造div
function cDiv(className) {
    var div = document.createElement('div');    
    
    if(className) {
        div.className = className;    
    }

    return div;
}


// 造一行,即连造4个小div
function cRow() {
    // 造一个0-3之间的随机数
    var ind = Math.floor(Math.random()*4);

    // 造一个行div
    var row = cDiv('row');

    for(var i=0; i<4; i++) {
        if(i == ind) {
            row.appendChild(cDiv('black'));
        } else {
            row.appendChild(cDiv());
        }
    }

    // 把行row塞到main里
    if(main.firstChild) {
        main.insertBefore(row , main.firstChild);
    }else {
        main.appendChild(row);
    }
}

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) {
            fail();
        }
    }

    if(main.children.length>=5) {
        main.removeChild(main.lastChild);
    }
}

function init() {
    for(var i=0; i<4; i++) {
        cRow();
    }

    main.onclick = function(ev) {
        ev.target = ev.target || ev.srcElement;
        
        if(state == false) {
            alert('重开一局吧');
        } else if(ev.target.className == '') {
            fail();
        } else {
            ev.target.className = '';
            ev.target.parentNode.pass = true;
            var score = document.getElementById('sc');
            var sc = parseInt(score.innerHTML)+1;

            score.innerHTML = sc;

            if(sc%10==0) {
                speed +=2;
            }
            
        }
    }

    clock = window.setInterval('move();' , 40);
}


function fail() {
    clearInterval(clock);
    state = false;
    alert('输了');
}

init();

</script>
</html>

 

posted @ 2018-03-15 21:20  TangYJun  阅读(166)  评论(0)    收藏  举报