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

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

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

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

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

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

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

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

【同二的原理,如下图,如果A,B 2个交点到物体均没有障碍物,则可以连通。其中A点的纵坐标和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,则有物体,否则没有。

至于画线,消除相同物体,只要会连线逻辑,肯定就会自己绘制线条,消除物体了,所以本篇文章就只讲连线判断啦~

在判断能否连线的时候,肯定是从最简单的方法开始判断,如下:

同一直线能否直线连通--->如何一点被包围,则不通--->两点在一条直线上,不能直线连接但是可以连通---> 不在同一直线但是可以连通

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;

}连线判断

多关卡连连看php源码_前端实现连连看小游戏实例代码相关推荐

  1. 多关卡连连看php源码_奇怪的连连看ios版是一款非常好玩的手机消除闯关游戏,奇怪的连连看采用了最经典的三消玩法,游戏中有着非常多的游戏关卡,是一...

    奇怪的连连看手游是一款完成无尽消除任务闯关的益智游戏应用,奇怪的连连看游戏里玩家需要想办法尽快完成消除任务,奇怪的连连看关卡丰富,难度逐渐升级. 游戏介绍 奇怪的连连看手游是一款非常不错的休闲益智类游 ...

  2. 多关卡连连看php源码_【Ctrl.js】快手小游戏-连连看源码

    [JavaScript] 纯文本查看 复制代码//--------------------------------------------------------------------------- ...

  3. tp 扫码点餐 源码_同城跑腿系统小程序源码搭建平台模式案例

    点击上方关注我们! 外卖跑腿配送软件开发,找[金经理:157-6875-2419微电],外卖跑腿配送系统开发,外卖跑腿配送系统小程序开发,外卖跑腿配送系统平台搭建,外卖跑腿配送系统开发模式,外卖跑腿配 ...

  4. snes9x 源码_仅64kb的SNES游戏如何制作优美的音乐

    snes9x 源码 The SNES only had 64 kilobytes of audio RAM, yet composers used it to create some of the m ...

  5. android 实例源码解释,Android Handler 原理分析及实例代码

    Android Handler 原理分析 Handler一个让无数android开发者头疼的东西,希望我今天这边文章能为您彻底根治这个问题 今天就为大家详细剖析下Handler的原理 Handler使 ...

  6. HTML源码-网页123算数题小游戏源码

    介绍: HTML源码-网页数学小游戏-123算数题小游戏源码 网盘下载地址: http://kekewangLuo.net/RVZo8EC4yKu0 图片:

  7. java手机小游戏源码_Java手机版数独小游戏(J2me)JAVA游戏源码下载

    数独游戏,相信朋友们都知道的,以前也经常玩的,用VB.VC++和Delphi版编写的都在网上宣布过,今天放出一个鉴于Java的J2me手机版的,大致看一下截图,这是在Java模拟机运行的界面,带有Ja ...

  8. 微信小程序案例源码-cocos creator跨平台开发小游戏案例

    前言 本人一直想学习游戏开发,以前做过Android游戏开发,但电脑坏了,所有源码都没有了,后面也就没有开发了,近来下班之余又想开发游戏了.开发游戏之前,需要考虑开发平台及语言,以前基于Android ...

  9. 谷歌404页面html源码,可玩恐龙小游戏快速安装

    二.下载:https://wwm.lanzout.com/iRTpA08d3qvc 三.用途: 可集成到自己的网站上,可以玩谷歌恐龙小游戏 可修改打赏页面 可替换自己喜欢的图片 可供初学者学习网页原理 ...

最新文章

  1. javascript-对混合字母/数字数组进行排序
  2. linux shell 数组添加元素
  3. Eclipse中新建jsp提示The superclass javax.servlet.http.HttpServlet was not found on the Java Build Path
  4. docker-compose 报错记录
  5. Android WebView 开发详解(二)
  6. Kubernetes应用部署模型解析(原理篇)
  7. 字典与集合_月隐学python第8课
  8. BLE-NRF51822教程1-常用概念
  9. python列表去重效率,你应该知道的python列表去重方法
  10. 计算机网络聚合怎么设置,交换机的端口聚合如何配置
  11. 【HDOJ】2389 Rain on your Parade
  12. 联想e480一键恢复小孔_thinkpade480win10如何一键还原
  13. xcode checkout验证错误解决方法
  14. jQuery初学笔记一,美元符号$
  15. 裂变海报设计的落地干货,为什么海报在裂变活动中这么重要?
  16. 海龟交易法:如何防止模型死亡
  17. React简介--尚硅谷react全家桶笔记总结
  18. C语言练习之输入x输出y
  19. elementui表格隔行换色
  20. 【Unity入门】3.3D物体

热门文章

  1. 脊髓损伤常见功能性障碍表现有哪些
  2. 消息中间件零拷贝?mmap与sendFile的区别是什么?
  3. T-Mobile CEO为视频节流辩护 声称他支持网络中立
  4. 内网渗透(十五)之内网信息收集-域环境中定位域管理员
  5. 重在参与,给自己一个改变未来、体验激情的机会
  6. 串口 PLC 编程FAQ
  7. Umm 类图关系总结
  8. 男生勿进!4月MM星座运势~~
  9. git cherry-pick is a merge but no -m option was given.
  10. mysql+中与当前时间比较大小_Mysql中时间加减和比较大小的方法