1.  <!DOCTYPE html>
    2.  <html lang="en">
    3.  <head>
    4.      <meta charset="UTF-8">
    5.      <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.      <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.      <title>Document</title>
    8.      <style>
    9.          #cont{
    10.              width: 400px;
    11.              height: 420px;
    12.              position: relative;
    13.              /* border: 1px solid red; */
    14.              overflow:  hidden;
    15.          }
    17.          #main{
    18.              position: relative;
    19.              top: -100px;
    20.          }
    22.          .row{
    23.               width: 400px;
    24.               height: 100px;
    25.          }
    27.          .row div{
    28.              width: 98px;
    29.              height: 98px;
    30.              border: 1px solid gray;
    31.          }
    33.          .black{
    34.              background: black;
    36.          }
    37.      </style>
    38.  </head>
    39.  <body>
    40.      <div id="cont">
    41.          <div id="main">
    42.          </div>
    43.      </div>
    44.      <hr>
    45.      <h3 id="f">0</h3>
    46.  </body>
    47.  <script>
    48.      var main =document.getElementById('main');
    49.      //div 工厂
    50.      function cdiv(className){
    51.          var div = document.createElement('div');
    52.          if(className){
    53.              div.setAttribute('class',className);
    54.          }
    55.          return div;
    56.      }
    58.      function crow(){
    59.         var row = cdiv('row');//;创建行 div
    60.         var index=Math.floor(Math.random()*4);
    61.         //创建小div
    62.         for(var i=0;i<4;i++){
    63.             if (i==index) {
    64.                 //创建黑块
    65.                 row.appendChild(cdiv('black'));
    66.             }else{
    67.                 //创建普通小块
    68.                 row.appendChild(cdiv());
    69.             }
    70.         }
    71.         if (main.firstChild) {
    72.             main.insertBefore(row,firstChild);
    73.         }else{
    74.             main.appendChild(row);
    75.         }
    77.      }
    78.      //初始化函数
    79.      function init(){
    80.          //循环调用crow创建游戏界面
    81.          for(var i= 0;i<4;i++){
    82.              crow();
    83.          }
    84.          var sta = true; 
    85.          var sp =2;
    86.          main.onclick=function (ev){
    87.              var dj =ev.target;
    88.              //如果点击白块,停止计时器
    89.              if(sta ==false){
    90.                 clearInterval(clock);  
    91.                 sta=false; 
    92.                 alert('洗洗睡吧');
    93.              }else if(dj.className==''){
    94.                  clearInterval(clock);
    95.                  sta= false;
    96.                  alert('洗洗睡吧');
    97.              }else{
    98.                 dj.className='';
    99.                 dj.parentNode.pass=true;
    100.                 //得分
    102.                 var f =  document.getElementById('f');
    103.                 var fs= parseInt(f.innerHTML)+1;
    104.                 f.innerHTML=fs;
    105.                 //根据分值实现加速
    106.                 if (fs%5==0) {
    107.                     sp+=2;
    108.                 }
    109.              }
    110.          }
    111.          //设置定时器，反复调用move函数
    112.          clock = setInterval('move()',50);
    113.      }
    115.      function move(){
    116.          var t=parseInt(getComputedStyle(main).top);
    117.          top +=sp;
    118.          main.style.top= top+'px';
    119.          if(top>=0){
    120.              crow();
    121.              main.style.top='-100px';
    122.              //判断用户没有点击停止运行
    123.              if(main.lastChild.pass== undefined){
    124.                 clearInterval(clock);  
    125.                 sta=false; 
    126.                 alert('洗洗睡吧');
    127.              }
    128.              if(main.children.length>5){
    129.                  main.removeChild(main.lastChild);
    130.              }
    131.          }
    132.      }
    134.      init();
    136.  </script>
    137.  </html>