前端实现连连看小游戏实例代码-
发布时间：08/01 来源：未知 浏览：
关键词：
在网上搜寻连连看的连线算法推断，并没有寻到很全面的，经过本人探索之后，画了下面的图（图有点丑……）
一. 2个物体在统一直线上，可以直接连通 （这个不需要解释啦）
以上就是四种连线算法推断，绘图只画x轴的，每一种按照一样的道理添加y轴即可。可遮盖所有连线推断～
说完连线推断的逻辑之后，写一下整体的游戏框架，游戏根本运用原生javascript，运用createjs游戏引擎进行开发。
代码思绪：
1. 绘制游戏绘图，肯定为多少宫图，因为是在挪移端的小游戏，依据最小屏幕尺寸（苹果4 320*480），肯定为7*9的宫图。
1. 新建一个二维数组，要是某个坐标上有物体，则设为1，不然为0
2.推断该位置可否有物体，只需要推断对应的二维数组上值可否为1，若为1，则有物体，不然没有。
至于画线，消弭雷同物体，只有会连线逻辑，确定就会本人绘制线条，消弭物体了，所以本篇文章就只讲连线推断啦～
在推断能否连线的时候，确定是从最简略的办法开端推断,如下：
统一直线能否直线连通--->怎样一点被包抄，则欠亨--->两点在一条直线上，不克不及直线连贯但是可以连通---> 不在统一直线但是可以连通
getPath: function (p1, p2) {//开端搜寻前对p1,p2排序，使p2尽可能的在p1的右下方。if (p1.x > p2.x) {var t = p1;
p1 = p2;
p2 = t;
}else if (p1.x == p2.x) {if (p1.y > p2.y) {var t = p1;
p1 = p2;
p2 = t;
}
}//2点在统一直线上，可以直线连通if (this.hasLine(p1, p2).status) {return true;
}//要是两点中任何一个点被全包抄，则欠亨。else if (this.isWrap(p1, p2)) {return false;
}//两点在一条直线上，不克不及直线连贯但是可以连通else if (this.LineLink(p1, p2)) {return true;
}//不在统一直线但是可以连通else if (this.curveLink(p1, p2)) {return true;
}
}
//推断统一条线能否连通,x轴雷同或者y轴雷同hasLine: function (p1, p2) {this.path = [];//统一点if (p1.x == p2.x && p1.y == p2.y) {return {
status: false};
}if (this.onlineY(p1, p2)) {var min = p1.y > p2.y ? p2.y : p1.y;
min = min + 1;var max = p1.y > p2.y ? p1.y : p2.y;for (min; min < max; min++) {var p = {x: p1.x, y: min};if (!this.isEmpty(p)) {
console.log('有障碍物p点………………');
console.log(p);this.path = [];break;
}this.path.push(p);
}if (min == max) {return {
status: true,
data: this.path,
dir: 'y' //y轴 };
}this.path = [];return {
status: false};
}else if (this.onlineX(p1, p2)) {var j = p1.x > p2.x ? p2.x : p1.x;
j = j + 1;var max = p1.x > p2.x ? p1.x : p2.x;for (j; j < max; j++) {var p = {x: j, y: p1.y};if (!this.isEmpty(p)) {
console.log('有障碍物p点………………');
console.log(p);this.path = [];break;
}this.path.push(p);
}if (j == max) {return {
status: true,
data: this.path,
dir: 'x' //x轴 };
}this.path = [];return {
status: false};
}return {
status: false};//2点是否有其中一点被全包围,若有，则返回trueisWrap: function (p1, p2) {//有一点为空，则条件不成立if (!this.isEmpty({x: p1.x, y: p1.y + 1}) && !this.isEmpty({
x: p1.x,
y: p1.y - 1}) && !this.isEmpty({
x: p1.x - 1,
y: p1.y
}) && !this.isEmpty({x: p1.x + 1, y: p1.y})) {return true;
}if (!this.isEmpty({x: p2.x, y: p2.y + 1}) && !this.isEmpty({
x: p2.x,
y: p2.y - 1}) && !this.isEmpty({
x: p2.x - 1,
y: p2.y
}) && !this.isEmpty({x: p2.x + 1, y: p2.y})) {return true;
}return false;
} //两点在一条直线上，不能直线连接但是可以连通LineLink: function (p1, p2) {var pt0, pt1, pt2, pt3;//如果都在x轴，则自左至右扫描可能的路径，//每次构造4个顶点pt0, pt1, pt2, pt3，然后看他们两两之间是否连通if (this.onlineX(p1, p2)) {for (var i = 0; i < this.H; i++) {if (i == p1.y) {continue;
}
pt0 = p1;
pt1 = {x: p1.x, y: i};
pt2 = {x: p2.x, y: i};
pt3 = p2;//如果顶点不为空，则该路不通。if (!this.isEmpty(pt1) || !this.isEmpty(pt2)) {continue;
}if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt1, pt2, pt3];
}
}
}//如果都在y轴，则自上至下扫描可能的路径，//每次构造4个顶点pt0, pt1, pt2, pt3，然后看他们两两之间是否连通if (this.onlineY(p1, p2)) {for (var j = 0; j < this.W; j++) {if (j == p1.x) {continue;
}
pt0 = p1;
pt1 = {x: j, y: p1.y};
pt2 = {x: j, y: p2.y};
pt3 = p2;//如果顶点不为空，则该路不通。if (!this.isEmpty(pt1) || !this.isEmpty(pt2)) {continue;
}if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt1, pt2, pt3];
}
}
}
}， //两点不在一条直线上，看是否可通curveLink: function (p1, p2) {var pt0, pt1, pt2, pt3;//特殊情况，先判断是否是一个转弯var spec1 = {x: p1.x, y: p2.y},
spec2 = {x: p2.x, y: p1.y};if (this.isEmpty(spec1)) {if (this.hasLine(p1, spec1).status && this.hasLine(p2, spec1).status) {
console.log('1个转弯');this.drawLine(1, [p1, p2, spec1]);return [p1, p2, spec1];
}
}if (this.isEmpty(spec2)) {if (this.hasLine(p1, spec2).status && this.hasLine(p2, spec2).status) {
console.log('1个转弯');// console.table([pt0, spec2, pt3]);this.drawLine(1, [p1, p2, spec2]);return [p1, spec2, p2];
}
}//先纵向扫描可能的路径//同样，每次构造4个顶点，看是否可通for (var k = 0; k <= this.H; k++) {
pt0 = p1;
pt1 = {x: p1.x, y: k};
pt2 = {x: p2.x, y: k};
pt3 = p2;//2个交点都为空if (this.isEmpty(pt1) && this.isEmpty(pt2)) {//2个转弯if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {
console.log('2个转弯');this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt3, pt1, pt2];
}
}
}//横向扫描所有可能的路径for (var k = 0; k <= this.W; k++) {
pt0 = p1;
pt1 = {x: k, y: p1.y};
pt2 = {x: k, y: p2.y};
pt3 = p2;//2个交点都为空if (this.isEmpty(pt1) && this.isEmpty(pt2)) {//2个转弯if (this.hasLine(pt0, pt1).status && this.hasLine(pt1, pt2).status && this.hasLine(pt2, pt3).status) {
console.log('2个转弯');this.drawLine(2, [pt0, pt3, pt1, pt2]);return [pt0, pt3, pt1, pt2];
}
}
}return false;
}连线推断以上就是前端实现连连看小游戏实例代码的细致内容，更多请关注 百分百源码网 其它相干文章！
