最簡單的原生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;
    }
});

如果有什麼不懂的或者建議可以留言告訴樓樓。