20180301 by 慕容秋

写在前面

前些天闲聊中跟家里的领导说，微信也可以做小游戏诶。然后她说，那你做个连连看游戏给我玩玩呗。再然后就有了这几天的摸索和下面的一些小结：

演示效果: 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

原著是一个有趣的人,若有侵权,请通知删除