具體幹了件什麼事情
要實現如圖所示的小遊戲。
規則是有16個格仔,初始時會有兩個格仔上安放了兩個數字,每次可以選擇上下左右其中乙個方向去滑動,每滑動一次,所有的數字方塊都會往滑動的方向靠攏外,系統也會在空白的地方隨即出現乙個數字方塊,相同數字的方塊在靠攏,相撞時會相加。不斷的疊加最終拼湊出8192這個數字就算成功。如果沒有了空白的地方,也沒有了相同的數字可以靠攏,相撞就遊戲失敗。
技術難點。
2.1如圖的展示,需要做到有滑動效果,相消的效果,
2.2移動原理,還有判斷陣列相消,遊戲結束,遊戲勝利
怎麼破解技術難點
3.1滑動效果可是使用css的樣式transform: translate(x,y);這個樣式具有移動效果,我們可以把所以的數字塊都定位到數字盤的最左上角,為了方便,我們把這個點稱之為座標原點(0,0),那麼圖中數字塊64所在的座標就為(3,3),由於我們使用的數字盤,和數字塊都是矩形規則的,這裡我先用的是寫死的寬高從(0,0)–>(3,3)體現到樣式上的距離就是(3*120px,3*120px)
,我定位這個數字塊用的是transform: translate(3*120px,3*120px)
;由於我使用的是vue所以就更方便了,我只要準備好資料,這些重複性的工作就交個vue了,我使用了乙個陣列來裝這個16個數字塊,使用標籤來包裹每乙個數字塊,通過遍歷陣列來完成定位**如下。
3.2數字相消的效果可以使用es6的animate函式,我們其實只是做了個數字塊在兩毫秒內放大1.3倍然後又縮小回原始尺寸,這樣給使用者的感覺就是進行了合併,**如下圖所示。
3.3數字塊移動,我們給數字塊設定了如下資料結構,其實數字塊的位置就是x,y的值,數字塊的移動就相當於改變其x,y的值,我就拿乙個方向作為例子,其他方向類似,我們按下上箭頭,那麼處理邏輯是先從y=0這排開始,也就是y=1這排有能夠和y=0這排合併的合併,能下移的下移,然後是y=2,y=3,可是我們在新增數字塊的時候x,y值是隨機乙個不存在的數字塊座標,這也就意味著數字中的不是有序的,我們需要首先根據y來進行排序,用排完序的和y-1排的進行比較處理,也就是說為了避免陣列越界,我們排序的時候要去掉y=0這一層的,當檢測到y-1為空時我們讓當前數字塊前進一步,並且繼續和下一排做比較,如果檢測到y-1不為空時,就看看他們的數值是否相同,相同則讓下一排成2,本身數字塊消失(這裡面有個小坑,有的數字塊可能面臨兩次操作,所以我額外記錄了乙個屬性,用來判斷當前數字塊是否已經被處理過),涉及到的**邏輯如下。
3.4判斷遊戲是否成功,這個比較好實現,在每次移動的時候都去判斷一次是不是有數字塊的值達到了8192。
3.5判讀遊戲是否失敗,這個也是迴圈整個陣列,首先判讀陣列是不是已經有16塊了,其次判讀還存不存在相鄰的兩個數字塊的數字相同,如果滿足16塊且沒有相同數字塊相鄰則判斷遊戲失敗,關鍵**如下。
下篇部落格需要完善的事項有
4.1遊戲數字塊的移動採用矩陣方式
4.2背景**的新增
4.3遊戲演算法的優化
專案原始碼
2048小遊戲編寫思路
有點難 關鍵知識點 下面請各位讀者先學習一下該遊戲中涉及到的幾個關鍵知識點,有了這些必備條件,我們才好講解 2048 遊戲的設計思路。1 改變文字顏色 2048小遊戲的整體的設計思路是 遊戲介面初始化,共有 4 行 4 列,總計 16 個位置,遊戲開始時,在任意的兩個位置上,隨機產生數字 2 或 4...
js實現2048小遊戲
頁面class hidden id end id endspan id table colspan 4 id s1 id s2 id s3 id s4 id s5 id s6 id s7 id s8 id s9 id s10 id s11 id s12 id s13 id s14 id s15 id...
小專案 2048小遊戲
很久之前,在學完c語言的時候,老師留下了乙個作業,問大家有沒有玩過2048,讓自己做乙個2048的小專案,然後就各種查閱資料,自己做了乙個小小的2048小遊戲,用w s a d實現上下左右的移動,下面是 實現部分。實現 include include include includeint code ...