小程序模板网

微信小程序之二:元宵灯笼连连看小游戏

发布时间:2018-05-07 14:57 所属栏目:小程序开发教程

 

写在前面

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

 

 

开发工具:

  • 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;
    },


易优小程序(企业版)+灵活api+前后代码开源 码云仓库:starfork
本文地址:https://www.eyoucms.com/wxmini/doc/course/24288.html 复制链接 如需定制请联系易优客服咨询:800182392 点击咨询
QQ在线咨询