小编给大家分享一下网络开发中连连看小游戏的制作案例,相信大部分人都还不怎么了解,因此分享这篇文章给大家参考一下,希望大家阅读完这篇文章后大有收获、下面让我们一起去了解一下吧!
一。2个物体在同一直线上,可以直接连通(这个不需要解释啦)
二。2个物体在同一直线上,中间有障碍物,不能直接连通(2个转弯)
【循环遍历黄线中的交点,比如A, B点,再判断蓝线有没有障碍物,若没有,则可以连通,若有,则继续循环查找新的A, B点】
三。2个对象不在同一直线上,一个转弯
【2个物体分别在所在位置进行x, y轴的延伸,如下图则交点为A, b,只需判断2个交点到2个物体直接是否有障碍物,若没有,则可以连通】
四。2个物体不在同一直线上,连线有2个转弯
【同二的原理,如下图,如果A, B两个交点到物体均没有障碍物,则可以连通,其中一个点的纵坐标和B相同】
另外一种情况,A, B为2个物体所在x轴与中y轴间的交点,A, B的x坐标必须相同,连线如下:
以上就是四种连线算法判断,画图只画x轴的,每一种按照同样的原理增加y轴即可。可覆盖所有连线判断~
说完连线判断的逻辑之后,写一下整体的游戏框架,游戏基本使用原生javascript,使用createjs游戏引擎进行开发。
代码思路:
1。绘制游戏画的图,确定为多少宫图,由于是在移动端的小游戏,根据最小屏幕尺寸(iphone4, 320 * 480),确定为7 * 9的宫图。
1。创建一个二维数组,如果某个坐标上有物体,则设为1,否则为0
2。判断该位置是否有物体,只需要判断对应的二维数组上值是否为1,若为1,则有物体,否则没有。
至于画线,消除相同物体,只要会连线逻辑,肯定就会自己绘制线条,消除物体了,所以本篇文章就只讲连线判断啦~
在判断能否连线的时候,肯定是从最简单的方法开始判断,如下:
同一直线能否直线连通——→如何一点被包围,则不通——→两点在一条直线上,不能直线连接但是可以连通——→不在同一直线但是可以连通
//判断同一条线能否连通,x轴相同或者y轴相同hasLine:函数(p1, p2){这。路径=[];//同一点如果(p1。x==p2。x和,p1。y==p2.y){{返回
状态:虚假};
如果(这}。onlineY (p1, p2)) {var min=p1。y比;p2。y ?p2。y: p1.y;
min=分钟+ 1;var max=p1。y比;p2。y ?p1。y: p2.y;(最小值;分钟& lt;马克思;分钟+ +){var p={x: p1。x, y: min};如果(! this.isEmpty (p)) {
console.log(& # 39;有障碍物p点………………& # 39;);
console.log (p);。路径=[];断裂;
}this.path.push (p);
如果(min==max){}{返回
状态:没错,
数据:this.path,
dir: & # 39; y # 39;//y轴};
}。路径=[];返回{
状态:虚假};
如果(这其他}。onlineX (p1, p2)) {var j=p1。x比;p2。x ?p2。x: p1.x;
j=+ 1; var max=p1。x比;p2。x ?p1。x: p2.x; (j;j & lt;马克思;j + +) {var p={x: j, y: p1.y};如果(! this.isEmpty (p)) {
console.log(& # 39;有障碍物p点………………& # 39;);
console.log (p);。路径=[];断裂;
}this.path.push (p);
如果(j==max){}{返回
状态:没错,
数据:this.path,
dir: & # 39; x # 39;//x轴};
}。路径=[];返回{
状态:虚假};
}{返回
状态:假};//2点是否有其中一点被全包围,若有,则返回trueisWrap:函数(p1, p2){//有一点为空,则条件不成立如果(!这。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
}),,!这。isEmpty ({x: p1。x + 1, y: p1.y})){返回true;
如果(!}。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
}),,!这。isEmpty ({x: p2。x + 1, y: p2.y})){返回true;
}返回false;
}//两点在一条直线上,不能直线连接但是可以连通LineLink:函数(p1, p2) {var pt0, pt1、pt2 pt3;//如果都在x轴,则自左至右扫描可能的路径,//每次构造4个顶点pt0, pt1, pt2, pt3,然后看他们两两之间是否连如果(这通。onlineX (p1, p2)) {(var=0;我& lt;this.H;我+ +){如果(i==p1.y){继续;
}
pt0=p1;
pt1={x: p1。x, y:我};
pt2={x: p2。x, y:我};
pt3=p2;//如果顶点不为空,则该路不通如果(! this.isEmpty (pt1) | | ! this.isEmpty (pt2)){继续;
如果(这}。hasLine (pt0 pt1)。状态,,这一点。pt2 hasLine (pt1)。状态,,这一点。hasLine (pt2 pt3) .status) {。画直线([pt0、pt3 pt1 pt2]);返回[pt0, pt1、pt2 pt3);
}
}
}//如果都在y轴,则自上至下扫描可能的路径,//每次构造4个顶点pt0, pt1, pt2, pt3,然后看他们两两之间是否连如果(这通。onlineY (p1, p2)) {(var j=0;j & lt;this.W;j + +){如果(j==p1.x){继续;
}
pt0=p1;
pt1={x: j, y: p1.y};
pt2={x: j, y: p2.y};
pt3=p2;//如果顶点不为空,则该路不通如果(! this.isEmpty (pt1) | | ! this.isEmpty (pt2)){继续;
如果(这}。hasLine (pt0 pt1)。状态,,这一点。pt2 hasLine (pt1)。状态,,这一点。hasLine (pt2 pt3) .status) {。画直线([pt0、pt3 pt1 pt2]);返回[pt0, pt1、pt2 pt3);
}
}
}
},//两点不在一条直线上,看是否可通curveLink:函数(p1, p2) {var pt0, pt1、pt2 pt3;//特殊情况,先判断是否是一个转弯var spec1={x: p1。x, y: p2.y},
spec2={x: p2。x, y: p1.y};如果(this.isEmpty (spec1)){如果(这一点。spec1 hasLine (p1)。状态,,这一点。null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
null
