前言

距離微信小程序的興起已經(jīng)過(guò)去一段較長(zhǎng)時(shí)間了，之前一直想嘗試著寫一個(gè)小demo玩玩，但是由于學(xué)校的各種事情以及準(zhǔn)備面試的事情一直耽誤。趁著公司放年假這段時(shí)間完成了對(duì)2048的復(fù)寫，主體功能已經(jīng)基本實(shí)現(xiàn)，還有一些細(xì)節(jié)地方待優(yōu)化。

對(duì)于微信小程序的介紹

1 微信小程序結(jié)構(gòu)分析

每個(gè)頁(yè)面的基本構(gòu)成依然是html、css、js，但是格式后綴上有些許變換，html與js不變，但是css=>wxss。同時(shí)每個(gè)項(xiàng)目都有三個(gè)關(guān)鍵的文件， app.js、app.json、app.wxss。

以下是官方對(duì)于這三個(gè)文件的介紹

app.js是小程序的腳本代碼。我們可以在這個(gè)文件中監(jiān)聽并處理小程序的生命周期函數(shù)、聲明全局變量，調(diào)用框架提供的豐富的 API。

app.wxss 是整個(gè)小程序的公共樣式表。我們可以在頁(yè)面組件的 class 屬性上直接使用 app.wxss 中聲明的樣式規(guī)則。

app.json 是對(duì)整個(gè)小程序的全局配置。我們可以在這個(gè)文件中配置小程序是由哪些頁(yè)面組成，配置小程序的窗口背景色，配置導(dǎo)航條樣式，配置默認(rèn)標(biāo)題。注意該文件不可添加任何注釋。

更多信息請(qǐng)閱讀官方文檔

同時(shí)微信小程序采用數(shù)據(jù)綁定的方式，刷新視圖中的數(shù)據(jù)使用.setData即可。

2 豐富的組件與API

微信小程序開發(fā)中，官方提供了很多組件與API，足夠應(yīng)用大多數(shù)場(chǎng)景下的開發(fā)，比如手機(jī)應(yīng)用中最常見的觸點(diǎn)坐標(biāo)的獲取，bindtouchstart、bindtouchend、bindtouchmove等。

2048開發(fā)

1 項(xiàng)目介紹

項(xiàng)目成果圖

運(yùn)行圖

2 開發(fā)過(guò)程

2048作為一個(gè)非常簡(jiǎn)單的小程序，首先是利用長(zhǎng)度為4X4=16的item一維數(shù)組來(lái)儲(chǔ)存積分塊的積分，若對(duì)應(yīng)位置不存在積分則置’’。
核心主要是對(duì)積分塊處理的算法，這里我使用的算法比較粗陋，一共是對(duì)四種手勢(shì)的處理，這里以向上的手勢(shì)作為例子講解。

我處理方法是先將所有積分塊朝上移動(dòng)，在列上將所有方塊緊密挨在一起，這一步成為整理積分塊的位置。
然后再對(duì)等值相鄰積分塊進(jìn)行合并，將合并后出現(xiàn)的空缺位進(jìn)行置空。
再對(duì)所有積分塊進(jìn)行整理。
比如上圖中，向上滑動(dòng)后，先是對(duì)積分塊進(jìn)行整理，得到如下圖

第一次整理積分塊

積分塊合并

最終結(jié)果

3 算法講解

向上手勢(shì)對(duì)積分塊處理的代碼

算法的整理思路就是對(duì)積分塊進(jìn)行遍歷，如果出現(xiàn)不為空的積分塊i，那么對(duì)i-4(因此遍歷是從i=4，即第二行開始)，即積分塊的上方的積分塊進(jìn)行冒泡，判定上方積分塊是否為空，若為空，交換積分塊，繼續(xù)向上冒泡，直到冒泡到第一行。然后繼續(xù)尋找下一個(gè)不為空的積分塊，一直到遍歷完整個(gè)數(shù)組。

合并積分塊方面，大概思路和整理積分塊位置差不多，只不過(guò)不是判定積分塊是否為空，而是判定相鄰積分塊是否值相等。

4 關(guān)于算法優(yōu)化

• 不為空積分塊的位置可以用一個(gè)數(shù)組來(lái)存儲(chǔ)，避免每次進(jìn)行整個(gè)數(shù)組的遍歷
• 整理積分塊位置和合并積分塊同時(shí)進(jìn)行，減少一次整理積分塊的消耗的時(shí)間

項(xiàng)目地址

github：https://github.com/ShanaMaid/wx-2048

項(xiàng)目下載：wx-2048-master.zip

歡迎各位看官star!