小程序模板網(wǎng)

微信小程序之二:元宵燈籠連連看小游戲

發(fā)布時(shí)間:2018-05-07 14:57 所屬欄目:小程序開發(fā)教程

 

寫在前面

前些天閑聊中跟家里的領(lǐng)導(dǎo)說,微信也可以做小游戲誒。然后她說,那你做個(gè)連連看游戲給我玩玩唄。再然后就有了這幾天的摸索和下面的一些小結(jié):

 

 

開發(fā)工具:

  • Cocos Creator v1.8.1
  • Visual Studio Code 1.20.1
  • Adob illustrator CC 2018
  • 微信開發(fā)者工具 1.02.1802270

主要的工作是在Cocos Creator和Visual Studio Code里完成的,illustrator CC 用來資源切圖,微信開發(fā)者工具是最后打包微信小游戲用到;Cocos Creator對(duì)微信小游戲的支持已經(jīng)很到位了,游戲?qū)懞煤笾灰跇?gòu)建時(shí)選擇發(fā)布平臺(tái)為Wechat Game就好。

目前微信還未開放小游戲注冊(cè)與上架,只能用開發(fā)者的微信測(cè)試體驗(yàn)。好在Cocos Creator跨平臺(tái)發(fā)布很方便,構(gòu)建了個(gè)Web Mobile版本,發(fā)布到服務(wù)器上,大家有興趣就一起可以體驗(yàn)咯^_^

主要的邏輯:

A、洗牌 shuffle:遍歷圖片數(shù)組,取1個(gè)隨機(jī)位置的圖片和當(dāng)前位置交換;

B、用一個(gè)二維數(shù)組(各個(gè)方向均比圖片數(shù)組大1)保存圖片的狀態(tài)值,搜索路徑時(shí)映射到這個(gè)數(shù)組搜索;

C、搜索順序:

  • 1、同一條直線:判斷直線間有無圖片;
  • 2、有一個(gè)拐角:先定位出兩個(gè)拐角點(diǎn),若拐角點(diǎn)沒有圖片,再轉(zhuǎn)換成一條直線的情況繼續(xù)處理;
  • 3、兩個(gè)拐角:某個(gè)方向移動(dòng),若到達(dá)點(diǎn)沒有圖片,再轉(zhuǎn)換成一個(gè)拐角的情況繼續(xù)處理;若到達(dá)點(diǎn)有圖片,此方向不再繼續(xù)搜索;
/**
     * 直連
     */
    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;
    },

 

/**
     * 一個(gè)轉(zhuǎn)角
     * 搜索到路徑時(shí),返回轉(zhuǎn)角坐標(biāo) 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;
        }

        // 轉(zhuǎn)角點(diǎn)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;
            }
        }

        // 轉(zhuǎn)角點(diǎn)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;
    },

    /**
     * 轉(zhuǎn)角邏輯
     */
    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;
    },
/**
     * 兩個(gè)轉(zhuǎn)角
     * 由中心往外展開搜索路徑,某個(gè)方向當(dāng)碰到有圖片時(shí),這個(gè)方向就不再繼續(xù)搜索
     * 搜索到路徑時(shí),返回兩個(gè)轉(zhuǎn)角點(diǎn)坐標(biāo) 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;
    },

    /**
     * 某個(gè)方向上的搜索邏輯
     */
    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;
    },


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://22321a.com/wxmini/doc/course/24288.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢