微信小程序2048开发记录
前言距离微信小程序的兴起已经过去一段较长时间了，之前一直想尝试着写一个小demo玩玩，但是由于学校的各种事情以及准备面试的事情一直耽误。趁着公司放年假这段时间完成了对2048的 ...
前言
距离微信小程序的兴起已经过去一段较长时间了，之前一直想尝试着写一个小demo玩玩，但是由于学校的各种事情以及准备面试的事情一直耽误。趁着公司放年假这段时间完成了对2048的复写，主体功能已经基本实现，还有一些细节地方待优化。
对于微信小程序的介绍
1 微信小程序结构分析
每个页面的基本构成依然是html、css、js，但是格式后缀上有些许变换，html与js不变，但是css=>wxss。同时每个项目都有三个关键的文件， app.js、app.json、app.wxss。
以下是官方对于这三个文件的介绍
app.js是小程序的脚本代码。我们可以在这个文件中监听并处理小程序的生命周期函数、声明全局变量，调用框架提供的丰富的 API。
app.wxss 是整个小程序的公共样式表。我们可以在页面组件的 class 属性上直接使用 app.wxss 中声明的样式规则。
app.json 是对整个小程序的全局配置。我们可以在这个文件中配置小程序是由哪些页面组成，配置小程序的窗口背景色，配置导航条样式，配置默认标题。注意该文件不可添加任何注释。
更多信息请阅读官方文档
同时微信小程序采用数据绑定的方式，刷新视图中的数据使用.setData即可。
2 丰富的组件与API
微信小程序开发中，官方提供了很多组件与API，足够应用大多数场景下的开发，比如手机应用中最常见的触点坐标的获取，bindtouchstart、bindtouchend、bindtouchmove等。
2048开发
1 项目介绍
项目成果图
运行图
2 开发过程
2048作为一个非常简单的小程序，首先是利用长度为4X4=16的item一维数组来储存积分块的积分，若对应位置不存在积分则置’’。
核心主要是对积分块处理的算法，这里我使用的算法比较粗陋，一共是对四种手势的处理，这里以向上的手势作为例子讲解。
我处理方法是先将所有积分块朝上移动，在列上将所有方块紧密挨在一起，这一步成为整理积分块的位置。
然后再对等值相邻积分块进行合并，将合并后出现的空缺位进行置空。
再对所有积分块进行整理。
比如上图中，向上滑动后，先是对积分块进行整理，得到如下图
第一次整理积分块
然后积分块合并，合并后出现的置空位如图。
积分块合并
再次进行积分块整理就得到了最终的结果。
最终结果
3 算法讲解
向上手势对积分块处理的代码
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
|
function up() {
//整理积分块位置
for (let i = 4; i < item.length; i++)
if (item[i] != '')
for (let j = i - 4; j >= 0; j -= 4)
item[j] == '' ? (item[j] = item[j + 4]) && (item[j + 4] = '') : -1
//合并积分块
for (let i = 0; i < 4; i++)
for (let j = 0; j < 4; j++) {
if (item[i + j * 4] == '' || item[i + (j + 1) * 4] == '')
break;
if (item[i + j * 4] == item[i + (j + 1) * 4]) {
item[i + j * 4] += item[i + (j + 1) * 4]
item[i + (j + 1) * 4] = ''
j++
}
}
//再次整理积分块位置
for (let i = 4; i < item.length; i++)
if (item[i] != '')
for (let j = i - 4; j >= 0; j -= 4)
item[j] == '' ? (item[j] = item[j + 4]) && (item[j + 4] = '') : -1
}
|
算法的整理思路就是对积分块进行遍历，如果出现不为空的积分块i，那么对i-4(因此遍历是从i=4，即第二行开始)，即积分块的上方的积分块进行冒泡，判定上方积分块是否为空，若为空，交换积分块，继续向上冒泡，直到冒泡到第一行。然后继续寻找下一个不为空的积分块，一直到遍历完整个数组。
合并积分块方面，大概思路和整理积分块位置差不多，只不过不是判定积分块是否为空，而是判定相邻积分块是否值相等。
4 关于算法优化
- 不为空积分块的位置可以用一个数组来存储，避免每次进行整个数组的遍历
- 整理积分块位置和合并积分块同时进行，减少一次整理积分块的消耗的时间
项目地址
github：https://github.com/ShanaMaid/wx-2048
项目下载：wx-2048-master.zip
欢迎各位看官star!
