使用原生js做一個別踩白塊的小遊戲

學習了幾天原生js後,一直想要做點東西出來,最後從b站,知乎 ,github 上面找到了這個別踩白塊的項目,下面是一下體會和說明,源碼先放在超鏈接。GitHub鏈接別踩白塊鏈接

介紹一下別踩白塊的構建過程:
1、創建html文件:
在這裏插入圖片描述
頁面的主要組成部分:
遊戲最上面的cont部分,遊戲下面的計分count部分
cont部分由main和go兩個部分組成,其中main是主要的遊戲部分。
2、有了html 下面用css來進行頁面的排布:
在這裏插入圖片描述
這個並非完整的css,源碼部分將會在github中給出。

3、下面是最重要的js部分:
首先 抓取到dom元素,方便我們操作dom元素
在這裏插入圖片描述
接下來 寫一個創建div的方法:
在這裏插入圖片描述
3、將div移動起來:
在這裏插入圖片描述

最後 說一下整個代碼的運行過程:
1、先將整個html頁面渲染到瀏覽器中
2、js獲取到dom元素
3、點擊遊戲開始,開始運行move() 方法 ,運行對象爲main這個div,運行過程中不斷添加div即不斷調用CDiv() 方法加入到main這個div中去。
4、判斷遊戲是否結束的方法:1、如果存在非白塊沒有點擊,即main中的div超過六個就會失敗 2、如果點擊了白塊也會失敗

說明: 點擊後的非白塊會通過操作dom的方法將其清除
白塊有加速的功能,通過更改speed實現

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章