微信小程序实现简单的2048

　　这两天心血来潮，用微信小程序写了一个简单的2048，欢迎各位老铁围观，提出宝贵意见。这里我从0到1赘述一下我的实现流程：

　　首先去微信公平台（https://mp.weixin.qq.com/）注册一个小程序帐号，注意：一个身份证好像只能注册5个小程序.而后登录进入后台，进行相应的名称、头像等设置。个人以下：

　　而后在开发设置选项能够查看AppID和AppSecret，作好这些准备工做，就能够打开你的微信开发工具进行编程的奇幻之旅了。打开开发工具，注意最好选择一个空的目录，而后粘贴你的AppID，选择快速启动就能够了。恭喜你能够运行小程序看默认效果了。

　　接下来，清空index.wxml，粘贴上个人代码（能够在 https://github.com/WangHao1221/mimi2048.git 荡下来，最好送我一颗小星星，谢啦！），在这里说一下，我把app.js作了简单的修改，用来获取用户信息，你也能够在app.json文件修改为你想要的方式，而后是在app.wxss里面加了一个简单的默认样式（注意我在wxss里面加的注释!）。注意：在config.js文件中我加了一句设置："disableScroll": true,禁止页面滚动！

　　最后是index.wxss和index.js这两个文件了，核心逻辑在js，这里我简单分析个人思路：

　　1.首先是头部，获取头像昵称、而后是根据改昵称，设置最佳分数。

　　2.头部布局问题，本身能够随意设置，从新开始按钮先设置上。

　　3.也是最重要的，4*4的方格实现(wx:for)。

　　4.onLoad里面要作的事情：获取用户信息；初始化方格数字；在方格中产生两个随机位置并赋值(2/4)，这里必定要防止两次出现的位置相同或者该位置已经有数字！最后是初始化分数（this.setData（）方法，既能够修改变量值还能够更改model）。

　　5.手势，根据touch进行方向的判断（若是是点击，则不产生新的随机数）

　　　　这里是核心，多啰嗦一点：触摸开始的时候获取起始点，而后是在move的时候判断是向哪一个方向滑动，由于根据不一样的方向，入参不同，最后是end方法，我这里是把方格用0~15的下标进行标记，每个数字带表明方格的位置。好比你向左滑动，那也就是说右边3列数字要向左合并或者移动，好比下面代码：0、四、八、12即为最左侧方格。

    this.mergeMove(3, 2, 1, 0)
    this.mergeMove(7, 6, 5, 4)
    this.mergeMove(11, 10, 9, 8)
    this.mergeMove(15, 14, 13, 12)

其余方向，以此类推。mergeMove是我封装的处理移动或者合并的方法，由于不管哪一个方向，都会进行相同院里的操做。在mergeMove方法里面，要更新当前分数，判断当前游戏是否结束（方格满了，而且不能滑动了！），结束的时候，更新最佳成绩。最后附上游戏截图：

     

 

 

　　这里就介绍这么多了，固然这里面会有一些bug，欢迎老铁们给出意见，还有就是这里没有服务器，因此确定总欠缺一些东西，后续我会更新的。欢迎留言评论。