你的位置:首页 > 软件开发 > 网页设计 > 前端实现连连看小游戏(1)

前端实现连连看小游戏(1)

发布时间:2017-06-21 12:00:55
博主玩了这么久的连连看,居然是第一次发现,连连看最多只能有2个转弯。orz…在网上搜索连连看的连线算法判断,并没有找到很全面的,经过自己摸索之后,画了下面的图(图有点丑……) 一. 2个物体在同一直线上,可以直接连通 (这个不需要解释啦) 二.2个物体在同一直线上,中间有 ...

博主玩了这么久的连连看,居然是第一次发现,连连看最多只能有2个转弯。orz…

在网上搜索连连看的连线算法判断,并没有找到很全面的,经过自己摸索之后,画了下面的图(图有点丑……)

 

一. 2个物体在同一直线上,可以直接连通 (这个不需要解释啦)

前端实现连连看小游戏(1)

 

二.2个物体在同一直线上,中间有障碍物,不能直接连通 (2个转弯)

【循环遍历黄线中的交点,比如A,B点,再判断蓝线有没有障碍物,若没有,则可以连通,若有,则继续循环查找新的A,B点】

前端实现连连看小游戏(1)

 

三. 2个对象不在同一直线上,一个转弯

【2个物体分别在所在位置进行x,y轴的延伸,如下图则交点为A,B。 只需判断2个交点到2个物体直接是否有障碍物,若没有,则可以连通】

前端实现连连看小游戏(1)

 

四. 2个物体不在同一直线上,连线有2个转弯 

【同二的原理,如下图,如果A,B 2个交点到物体均没有障碍物,则可以连通。其中A点的纵坐标和B相同】

前端实现连连看小游戏(1)

另外一种情况,A,B 为2个物体所在x轴与中间y轴的交点,A,B的x坐标必须相同,连线如下:

前端实现连连看小游戏(1)

 

 

以上就是四种连线算法判断,画图只画x轴的,每一种按照同样的原理增加y轴即可。可覆盖所有连线判断~

说完连线判断的逻辑之后,写一下整体的游戏框架,游戏基本使用原生javascript,使用createjs游戏引擎进行开发。

 

 代码思路:

1. 绘制游戏画图,确定为多少宫图,由于是在移动端的小游戏,根据最小屏幕尺寸(iphone4  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;      }  }

原标题:前端实现连连看小游戏(1)

关键词:前端

*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们: admin#shaoqun.com (#换成@)。