我們先看到的未開始的頁面黑色和白色方塊是隨機生成的，完了這么多把沒有發現時固定不變的。點擊一次方塊，程序需要判斷是黑色還是白色的。如果是黑色的，當然程序也是實現了一次自減，在動畫中是實現一次下移的，下移的時候點擊的方塊到黃顏色的區域會變成灰色。
【GIF】點我查看
這個別踩白塊主要是應用JS對DOM和數組的操作。
思路：
如圖：將游戲區域的CSS設置為相對定位、溢出隱藏;兩塊“游戲板”上分別排布著24塊方格，黑色每行隨機產生一個，“游戲板”向下滾動并交替顯示，將每個操作板的黑塊位置存入數組，每次點擊時將數組pop出來進行比對（我覺得亮點在這……）。
這里是游戲的GitHub地址，大家可以到里點擊中部菜單最右邊的的Download ZIP按鈕下載到桌面一試，HTML和JS，無需服務器。
怎樣獲取案例源碼？
當然，在這里不得不得強勢來一波GG了，獲取此案例的小伙伴們，可以直接來前端群：621071874，歡迎小白進來一起學習，共同進步，當然我也會找一些比較經典的案例，符合現在企業的面試需求以及適合小白學習的基礎視屏以及學習素材都會相應的在群里共享。（包括此案例，僅限于小白哦，大牛我想這個對你已經很簡單了吧）
以下是具體實現，關鍵部分有注釋
HTML部分:
HTML
CSS部分：
CSS
JS部分：
這里分函數介紹：
全局變量初始化
JS
//用閉包函數使每次創建的游戲板的ID為boarda與boardb，其實用一個全局變量也行，不過為了有點逼格。。。
每次點擊判定結果的函數
JS
擴展:
增加頁面UI：因為一開始的HTML特別簡單，所以UI也很好修改，設置按鈕，點擊觸發開始函數。
改變游戲難度：修改setInterval的值，也可以對judge函數內的間隔數目進行修改，或將下落加速的表達式優化一下。
增加比分排行等：用ajax連接服務器，在游戲結束后將結果寫入數據庫，并引用數據中的排行榜。
改為街機模式：去除定時，修改judge函數，使其每次點擊游戲板下落一個小方格的高度。設置總數，開始計時，結束計時。
如果想了解更多關于前端經典案例的小伙伴們記得關注我哦。
