写在前面
前些天闲聊中跟家里的领导说, 微信也可以做小游戏诶然后她说, 那你做个连连看游戏给我玩玩呗再然后就有了这几天的摸索和下面的一些小结:
演示效果: http://link.muroqiu.com
源码地址: https://gitee.com/muroqiu/LinkUp
开发工具:
- Cocos Creator v1.8.1
- Visual Studio Code 1.20.1
- Adob illustrator CC 2018
微信开发者工具 1.02.1802270
主要的工作是在 Cocos Creator 和 Visual Studio Code 里完成的, illustrator CC 用来资源切图, 微信开发者工具是最后打包微信小游戏用到; Cocos Creator 对微信小游戏的支持已经很到位了, 游戏写好后只要在构建时选择发布平台为 Wechat Game 就好
目前微信还未开放小游戏注册与上架, 只能用开发者的微信测试体验好在 Cocos Creator 跨平台发布很方便, 构建了个 web Mobile 版本, 发布到服务器上, 大家有兴趣就一起可以体验咯 ^_^
主要的逻辑:
A 洗牌 shuffle: 遍历图片数组, 取 1 个随机位置的图片和当前位置交换;
B 用一个二维数组 (各个方向均比图片数组大 1) 保存图片的状态值, 搜索路径时映射到这个数组搜索;
C 搜索顺序:
1 同一条直线: 判断直线间有无图片;
2 有一个拐角: 先定位出两个拐角点, 若拐角点没有图片, 再转换成一条直线的情况继续处理;
3 两个拐角: 某个方向移动, 若到达点没有图片, 再转换成一个拐角的情况继续处理; 若到达点有图片, 此方向不再继续搜索;
- /**
- * 直连
- */
- matchBlockLine: function(x1, y1, x2, y2) {
- // cc.warn('matchBlock' + x1 + ',' + y1 + ':' + x2 + ',' + y2); if (x1 != x2 && y1 != y2) {
- return false;
- }
- if (x1 == x2) {
- // 同一列 if (x1 < 0 || x1 >= this.rows) {
- return true;
- }
- var Ymin = Math.min(y1, y2) + 1;
- var Ymax = Math.max(y1, y2);
- for (Ymin; Ymin < Ymax; Ymin++) {
- if (this._canvasGrids[x1 + 1][Ymin + 1] > this._TYPE_INIT) {
- return false;
- }
- }
- } else if (y1 == y2) {
- // 同一行 if (y1 < 0 || y1 >= this.columns) {
- return true;
- }
- var Xmin = Math.min(x1, x2) + 1;
- var Xmax = Math.max(x1, x2);
- for (Xmin; Xmin < Xmax; Xmin++) {
- if (this._canvasGrids[Xmin + 1][y1 + 1] > this._TYPE_INIT) {
- return false;
- }
- }
- }
- return true;
- },
- /**
- * 一个转角
- * 搜索到路径时, 返回转角坐标 x3, y3
- */
- matchBlockCorner: function(x1, y1, x2, y2, isAxis_X) {
- // cc.warn('matchBlockCorner' + x1 + ',' + y1 + ':' + x2 + ',' + y2); var result;
- // 直连的返回 if (x1 == x2 || y1 == y2) {
- return null;
- }
- // 转角点 1 (x1, y2),Y 方向 if (this._canvasGrids[x1 + 1][y2 + 1] <= this._TYPE_INIT && isAxis_X != false) {
- result = this.matchBlockCorner_point(x1, y1, x2, y2, x1, y2);
- if (result) {
- return result;
- }
- }
- // 转角点 2 (x2, y1),X 方向 if (this._canvasGrids[x2 + 1][y1 + 1] <= this._TYPE_INIT && isAxis_X != true) {
- result = this.matchBlockCorner_point(x1, y1, x2, y2, x2, y1);
- if (result) {
- return result;
- }
- }
- return null;
- },
- /**
- * 转角逻辑
- */
- matchBlockCorner_point: function(x1, y1, x2, y2, x3, y3) {
- var stMatch = this.matchBlockLine(x1, y1, x3, y3);
- if (stMatch) {
- var tdMatch = this.matchBlockLine(x3, y3, x2, y2);
- if (tdMatch) {
- return [x3, y3];
- }
- }
- return null;
- },
- /**
- * 两个转角
- * 由中心往外展开搜索路径, 某个方向当碰到有图片时, 这个方向就不再继续搜索
- * 搜索到路径时, 返回两个转角点坐标 x3, y3, x4, y4
- */
- matchBlockUnfold: function(x1, y1, x2, y2) {
- var result;
- var x3 = 0;
- var y3 = 0;
- var canUp = true;
- var canDown = true;
- var canLeft = true;
- var canRight = true;
- // cc.warn('matchBlockUnfold' + x1 + ',' + y1 + ':' + x2 + ',' + y2); for (var i = 1; i < this.rows; i++) {
- // 上
- x3 = x1;
- y3 = y1 + i;
- if (canUp && y3 <= this.columns) {
- canUp = this._canvasGrids[x3 + 1][y3 + 1] <= this._TYPE_INIT;
- result = this.matchBlockUnfold_axis(x1, y1, x2, y2, x3, y3, false);
- if (result) {
- return result;
- }
- }
- // 下
- x3 = x1;
- y3 = y1 - i;
- if (canDown && y3 >= -1) {
- canDown = this._canvasGrids[x3 + 1][y3 + 1] <= this._TYPE_INIT;
- result = this.matchBlockUnfold_axis(x1, y1, x2, y2, x3, y3, false);
- if (result) {
- return result;
- }
- }
- // 左
- x3 = x1 - i;
- y3 = y1;
- if (canLeft && x3 >= -1) {
- canLeft = this._canvasGrids[x3 + 1][y3 + 1] <= this._TYPE_INIT;
- result = this.matchBlockUnfold_axis(x1, y1, x2, y2, x3, y3, true);
- if (result) {
- return result;
- }
- }
- // 右
- x3 = x1 + i;
- y3 = y1;
- if (canRight && x3 <= this.rows) {
- canRight = this._canvasGrids[x3 + 1][y3 + 1] <= this._TYPE_INIT;
- result = this.matchBlockUnfold_axis(x1, y1, x2, y2, x3, y3, true);
- if (result) {
- return result;
- }
- }
- }
- return null;
- },
- /**
- * 某个方向上的搜索逻辑
- */
- matchBlockUnfold_axis: function(x1, y1, x2, y2, x3, y3, isAxis_X) {
- // cc.warn("matchBlockUnfold_axis" + x3 + ',' + y3); var tmpXY = [];
- if (this._canvasGrids[x3 + 1][y3 + 1] <= this._TYPE_INIT) {
- tmpXY = this.matchBlockCorner(x3, y3, x2, y2, isAxis_X);
- if (tmpXY) {
- return [x3, y3].concat(tmpXY);;
- }
- }
- return null;
- },
参考资料
http://blog.csdn.net/artzok/article/details/51622782
链接:
https://www.jianshu.com/p/740603fc6501
来源: http://blog.csdn.net/rolan1993/article/details/79467921