写在前面前些天闲聊中跟家里的领导说,微信也可以做小游戏诶。然后她说,那你做个连连看游戏给我玩玩呗。再然后就有了这几天的摸索和下面的一些小结:
开发工具:
主要的工作是在Cocos Creator和Visual Studio Code里完成的,illustrator CC 用来资源切图,微信开发者工具是最后打包微信小游戏用到;Cocos Creator对微信小游戏的支持已经很到位了,游戏写好后只要在构建时选择发布平台为Wechat Game就好。 主要的逻辑: A、洗牌 shuffle:遍历图片数组,取1个随机位置的图片和当前位置交换; B、用一个二维数组(各个方向均比图片数组大1)保存图片的状态值,搜索路径时映射到这个数组搜索; C、搜索顺序:
/** * 直连 */ 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; }, |
微信小程序之二:元宵灯笼连连看小游戏
发布:2018-05-07 14:57浏览: 次来源:网络 作者:cola
免责声明:本站所有文章和图片均来自用户分享和网络收集,文章和图片版权归原作者及原出处所有,仅供学习与参考,请勿用于商业用途,如果损害了您的权利,请联系网站客服处理。
相关文章
- 微信小程序app.json文件常用配置说明2021-07-09
- 微信小程序文字控制单行超过显示省略号2021-07-09
- 微信小程序参数传递的几种方法2021-07-09
- 微信小程序使用button按钮分享2021-07-09
- 微信小程序的setData2021-07-09
- 小程序分享,获取openid2021-07-08
- 微信小程序-实现tab2021-07-08
- 微信开发者工具新建和导入小程序2021-07-08
- 微信小程序实现点击拍照长按录像功能2021-07-08
- 微信小程序必知知识2021-07-08