我們先看到的未開始的頁面黑色和白色方塊是隨機(jī)生成的禁熏，完了這么多把沒有發(fā)現(xiàn)時(shí)固定不變的壤巷。點(diǎn)擊一次方塊，程序需要判斷是黑色還是白色的瞧毙。如果是黑色的胧华，當(dāng)然程序也是實(shí)現(xiàn)了一次自減，在動(dòng)畫中是實(shí)現(xiàn)一次下移的升筏，下移的時(shí)候點(diǎn)擊的方塊到黃顏色的區(qū)域會(huì)變成灰色撑柔。
【GIF】點(diǎn)我查看
這個(gè)別踩白塊主要是應(yīng)用JS對(duì)DOM和數(shù)組的操作。
思路：
如圖：將游戲區(qū)域的CSS設(shè)置為相對(duì)定位您访、溢出隱藏;兩塊“游戲板”上分別排布著24塊方格铅忿，黑色每行隨機(jī)產(chǎn)生一個(gè)，“游戲板”向下滾動(dòng)并交替顯示灵汪，將每個(gè)操作板的黑塊位置存入數(shù)組檀训，每次點(diǎn)擊時(shí)將數(shù)組pop出來進(jìn)行比對(duì)（我覺得亮點(diǎn)在這……）。
這里是游戲的GitHub地址享言，大家可以到里點(diǎn)擊中部菜單最右邊的的Download ZIP按鈕下載到桌面一試峻凫，HTML和JS，無需服務(wù)器览露。
怎樣獲取案例源碼荧琼？
當(dāng)然，在這里不得不得強(qiáng)勢(shì)來一波GG了差牛，獲取此案例的小伙伴們命锄，可以直接來前端群：621071874，歡迎小白進(jìn)來一起學(xué)習(xí)偏化，共同進(jìn)步脐恩，當(dāng)然我也會(huì)找一些比較經(jīng)典的案例，符合現(xiàn)在企業(yè)的面試需求以及適合小白學(xué)習(xí)的基礎(chǔ)視屏以及學(xué)習(xí)素材都會(huì)相應(yīng)的在群里共享侦讨。（包括此案例驶冒，僅限于小白哦苟翻，大牛我想這個(gè)對(duì)你已經(jīng)很簡(jiǎn)單了吧）
以下是具體實(shí)現(xiàn)，關(guān)鍵部分有注釋
HTML部分:
HTML
CSS部分：
CSS
JS部分：
這里分函數(shù)介紹：
全局變量初始化
JS
//用閉包函數(shù)使每次創(chuàng)建的游戲板的ID為boarda與boardb骗污，其實(shí)用一個(gè)全局變量也行崇猫，不過為了有點(diǎn)逼格。身堡。邓尤。
每次點(diǎn)擊判定結(jié)果的函數(shù)
JS
擴(kuò)展:
增加頁面UI：因?yàn)橐婚_始的HTML特別簡(jiǎn)單拍鲤，所以UI也很好修改贴谎，設(shè)置按鈕，點(diǎn)擊觸發(fā)開始函數(shù)季稳。
改變游戲難度：修改setInterval的值擅这，也可以對(duì)judge函數(shù)內(nèi)的間隔數(shù)目進(jìn)行修改，或?qū)⑾侣浼铀俚谋磉_(dá)式優(yōu)化一下景鼠。
增加比分排行等：用ajax連接服務(wù)器仲翎，在游戲結(jié)束后將結(jié)果寫入數(shù)據(jù)庫，并引用數(shù)據(jù)中的排行榜铛漓。
改為街機(jī)模式：去除定時(shí)溯香，修改judge函數(shù)，使其每次點(diǎn)擊游戲板下落一個(gè)小方格的高度浓恶。設(shè)置總數(shù)玫坛，開始計(jì)時(shí)，結(jié)束計(jì)時(shí)包晰。
如果想了解更多關(guān)于前端經(jīng)典案例的小伙伴們記得關(guān)注我哦湿镀。
