258资源分享网

前言距离微信小程序的兴起已经过去一段较长时间了，之前一直想尝试着写一个小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

}