最近流行微信小游戏,我也心血来潮写了一个微信小程序版2048,本篇文章主要分享实现2048的算法以及注意的点,一起来学习吧!(源码地址见文章末尾)
 
算法
1、生成4*4棋盘视图
2、随机生成2或4填充两个单元格
3、记录用户touch时的起始位置和结束位置,以此判断滑动方向
4、根据滑动方向移动单元格,并进行相同值合并
5、用户一次滑动完成后重复执行步骤2
6、判断游戏是否结束,并根据游戏结果产生不同提示
难点
1、确定滑动方向
2、用户滑动时相同格子合并,并移到滑动方向一侧
实现
 
视图实现
1、用wxml+wxss生成棋盘视图
2、用wx:for将数据渲染到每个单元格
 
逻辑实现
1、页面加载完毕随机用数字2或4填充两个单元格
2、判断用户滑动方向
  • 使用touchStart事件函数获取起始位置touchStartX、touchStartY,touchMove获取终点位置touchEndX、touchEndY
 var disX = this.touchStartX - this.touchEndX;
var absdisX = Math.abs(disX);
var disY = this.touchStartY - this.touchEndY;
var absdisY = Math.abs(disY);
// 确定移动方向
// 0:上, 1:右, 2:下, 3:左
var direction = absdisX > absdisY ? (disX < 0 ? 1 : 3) : (disY < 0 ? 2 : 0);
3、根据滑动方向(假设向右滑动)移动表格以及相同项合并
  • 将2048的棋盘生成4*4的二维数组list,为空的空格用0表示
// 比如棋盘数据如下
var grid = [
[2, 2, 0, 0],
[0, 0, 0, 0],
[0, 8, 4, 0],
[0, 0, 0, 0]
];
  • 根据滑动方向生成4*4二维数组
var list = [
[0, 0, 2, 2], // 注意是0022不是2200,因为像右滑动所以从右边push入数组
[0, 0, 0, 0],
[0, 4, 8, 0],
[0, 0, 0, 0]
];
相应代码(代码中this.board.grid为上面的初始grid):
 formList(dir) {  // 根据传入的滑动方向生成list的四个数组
var list = [[], [], [], []];
for(var i = 0; i < this.size; i++)
for(var j = 0; j < this.size; j++) {
switch(dir) {
case 0:
list[i].push(this.board.grid[j][i]);
break;
case 1:
list[i].push(this.board.grid[i][this.size-1-j]);
break;
case 2:
list[i].push(this.board.grid[this.size-1-j][i]);
break;
case 3:
list[i].push(this.board.grid[i][j]);
break;
}
}
return list;
}
  • 将list的每一个小数组中的数字提到前面,0放到末尾
list2 = [
[2, 2, 0, 0],
[0, 0, 0, 0],
[4, 8, 0, 0],
[0, 0, 0, 0]
];
相应代码:
 changeItem(item) {  // 将 [0, 2, 0, 2] 改为 [2, 2, 0, 0]
var cnt = 0;
for(var i = 0; i < item.length; i++)
if(item[i] != 0)
item[cnt++] = item[i];
for(var j = cnt; j < item.length; j++)
item[j] = 0;
return item;
}
  • 将相同值的单元格加起来,并将后面的一个单元格值变为0
list2 = [
[4, 0, 0, 0],
[0, 0, 0, 0],
[4, 8, 0, 0],
[0, 0, 0, 0]
];
相应代码:
 combine(list) { // 滑动时相同的合并
for(var i = 0; i < list.length; i++) // 数字靠边
list[i] = this.changeItem(list[i]); for(var i = 0; i < this.size; i++) {
for(var j = 1; j < this.size; j++) {
if(list[i][j-1] == list[i][j] && list[i][j]!=0) {
list[i][j-1] += list[i][j];
list[i][j] = 0;
}
}
}
for (var i = 0; i < list.length; i++) // 再次数字靠边,避免0220变成0400的情况发生
list[i] = this.changeItem(list[i]); return list;
}
  • 将list2回退为list并渲染数据到棋盘视图
list = [
[0, 0, 0, 4],
[0, 0, 0, 0],
[0, 0, 8, 4],
[0, 0, 0, 0]
];
相应代码:
 move(dir) {
// 0:上, 1:右, 2:下, 3:左
var curList = this.formList(dir); var list = this.combine(curList);
var result = [[],[],[],[]]; for(var i = 0; i < this.size; i++)
for(var j = 0; j < this.size; j++) {
switch (dir) {
case 0:
result[i][j] = list[j][i];
break;
case 1:
result[i][j] = list[i][this.size-1-j];
break;
case 2:
result[i][j] = list[j][this.size-1-i];
break;
case 3:
result[i][j] = list[i][j];
break;
}
}
this.board.grid = result;
this.setDataRandom(); // 移动一次之后随机用2或4填充两个单元格 return result;
}
4、重复步骤1
5、判断游戏是否结束
  • 判断标准:4*4单元格填满且任意一个单元格上下左右没有相同值的单元格
 isOver() {  // 游戏是否结束,结束条件:可用格子为空且所有格子上下左右值不等
for (var i = 0; i < this.size; i++) // 左右不等
for (var j = 1; j < this.size; j++) {
if (this.board.grid[i][j] == this.board.grid[i][j - 1])
return false;
}
for (var j = 0; j < this.size; j++) // 上下不等
for (var i = 1; i < this.size; i++) {
if (this.board.grid[i][j] == this.board.grid[i - 1][j])
return false;
}
return true;
}
6、根据游戏结果给出相应提示
 
po一个源码地址:windlany/2048有兴趣的可以fork一下,求star~

微信小程序版2048的更多相关文章

  1. 微信小程序版博客——开发汇总总结(附源码)

    花了点时间陆陆续续,拼拼凑凑将我的小程序版博客搭建完了,这里做个简单的分享和总结. 整体效果 对于博客来说功能页面不是很多,且有些限制于后端服务(基于ghost博客提供的服务),相关样式可以参考截图或 ...

  2. 七天开发进度(七)(微信小程序版(二)记账本)

    终于把小程序版弄完了,不过这并不能称之为是我的作品,因为我还没有彻底学会小程序,对JavaScript语言还有很多不会的地方,没有掌握, 这次的程序是通过学习网上的多个教程,多个案例结合拼凑模仿者人家 ...

  3. 七天开发进度(六)(微信小程序版(一))

    1. 今天主要根据网上教程学习了微信小程序的代码结构,和代码编写-Tabbar配置, 学习了app.js的App和Page方法, 认识了view组件,button组件,input组件,但是还没怎么应用 ...

  4. 重装了服务器,用的是centos/php微信小程序版,centos 命令大全

    centos 命令大全 1.关机 (系统的关机.重启以及登出 ) 的命令 shutdown -h now 关闭系统(1) init 0 关闭系统(2) telinit 0 关闭系统(3) shutdo ...

  5. 微信小程序代码大全 - 小程序开发福利

    小程序QQ交流群:131894955 小程序开发文档(Wepy) 小程序商城源码下载(weixin-app-shop) 小程序官网源码下载(weixin-app-cms) 微信管家平台JAVA版开源下 ...

  6. 史上最全的微信小程序代码大全

    --------------------- 本文来自 fenxiangjun 的CSDN 博客 ,全文地址请点击:https://blog.csdn.net/fenxiangjun/article/d ...

  7. 微信小程序开发(5) 2048游戏

    在这篇微信小程序开发教程中,我们将介绍如何使用微信小程序开发2048小游戏. 本文主要分为两个部分,小程序主体部分及小游戏页面部分 一.小程序主体部分 一个小程序主体部分由三个文件组成,必须放在项目的 ...

  8. 微信小程序(应用号)资源汇总整理

    微信小应用资源汇总整理 开源项目 WeApp - 微信小程序版的微信 wechat-weapp-redux-todos - 微信小程序集成Redux实现的Todo list wechat-weapp- ...

  9. 微信小程序实例源码大全

    微信小程序实例源码大全下载 微信小应用示例代码(phodal/weapp-quick)源码链接:https://github.com/phodal/weapp-quick 微信小应用地图定位demo( ...

随机推荐

  1. Python day 7(1) 模块

    一:模块 1 在Python中,一个.py文件就称之为一个模块(Module) 2 Python的好处,优点: a  提高了代码的可维护性 b  当一个模块编写完毕,就可以被其他地方引用.我们在编写程 ...

  2. Struts简介、原理及简单实现

    struts简介 Struts是Apache软件基金会(ASF)赞助的一个开源项目.它最初是jakarta项目中的一个子项目,并在2004年3月成为ASF的顶级项目.它通过采用JavaServlet/ ...

  3. 使用git工具将项目上传到github

    注册github账号 https://github.com/ 安装git工具: https://git-for-windows.github.io/ 上面的准备工作完成后,现在开始操作. 一.进入gi ...

  4. and,or

    where语句的and or 连接 $map['_logic'] = 'and'; $map['_logic'] = 'or';

  5. ES6 Generators的异步应用

    ES6 Generators系列: ES6 Generators基本概念 深入研究ES6 Generators ES6 Generators的异步应用 ES6 Generators并发 通过前面两篇文 ...

  6. python常用模块详解

    python常用模块详解 什么是模块? 常见的场景:一个模块就是一个包含了python定义和声明的文件,文件名就是模块名字加上.py的后缀. 但其实import加载的模块分为四个通用类别: 1 使用p ...

  7. Java学习笔记21(String类补充:正则表达式)

    正如python的re模块,不过Java和Python的正则表达式有一些区别,这里做简单介绍,具体的细节可以参考网上其他的文章: 功能:可以用于检验一个字符串,比如验证用户名,验证密码格式,验证是否是 ...

  8. git常用使用命令

    Git远程操作详解(from 阮一峰) git clone.git remote.git fetch.git pull.git push git拉取远程分支并创建本地分支 git中文学习文档(详细) ...

  9. Python模块学习---Web

    import urlparse url = urlparse.urlparse("http://www.python.org/doc/FAQ.html") print url pr ...

  10. 文件及Linux目录结构

    什么是文件 在linux系统上,所有的资源都是文件,Linux系统下的文件类型包括 普通文件(-) 目录(d) 符号链接(l) 字符设备文件(c) 块设备文件(b) 套接字(s) 命令管道(p) 普通 ...