从全球最大同性交友网站抄了一份不一样的2048小游戏

今天突发感想想实现一个不一样的2048小游戏，此时我就会直接开干吗？这是不存在的，首先我想到了“全球最大同性交友网站”，上面那么多现成的常规2048小游戏，直接拷贝下来一份，读懂精髓然后在此基础上进行修改岂不更能达到”事半功倍“的效果，说干就干，下面开启了我的猎艳修改之旅。

一、猎艳之旅

登录“交友网站”后，开启了关键词搜索，通过搜索“2048小程序”，发现了一批优秀的代码，一位倩倩美女映入了我的眼帘，这位美女的网址是：github.com/windlany/we…

1.1 初始化

偶遇这位美女，第一步肯定是将美女拉过来，然后仔细欣赏一下是否符合自己的需求。

git clone https://github.com/windlany/wechat-weapp-2048.git

美女拉过来了，接下来要怎么处理呢？肯定先要欣赏一波美女喽，下面就有我们帅气的“微信开发者工具”打开一下，看看这个美女到底长啥样，符不符合我们的需求。

1.2 核心内容理解

run起之后，发现其形象气质完全符合我们的需求，外表达标了，是时候了解一波内涵了，正所谓“外行看热闹，内行看门道”，下面就以内行的眼光看一看是否符合我们的需求。

通过观察其目录结构，很快就能够定位到需要关键的核心内容在/page/2038这个目录下面，这个里面的核心代码就不跟读者一行一行读了，就直接抛出其核心思路吧，毕竟思路捋清楚了，后面就是编码的问题，具体思路可以分为以下三步：

初始化

初始化阶段即完成对应网格中内容的初始化填充

(1) 从外观上看，其初始化的内容就是一个4*4的网格，其通过标签即可实现；

(2)从数据层面看，其背后存储的就是一个4行4列的二维数组，没值得位置就填空；

(3)初始时会随意挑选两个位置填充上其初始值2（此处是后期我们要动刀的一个位置，记住记住）

方向判断

初始化之后就需要进行对应的操作了，不能初始化之后咱们啥也不做吧！通过监听对应用户的操作然后进行对应的处理，为了监听用户的操作，需要绑定用户触摸的一系列事件（touchstart、touchmove、touchend），在这些事件触发之后获取对应的坐标位置，进而判断其移动方向，从而才有后续的内容更新环节。

<view bindtouchstart="touchStart" bindtouchmove="touchMove" bindtouchend="touchEnd"></view>

// 触摸刚开始的时候将会去获取手指触摸的位置坐标
touchStart: function(ev) {
    var touch = ev.touches[0];
    this.touchStartX = touch.clientX;
    this.touchStartY = touch.clientY;

},
// 当在移动过程中不断获取其手指坐标
touchMove: function(ev) {
    var touch = ev.touches[0];
    this.touchEndX = touch.clientX;
    this.touchEndY = touch.clientY;
},
// 通过对比前后的坐标值，确定其移动的方向（0:上, 1:右, 2:下, 3:左）
touchEnd: function() {
    var disX = this.touchStartX - this.touchEndX;
    var absdisX = Math.abs(disX);
    var disY = this.touchStartY - this.touchEndY;
    var absdisY = Math.abs(disY);
    
    var direction = absdisX > absdisY ? (disX < 0 ? 1 : 3) : (disY < 0 ? 2 : 0);
}