jQuery-别踩白块

jQuery-别踩白块

随着jQuery学习的不断加深，其他的小案例做起来更得心应手了。无意中想起了一款曾经玩过的游戏，叫别踩白块，规则很简单就是不能点击白块而且不能漏点黑块否则就游戏结束了。我去实现了一下这个游戏，还是有些难度的，先看一下效果图。

一、html页面

 <div class="box">
        <div class="start">开始游戏</div>
        <div class="main"></div>
    </div>
    <div class="gameStatus">游戏结束</div>

二、css布局
写完了html就到了css下面是源代码

       *{
            margin: 0;
            padding: 0;
        }
        body,html{
            width: 100%;
            height: 100%;
            background-color: gray;
        }
        .box{
            width: 400px;
            height: 600px;
            background-color: white;
            margin: 0 auto;
            position: relative;
            overflow: hidden;
        }
        .start{
            width: 400px;
            height: 70px;
            position: absolute;
            top: 0;
            left: 0;
            background: white;
            font-size: 50px;
            font-weight: bolder;
            text-align: center;
            line-height: 70px;
            z-index: 99;
            border-bottom: 1px solid;
            cursor: pointer;
        }
        .gameStatus{
            width: 400px;
            height: 50px;
            margin: 0 auto;
            background: white;
            border-top: 1px solid;
            font-size: 35px;
            text-align: center;
            font-weight: bolder;
        }
        .main{
            width: 400px;
            height: 600px;
            position: relative;
        }
        .row{
            width: 400px;
            height: 150px;
        }
        .col{
            width: 99px;
            height: 150px;
            border: 1px solid;
            border-top: 0;
            border-right: 0;
            float: left;
        }

三、jquery实现
游戏最核心的就是jQuery的实现了，有下面几项主要功能：
1.游戏的初始化
2.如何动态插入一行div和删除一行div
3.游戏过程中点击百块和黑快的事件委托
4.如何判定游戏结束
下面是源代码：

window.onload = function () {
            var start = document.getElementsByClassName("start")[0];
            var main = document.getElementsByClassName("main")[0];
            var gameStatus = document.getElementsByClassName("gameStatus")[0];
            var timer =null;
            start.onclick = function () {
                if(main.children.length){
                    main.innerHTML="";
                }
                start.style.display = "none";
                gameStatus.innerHTML = "游戏开始";
                cDiv();
                main.style.top = "-150px";
                timer = setInterval(function () {
                    if(main.offsetTop===0){
                        main.style.top = "-150px";
                        cDiv();
                    }
                    main.style.top = main.offsetTop + 5 + "px";
                   if(main.children.length===6){
                        for(var i = 0;i<4;i++){
                            if(main.children[main.children.length-1].children[i].key==="i"){
                                clearInterval(timer);
                                start.innerHTML="重新开始";
                                start.style.display="block";
                                gameStatus.innerHTML="游戏结束";
                            }
                        }
                        main.removeChild(main.children[main.children.length-1]);
                   }

                },30)
            };
            function cDiv() {
              var rowDiv = document.createElement("div");
              rowDiv.className = "row";
              var index = parseInt(Math.random()*4);
                // console.log(index);
                for(var i = 0;i<4;i++){
                  var colDiv = document.createElement("div");
                  colDiv.className = "col";
                  if(i ===index){
                      colDiv.style.backgroundColor="black";
                      colDiv.key="i";
                  }
                  colDiv.onclick=function(){
                      if(this.key==="i"){
                          this.style.backgroundColor="white";
                          this.key="";
                      }else{
                          clearInterval(timer);
                          start.innerHTML="重新开始";
                          start.style.display="block";
                          gameStatus.innerHTML="游戏结束";
                      }
                  };
                  rowDiv.appendChild(colDiv);
              }
                if(main.children.length===0){
                    main.appendChild(rowDiv);
                }else{
                    main.insertBefore(rowDiv,main.children[0]);
                }

            }
        }

写完这些这个游戏基本上实现了，游戏没那么复杂但是完全没有Bug也不简单，有兴趣的可以去写一写，完善一下CSS页面和功能。