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

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

一、猎艳之旅

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

文章图片

1.1 初始化

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

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

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

文章图片

1.2 核心内容理解

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

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

文章图片

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

初始化

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

文章图片

(1) 从外观上看，其初始化的内容就是一个4*4的网格，其通过标签即可实现；
(2)从数据层面看，其背后存储的就是一个4行4列的二维数组，没值得位置就填空；
(3)初始时会随意挑选两个位置填充上其初始值2（此处是后期我们要动刀的一个位置，记住记住）

方向判断

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

// 触摸刚开始的时候将会去获取手指触摸的位置坐标 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); }

内容更新合并

当判断完方向之后就到了根据方向进行对应内容的更新合并，并产生一个新的随机值进行填充，如下所示：

文章图片

如上图所示，左图是原始图，右图是向左滑动之后的结果，可以看到滑动之后其结果是将最后一行的内容进行了移动和内容求和，并在空闲区域产生了最小值，基于这个思路，是否可以将合并思路拆解为以下步骤：

(1) 根据方向将二维数组划分为对应方向的一维数组，例如向左移动则每一行就是一个一维数组，数组头是左侧；向上滑动每一列就是一维数组，数组头部就是上侧；
(2)将每个一维数组中内容进行移动——合并——移动，即先将所有有值得内容移动到头部，相邻相等的值相加至前一个，最后再将其合并后内容移动至头部；（程序中的思路拆解的很清楚，感觉做的很棒，点个赞）
(3)所有内容全部更新完毕之后，将选择一个空闲区域产生一个新值进行填充，最终渲染页面进行内容更新。
二、修改之旅