<div class="wrapper">
        <div id="go">
            <a href="javaScript:void(0)" id="go">Game Start</a>
        </div>
        <div id="main">
</div></div>

*{
    margin:0;
    padding:0;
}

.wrapper{
    margin:150px auto;
    width:400px;
    height:600px;
    border:1px solid #ccc;
    position: relative;
    overflow: hidden;
}

#go{
    width:100%;
    position: absolute;
    top:0;
    text-align: center;
    z-index:99;
}

#go a{
    display:block;
    height:100px;
    width:400px;
    color:cyan;
    background-color: #000000;
    text-decoration: none;
    border-bottom:3px dashed #eee;
    font-size:60px;
    font-weight:600;
}

#main{
    width:400px;
    height:600px;
    position: relative;
    top:-150px;
    /* border:1px solid black; */
}

.row{
    width:400px;
    height:150px;
}

.row div{
   width:99px;
   height:149px;
   border-left:1px solid #222;
   border-bottom:1px solid #222;
   float: left;
   cursor: pointer;
}

var main = document.getElementById('main'); // 獲取dom元素
var go = document.getElementById('go'); 
var speed = 5, num = 0, timer, flag = true; // 設(shè)置初始變量
var colors = ['red', 'green', 'black', 'blue']; // 設(shè)置存放顏色的數(shù)組

function cDiv() {
    var oDiv = document.createElement('div');// 獲取一個(gè)隨機(jī)數(shù)將每一行找到一個(gè)隨機(jī)div 設(shè)置上顏色
    var index = Math.floor(Math.random() * 4);
    
    oDiv.setAttribute('class', 'row'); // 設(shè)置行class類名
    for (var j = 0; j < 4; j++) { // for循環(huán)生成一行四個(gè)div
        var iDiv = document.createElement('div');
        oDiv.appendChild(iDiv); // 將每一個(gè)小div插入每一行中
    }
    
    if (main.childNodes.length == 0) { // 根據(jù)父級(jí)中是否有子元素   插入新生成的行
        main.appendChild(oDiv);  // 如果父級(jí)為空  直接插入
    } else {
        main.insertBefore(oDiv, main.childNodes[0]); // 如果父級(jí)有元素   將新生成的一行插入到已有行數(shù)的最前面
    } 
    var clickDiv = main.childNodes[0].childNodes[index]; // 根據(jù)隨機(jī)數(shù) 設(shè)置一行中有顏色的div
    clickDiv.setAttribute('class', 'i'); // 將此元素設(shè)置class類名  作為需要點(diǎn)擊的標(biāo)記
    clickDiv.style.backgroundColor = colors[index]; // 同時(shí)設(shè)置上背景顏色
}

function bindEvent() {
    main.addEventListener('click', function (event) { // 給main添加點(diǎn)擊事件
        if (flag) {  // 根據(jù)flag值判斷是否可以點(diǎn)擊
            var tar = event.target;  // 獲得到點(diǎn)擊的源事件
            if (tar.className == 'i') { // 判斷點(diǎn)擊的塊是否為有顏色的 
                tar.style.backgroundColor = '#bbb'; // 改變背景顏色 
                tar.classList.remove('i'); // 移除class類名               
                num++;   // 計(jì)數(shù)++
            } else {                
                alert('游戲結(jié)束，得分：' + num); // 如果點(diǎn)到了白色的塊   游戲結(jié)束
                clearInterval(timer);
                flag = false;
            }            
            if (num % 10 == 0) { // 如果當(dāng)前分?jǐn)?shù)為10的倍數(shù)   速度++
                speed++;
            }
        }
    })
}

function move() {
    clearInterval(timer); 
    timer = setInterval(function () { // 設(shè)置定時(shí)器
        var step = parseInt(main.offsetTop) + speed; // 利用top值移動(dòng)main區(qū)域
        main.style.top = step + 'px';
        if (parseInt(main.offsetTop) >= 0) { // 如果main區(qū)域移動(dòng)到可視區(qū)域 創(chuàng)建一行新的元素
            cDiv();
            main.style.top = '-150px'; // 同時(shí)將main區(qū)域移動(dòng)到可視區(qū)域上方
        }
        var len = main.childNodes.length; // 獲得mian區(qū)域內(nèi)的行數(shù)
        if (len == 6) {  // 如果main區(qū)域內(nèi)行數(shù)為6   即顯示區(qū)域四行  上面新生成一行  下面一行
            
            for (var i = 0; i < 4; i++) { // 遍歷最后一行的每一個(gè)div
                
                if (main.childNodes[len - 1].children[i].classList.contains('i')) { // 如果其中有一個(gè)包含沒有被點(diǎn)擊的   游戲結(jié)束
                    alert('游戲結(jié)束，得分：' + num);
                    clearInterval(timer);
                    flag = false; // 游戲結(jié)束后不可以繼續(xù)點(diǎn)擊
                }
            }
            
            main.removeChild(main.childNodes[len - 1]); // 將展示過后的每一行移除
        }
    }, 20)
    bindEvent(); // 點(diǎn)擊事件
}

// 開始按鈕點(diǎn)擊   開始移動(dòng) 創(chuàng)建每一行元素
function clickStart() {
    go.addEventListener('click', function () {
        go.style.display = 'none';
        move();
    });
}
clickStart();