微信小程序之二：元宵灯笼连连看小游戏
发布时间：2018-05-07 14:57 所属栏目：小程序开发教程
|
写在前面前些天闲聊中跟家里的领导说，微信也可以做小游戏诶。然后她说，那你做个连连看游戏给我玩玩呗。再然后就有了这几天的摸索和下面的一些小结：
开发工具：
主要的工作是在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;
},
|
