20180301 by 慕容秋
寫在前面
前些天閑聊中跟家里的領(lǐng)導(dǎo)說(shuō)映之，微信也可以做小游戲誒拦焚。然后她說(shuō)，那你做個(gè)連連看游戲給我玩玩唄杠输。再然后就有了這幾天的摸索和下面的一些小結(jié)：
演示效果: http://link.muroqiu.com
源碼地址: https://gitee.com/muroqiu/LinkUp
開(kāi)發(fā)工具：
- Cocos Creator v1.8.1
- Visual Studio Code 1.20.1
- Adob illustrator CC 2018
- 微信開(kāi)發(fā)者工具 1.02.1802270
主要的工作是在Cocos Creator和Visual Studio Code里完成的赎败，illustrator CC 用來(lái)資源切圖，微信開(kāi)發(fā)者工具是最后打包微信小游戲用到蠢甲；Cocos Creator對(duì)微信小游戲的支持已經(jīng)很到位了僵刮，游戲?qū)懞煤笾灰跇?gòu)建時(shí)選擇發(fā)布平臺(tái)為Wechat Game就好。
目前微信還未開(kāi)放小游戲注冊(cè)與上架鹦牛，只能用開(kāi)發(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坝辫、同一條直線：判斷直線間有無(wú)圖片篷就；
- 2、有一個(gè)拐角：先定位出兩個(gè)拐角點(diǎn)近忙，若拐角點(diǎn)沒(méi)有圖片竭业，再轉(zhuǎn)換成一條直線的情況繼續(xù)處理；
- 3及舍、兩個(gè)拐角：某個(gè)方向移動(dòng)未辆，若到達(dá)點(diǎn)沒(méi)有圖片，再轉(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)角
* 由中心往外展開(kāi)搜索路徑歼郭，某個(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;
},
參考資料
