乐趣区

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

jiezi

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

一、猎艳之旅

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

1.1 初始化

偶遇这位美女，第一步必定是将美女拉过来，而后认真观赏一下是否合乎本人的需要。

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

美女拉过来了，接下来要怎么解决呢？必定先要观赏一波美女喽，上面就有咱们帅气的“微信开发者工具”关上一下，看看这个美女到底长啥样，符不合乎咱们的需要。

1.2 核心内容了解

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

通过观察其目录构造，很快就可能定位到须要要害的核心内容在 /page/2038 这个目录上面，这个外面的外围代码就不跟读者一行一行读了，就间接抛出其外围思路吧，毕竟思路捋分明了，前面就是编码的问题，具体思路能够分为以下三步：

  1. 初始化

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

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

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

(3)初始时会随便筛选两个地位填充上其初始值 2（此处是前期咱们要动刀的一个地位，记住记住）

  1. 方向判断

初始化之后就须要进行对应的操作了，不能初始化之后咱们啥也不做吧！通过监听对应用户的操作而后进行对应的解决，为了监听用户的操作，须要绑定用户触摸的一系列事件（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);
}
  1. 内容更新合并

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

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

(1) 依据方向将二维数组划分为对应方向的一维数组，例如向左挪动则每一行就是一个一维数组，数组头是左侧；向上滑动每一列就是一维数组，数组头部就是上侧；

(2)将每个一维数组中内容进行挪动——合并——挪动，即先将所有有值得内容挪动到头部，相邻相等的值相加至前一个，最初再将其合并后内容挪动至头部；（程序中的思路拆解的很分明，感觉做的很棒，点个赞）

(3)所有内容全副更新结束之后，将抉择一个闲暇区域产生一个新值进行填充，最终渲染页面进行内容更新。

二、批改之旅

上述曾经将该根底 2048 的所有核心内容介绍完了，那么咱们找到这位美女不魔改一下是不是说不过去呀，话不多说，先亮出要批改的地位吧！！

  1. 起始值肯定是 2 吗? 为什么不能是 3、4、5、6 等任意值呢？
  2. 肯定要是求和的模式吗？为什么不能从 2048 顺次递加呢？

2.1 模式一

第一种模式就改一下可能反对任意初始值

  1. 既然反对任意值，则必须有一个地位进行输出，此时咱们在页面中增加一个 input 标签用于输出其值；

  1. 有了输出则就要找到对应批改的地位，通过一步步定位，最终找到了其最终批改的地位，而后将该值复制给对应的地位即可。

  1. 让咱们看看最终的成果

2.2 模式二

第二种模式就是除了减少咱们是不是能够抉择一直缩小的策略呢？上面来看看此种模式实现须要对代码进行如何批改，其实这个模式仅仅只须要在模式一的根底上做很小的改变即可。

  1. 改变点

  1. 最终成果

除了上述我想到的两种新玩法，你们还有什么新的玩法呢？分享进去让咱们一起嗨皮一波。

三、总结

本次做的事件很简略，就是在大佬原有根底上读懂其代码，而后对其进行相应批改，产生新的模式。通过本次的分享次要学习了以下几点：

  1. 多利用“同性交友网站”，利用其内容能够事倍功半；
  2. 多学习别的的剖析问题的思路，如何将简单的问题拆解为简略的问题并进行解决；
  3. 多看他人的代码，一方面学习其代码书写模式；另一方面学习其如何进行内容的形象（例如其在进行合并形象局部）；

1. 如果感觉这篇文章还不错，来个分享、点赞吧，让更多的人也看到

2. 欢送关注公众号 前端点线面, 开启前端救赎之路。

退出移动版