最简单的原生js别踩白块儿

相信很多人都玩过别踩白块儿，也就不解释了，没玩过的可以看了这篇文章自己写一个去玩玩。

首先说一下实现的思路

我们是先确定行数，在行里面再分几个小块。我们可以根据自己的手机大小确定一下要放多少个小块，比如楼楼放的是4*4。接下来我们在里面添加小黑块并添加随机数，让黑块随机出现在一行的任意位置，完成之后我们让黑块下移并且在上面添加一行，一定记得要删除掉最下面跑出去的一行，其他的计分，加速，可以自己添加，
html

    <div id="k1">
        <div id="k2"></div>
    </div>
    <h1>您的分数</h1>
    <h1 id="count">0</h1>   
    <div id="d1">
        <button type="button" id="b1">开始</button>
    </div>

css

@media screen and(max-device-width: 432px) {
    #k1 {
        width: 400px;
        height: 400px;
        background-color: #fff;
        border: 1px solid green;
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        #k2 {
            position:relative;
            top: -100px;
            width:100%;
            height:400px;
            .row {
                width:100%;
                height:100px;
                border-bottom: 1px solid black;
                .cell {
                    width:100px;
                    height:100px;
                    float: left;
                }
            }
        }
    }
    .black {
        width:100px;
        height:100px;
        float: left;
        background-color:black;
    }
    button {
        width: 70px;
        height: 30px;
        background-color:#9F9898;
    }
}

js

var game = {
    timer : null,//定时器开关
    state : 0,//状态
    speed : 2,//速度
    i : 1,
    //创建div
    cdiv : function(className){
        var div = document.createElement('div');
        div.className = className;
        return div;
    },
    //取id
    $ : function(id){
        return document.getElementById(id);
    },
    //创建row ，cell
    crow : function(){
        var row = game.cdiv('row');
        var k2 = game.$('k2');
        var classs = game.cblack();
        for(var i=0;i<4;i++){
            row.appendChild(game.cdiv(classs[i]));
        }
        if(k2.firstChild == null){
            k2.appendChild(row);
        } else {
            k2.insertBefore(row,k2.firstChild);
        }
    },
    //创建row
    init : function(){
        var k2 = game.$('k2');
        for(i=0;i<4;i++){
            game.crow();
        }
        k2.onclick = function(event){
            game.judge(event);
        };
    },
    //判断输赢
    judge :function(event){
        if(game.state == 3){
            alert('你已经输了');
            return;
        }
        var target = event.target;
        if(target.className.indexOf('black') == -1){
            game.panduan();
        }else {
            target.className = 'cell';
            event.target.parentNode.pass =1;
            game.score();
        }
    },
    panduan : function(){
        alert("你输了");
        game.state = 3;
        clearInterval(timer);
    },
    //随机黑块
    cblack : function(){
        var str = ['cell','cell','cell','cell'];
        var index = Math.floor(Math.random()*4);
        str[index] = 'black';
        return str;
    },
    //黑块向下走
    move : function(){
        var k2 = game.$('k2');
        var top = parseInt(window.getComputedStyle(k2,null).top);
        if(top+game.speed > 0){
            top = 0;
        }else{
            top+=game.speed;
        }
        k2.style.top = top +'px';
        if(top == 0){
            game.crow();
            k2.style.top = -100 +'px';
            game.drow();
        }else if(top == -100 + game.speed){
            if(k2.children.length == 5 && k2.lastChild.pass !== 1){
                game.panduan();
            }
        }
    },
    //定时器
    start : function(){
        timer = setInterval(game.move,30);
    },
    //删除最后一个儿子
    drow : function(){
        var k2 = game.$('k2');
        if(k2.childNodes.length == 6){
            k2.removeChild(k2.lastChild);
        }
    },
    //计数
    score : function(){
        var count = game.$('count');
        var index = parseInt(count.innerHTML);
        count.innerHTML = index+1;
        if(index / 20 ==1){
            game.speed +=2;
        }
        if(index == 100){
            alert('你牛逼');
            return;
        }
    },
    stop : function(){
        clearInterval(timer);
    },
};
var d1 = game.$('d1');
d1.addEventListener('click',function(event){
    var target = event.target;
    switch(target.id){
        case "b1":game.init();game.start();break;
    }
});

如果有什么不懂的或者建议可以留言告诉楼楼。