微信小程序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一维数组来储存积分块的积分,若对应位置不存在积分则置’’。
核心主要是对积分块处理的算法,这里我使用的算法比较粗陋,一共是对四种手势的处理,这里以向上的手势作为例子讲解。
如下图所示,手势向上的时候,我们的目标是将所有积分块朝上移动,移动在图中黑线处,然后对列上相邻的等值积分块进行合并。
1.png
我处理方法是先将所有积分块朝上移动,在列上将所有方块紧密挨在一起,这一步成为整理积分块的位置。
然后再对等值相邻积分块进行合并,将合并后出现的空缺位进行置空。
再对所有积分块进行整理。
比如上图中,向上滑动后,先是对积分块进行整理,得到如下图
第一次整理积分块
然后积分块合并,合并后出现的置空位如图。
积分块合并
再次进行积分块整理就得到了最终的结果。
最终结果

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 wx-2048
欢迎各位看官star!