JavaScript实现连连看连线算法


Posted in Javascript onJanuary 05, 2019

本文实例为大家分享了JavaScript实现连连看连线算法的多种情况,供大家参考,具体内容如下

第一种情况为两个精灵能通过一条直线连接,如下图

JavaScript实现连连看连线算法

代码如下:

var self = this; //用self变量来保存当下的这个this,以免在其他函数域中this指向不同对象而调用错误
 //直线连接的两个对象
 function isDirectLink(_begin,_end){
  //若传入的是同一对象,连线的长度为0,返回false row col 分别表示精灵的行号和列号
  if(_begin.row == _end.row&&_begin.col==_end.col){
  m_line.length = 0;
  return false;
  }
  //行号相等时
  if(_begin.row == _end.row){
  var steps = _begin.col - _end.col;
  var direction = steps/Math.abs(steps);
  var row = _begin.row;
  //判断两个对象直线距离上是否存在精灵
  for(var i = 1;i<Math.abs(steps);++i)
  {
   var col = _begin.col - i*direction;
   //获取连线中间的精灵
   var sprite = self.m_sprites[row*m_col+col];
   //若不为空,连线的长度为0,返回false
   if(sprite!=null)
   {
   m_line.length = 0;
   return false;
   }
  }
  m_line.push(new M_Segment(_begin,_end));
  return true;
  }
  //列号相等时
  if(_begin.col == _end.col){
  var steps = _begin.row-_end.row;
  var direction = steps/Math.abs(steps);
  var col = _begin.col;
  for(var i =1;i<Math.abs(steps);++i){
   var row =_begin.row - i*direction;
   var sprite = self.m_sprites[row*m_col+col];
   if(sprite!=null){
   m_line.length = 0;
   return false;
   }
  }
  m_line.push(new M_Segment(_begin,_end));
  return true;
  }
  return false;
 };

第二种情况为只需一个转角就能连接两个精灵 如下图

JavaScript实现连连看连线算法

function isOneCornerLink(_begin,_end){ 
  if(_begin.row == _end.row&&_begin.col == _end.col){ 
  m_line.length = 0; 
  return false; 
  } 
  //第一种拐点 M_Point()是自定义的一个函数 
  var point_1 = new M_Point(_begin.row,_end.col); 
  //用拐点分别连接两个精灵 
  var islink_1 =(isDirectLink(_begin,point_1)&&isDirectLink(point_1,_end)); 
  //若连接成功 
  if(islink_1){ 
  //若拐点上无精灵,则返回true 
  if(self.m_sprites[point_1.row*m_col+point_1.col]==null){ 
   return true; 
  } 
  } 
  m_line.length=0; 
  //第二种拐点 
  var point_2 = new M_Point(_end.row,_begin.col); 
  var islink_2 = (isDirectLink(_begin,point_2)&&isDirectLink(point_2,_end)); 
  if(islink_2){ 
  if(self.m_sprites[point_2.row*m_col+point_2.col]==null){ 
   return true; 
  } 
  } 
  m_line.length =0; 
  return false; 
 };

第三种情况是需要两个拐点才能相连  这种情况比较多,列出两种的图,供理解代码的时候参考 

JavaScript实现连连看连线算法

function isTwoCornerLink(_begin,_end){
  function setSegment(point_1,point_2,point_3,point_4){
  m_line.length = 0;
  m_line.push(new M_Segment(point_1,point_2));
  m_line.push(new M_Segment(point_2,point_3));
  m_line.push(new M_Segment(point_3,point_4));
  }
  if(_begin.row==_end.row&&_begin.col==_end.col){
  m_line.length = 0;
  return false;
  }
  //若两个对象在同一行,且在边框最外的两行
  if(_begin.row == _end.row&&(_begin.row ==0||_begin.row==m_row-1)){
  var addline = -1;
  //若在第一行,则在下面划线,否则在上面
  if(_begin.row == 0){
   addline =1;
  }
  var p_1 = new M_Point(_begin.row-addline,_begin.col);
  var p_2 = new M_Point(_begin.row-addline,_end.col);
  setSegment(_begin,p_1,p_2,_end);
  return true;
  }
  m_line.length = 0;
  //若两个对象在同一列,且在边框最外的两行
  if(_begin.col ==_end.col&&(_begin.col==0||_begin.col==m_col-1)){
  var addline = -1;
  if(_begin.col == 0){
   addline = 1;
  }
  var p_1 = new M_Point(_begin.row,_begin.col-addline);
  var p_2 = new M_Point(_end.row,_end.col-addline);
  setSegment(_begin,p_1,p_2,_end);
  return true;
  }
  m_line.length = 0;
  //向上画线
  for(var _row = _begin.row+1;_row<=m_row;++_row){
 
  if(_row == m_row){
   //如果begin点在最外一行,判断end点对应边框上的点是否存在,再判断是否能连接
   if(row - 1 ==_begin.row){
   if (self.m_sprites[(_row - 1) * m_col + _end.col] == null) {
    var link = isDirectLink(_end, new M_Point((_row - 1), _end.col));
    if (link) {
    m_line.length = 0;
    var p_1 = new M_Point(_row, _begin.col);
    var p_2 = new M_Point(_row, _end.col);
    setSegment(_begin, p_1, p_2, _end);
    return true;
    }
   }
   }
   m_line.length = 0;
   // 若end点在第八行
   if(_row - 1 == _end.row){
   if(self.m_sprites[(_row-1)*m_col+_end.col]==null){
    var link = isDirectLink(_begin,new M_Point((_row-1),_begin.col));
    if(link){
    m.line.length = 0;
    var p_1 =new M_Point(_row,_begin.col);
    var p_2 = new M_Point(_row,_end.col);
    setSegment(_begin,p_1,p_2,_end);
    return true;
    }
   }
   }
   m_line.length = 0;
   //若begin点和end点列对应的第八行上是否为空
   if(self.m_sprites[(_row-1)*m_col+_begin.col]!=null||self.m_sprites[(_row-1)*m_col+_end.col]!=null){
   break;
   }
   var link_1 = isDirectLink(_begin,new M_Point(_row - 1,_begin.col));
   var link_2 = isDirectLink(_end,new M_Point(_row -1 ,_end.col));
   if(link_1&&link_2)
   {
   m_line.length = 0;
   var p_1 = new M_Point(_row,_begin.col);
   var p_2 = new M_Point(_row,_end.col);
   setSegment(_begin,p_1,p_2,_end);
   return true;
   }
  }
  else{
   m_line.length = 0;
   var point_1 = new M_Point(_row,_begin.col);
   //若连线第一个拐点为空
   if(self.m_sprites[point_1.row*m_col+point_1.col]!=null){
   break;
   }
   var link_1 = isOneCornerLink(point_1,_end);
   var link_2 = isDirectLink(_begin,point_1);
   if(link_1&&link_2){
   return true;
   }
  }
  }
  //向下画线
  m_line.length = 0;
  for(var _row = begin.row-1;_row>=-1;--row){
  if(_row==-1){
   if(0==_begin.row){
   if(self.m_sprites[_end.col]==null){
    var link = isDirectLink(_end,new M_Point(0,_end.col));
    if(link){
    m_line.length = 0;
    var p_1 = new M_Point(_row,_begin.col);
    var P_2 = new M_Point(_row,_end.col);
    setSegment(_begin,p_1,p_2,_end);
    return true;
    }
   }
   }
   m_line.length = 0;
   if(0==_end.row){
   if(self.m_sprites[_begin.col]==null){
    var link = isDirectLink(_begin,new M_Point(0,_begin.col));
    if(link){
    m_line.length = 0;
    var p_1 = new M_Point(_row,_begin.col);
    var p_2 = new M_Point(_row,_end.col);
    setSegment(_begin,p_1,p_2,_end);
    return true;
    }
   }
   }
   m_line.length = 0;
   if(self.m_sprites[_begain.col]!=null||self.m_sprites[_end.col]!=null){
   break;
   }
   var link_1 = isDirectLink(_begain,new M_Point(0,_begain.col));
   var link_2 = isDirectLink(_end,new M_Point(0,_end.col));
   if(link_1&&link_2){
   m_line.length = 0;
   var p_1 = new M_Point(_row,_begain.col);
   var p_2 = new M_Point(_row,_end.col);
   setSegment(_begain,p_1,p_2,_end);
   return true;
 
   }
  }
  else {
   m_line.length = 0;
   var point_1 = new M_Point(_row, _begain.col);
   //cc.log(point_1.row+" "+point_1.col);
   if (self.m_sprites[point_1.row * m_col + point_1.col] != null) {
   break;
   }
   var link_1 = isOneCornerLink(point_1, _end);
   var link_2 = isDirectLink(_begain, point_1);
   if (link_1 && link_2) {
   return true;
   }
  }
  }
  m_line.length = 0;
  //向左画线
  for(var _col = _begain.col-1;_col>=-1;--_col){
  if(_col==-1){
   if(0==_begain.col){
   if(self.m_sprites[_end.row*m_col]==null){
    var link = isDirectLink(_end,new M_Point(_end.row,0));
    if(link){
    m_line.length = 0;
    var p_1 = new M_Point(_begain.row,_col);
    var p_2 = new M_Point(_end.row,_col);
    setSegment(_begain,p_1,p_2,_end);
    //m_line.push(new M_Segment(_begain,p_1));
    //m_line.push(new M_Segment(p_1,p_2));
    //m_line.push(new M_Segment(p_2,_end));
    return true;
    }
   }
   }
   m_line.length = 0;
   if(0==_end.col){
   if(self.m_sprites[_begain.row*m_col]==null){
    var link = isDirectLink(_begain,new M_Point(_begain.row,0));
    if(link){
    m_line.length = 0;
    var p_1 = new M_Point(_begain.row,_col);
    var p_2 = new M_Point(_end.row,_col);
    setSegment(_begain,p_1,p_2,_end);
    //m_line.push(new M_Segment(_begain,p_1));
    //m_line.push(new M_Segment(p_1,p_2));
    //m_line.push(new M_Segment(p_2,_end));
    return true;
    }
   }
   }
   m_line.length = 0;
   if(self.m_sprites[_begain.row*m_col]!=null||self.m_sprites[_end.row*m_col]!=null){
   break;
   }
   var link_1 = isDirectLink(_begain,new M_Point(_begain.row,0));
   var link_2 = isDirectLink(_end,new M_Point(_end.row,0));
   if(link_1&&link_2){
   m_line.length = 0;
   var p_1 = new M_Point(_begain.row,_col);
   var p_2 = new M_Point(_end.row,_col);
   setSegment(_begain,p_1,p_2,_end);
   //m_line.push(new M_Segment(_begain,p_1));
   //m_line.push(new M_Segment(p_1,p_2));
   //m_line.push(new M_Segment(p_2,_end));
   return true;
 
   }
 
  }
  else {
   m_line.length = 0;
   var point_1 = new M_Point(_begain.row, _col);
   //cc.log(point_1.row+" "+point_1.col);
   if (self.m_sprites[point_1.row * m_col + point_1.col] != null) {
   break;
   }
   var link_1 = isOneCornerLink(point_1, _end);
   var link_2 = isDirectLink(_begain, point_1);
   if (link_1 && link_2) {
   return true;
   }
  }
 
  }
  m_line.length = 0;
  //向右画线
  for(var _col = _begain.col+1;_col<=m_col;++_col){
  if(_col==m_col){
   if(m_col-1==_begain.col){
   if(self.m_sprites[_end.row*m_col+_col-1]==null){
    var link = isDirectLink(_end,new M_Point(_end.row,_col-1));
    if(link){
    m_line.length = 0;
    var p_1 = new M_Point(_begain.row,_col);
    var p_2 = new M_Point(_end.row,_col);
    setSegment(_begain,p_1,p_2,_end);
    return true;
    }
   }
   }
   m_line.length = 0;
   if(m_col-1==_end.col){
   if(self.m_sprites[_begain.row*m_col+_col-1]==null){
    var link = isDirectLink(_begain,new M_Point(_begain.row,_col-1));
    if(link){
    m_line.length = 0;
    var p_1 = new M_Point(_begain.row,_col);
    var p_2 = new M_Point(_end.row,_col);
    setSegment(_begain,p_1,p_2,_end);
    return true;
    }
   }
   }
   m_line.length = 0;
   if(self.m_sprites[_begain.row*m_col+_col-1]!=null||self.m_sprites[_end.row*m_col+_col-1]!=null){
   break;
   }
   var link_1 = isDirectLink(_begain,new M_Point(_begain.row,_col-1));
   var link_2 = isDirectLink(_end,new M_Point(_end.row,_col-1));
   if(link_1&&link_2){
   m_line.length = 0;
   var p_1 = new M_Point(_begain.row,_col);
   var p_2 = new M_Point(_end.row,_col);
   setSegment(_begain,p_1,p_2,_end);
   return true;
 
   }
 
  }
  else {
   m_line.length = 0;
   var point_1 = new M_Point(_begain.row, _col);
   //cc.log(point_1.row+" "+point_1.col);
   if (self.m_sprites[point_1.row * m_col + point_1.col] != null) {
   break;
   }
   var link_1 = isOneCornerLink(point_1, _end);
   var link_2 = isDirectLink(_begain, point_1);
   if (link_1 && link_2) {
   return true;
   }
  }
 
  }
  m_line.length = 0;
  return false;
 };

最后再检查一下

function checkLink(_begin,_end){
  var islink = isDirectLink(_begin,_end);
  if(islink){
  return islink;
  }
  islink = isOneCornerLink(_begin,_end);
  if(islink){
  return islink;
  }
  islink = isTwoCornerLink(_begin,_end);
  if(islink){
  return islink;
  }
  return false;
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JavaScript 乱码问题
Aug 06 Javascript
js语法学习之判断一个对象是否为数组
May 13 Javascript
javascript数组去重方法汇总
Apr 23 Javascript
基于jQuery插件实现环形图标菜单旋转切换特效
May 15 Javascript
js闭包引起的事件注册问题介绍
Mar 29 Javascript
SWFUpload多文件上传及文件个数限制的方法
May 31 Javascript
原生JS实现图片翻书效果
Feb 16 Javascript
基于JavaScript实现焦点图轮播效果
Mar 27 Javascript
vue实现nav导航栏的方法
Dec 13 Javascript
React中常见的动画实现的几种方式
Jan 10 Javascript
vue实现类似淘宝商品评价页面星级评价及上传多张图片功能
Oct 29 Javascript
微信小程序实现批量倒计时功能
Nov 01 Javascript
JavaScript错误处理操作实例详解
Jan 04 #Javascript
JSON基本语法及与JavaScript的异同实例分析
Jan 04 #Javascript
JavaScript解析及序列化JSON的方法实例分析
Jan 04 #Javascript
Node.js操作系统OS模块用法分析
Jan 04 #Javascript
Node.js console控制台简单用法分析
Jan 04 #Javascript
Node.js JSON模块用法实例分析
Jan 04 #Javascript
使用VUE+iView+.Net Core上传图片的方法示例
Jan 04 #Javascript
You might like
一个简单的自动发送邮件系统(二)
2006/10/09 PHP
模仿OSO的论坛(三)
2006/10/09 PHP
php zip文件解压类代码
2009/12/02 PHP
PHP swfupload图片上传的实例代码
2013/09/30 PHP
php获得用户ip地址的比较不错的方法
2014/02/08 PHP
利用PHP函数计算中英文字符串长度的方法
2014/11/11 PHP
php+mysql结合Ajax实现点赞功能完整实例
2015/01/30 PHP
PHP获取数组长度或某个值出现次数的方法
2015/02/11 PHP
YII动态模型(动态表名)支持分析
2016/03/29 PHP
总结对比php中的多种序列化
2016/08/28 PHP
PHP中phar包的使用教程
2017/06/14 PHP
PHP 返回数组后处理方法(开户成功后弹窗提示)
2017/07/03 PHP
PHP常用的类封装小结【4个工具类】
2019/06/28 PHP
js函数返回多个返回值的示例代码
2013/11/05 Javascript
javascript与有限状态机详解
2014/05/08 Javascript
Jquery根据浏览器窗口改变调整大小的方法
2017/02/07 Javascript
详解通过JSON数据使用VUE.JS
2017/05/26 Javascript
JavaScript实现移动端页面按手机屏幕分辨率自动缩放的最强代码
2017/08/18 Javascript
Vue常用指令详解分析
2018/08/19 Javascript
Vue实现购物小球抛物线的方法实例
2020/11/22 Vue.js
Python实现向QQ群成员自动发邮件的方法
2014/11/19 Python
Python实现获取照片拍摄日期并重命名的方法
2017/09/30 Python
python中datetime模块中strftime/strptime函数的使用
2018/07/03 Python
在cmder下安装ipython以及环境的搭建
2018/10/19 Python
对Pycharm创建py文件时自定义头部模板的方法详解
2019/02/12 Python
python爬虫 猫眼电影和电影天堂数据csv和mysql存储过程解析
2019/09/05 Python
Python3如何在Windows和Linux上打包
2020/02/25 Python
阿迪达斯俄罗斯官方商城:adidas俄罗斯
2017/03/08 全球购物
阿迪达斯英国官方网站:adidas英国
2019/08/13 全球购物
普通党员个人整改措施
2014/10/27 职场文书
党员剖析材料范文
2014/12/18 职场文书
2019年新郎保证书3篇
2019/10/17 职场文书
分析Java中Map的遍历性能问题
2021/06/26 Java/Android
详解CSS3.0(Cascading Style Sheet) 层叠级联样式表
2021/07/16 HTML / CSS
nginx中封禁ip和允许内网ip访问的实现示例
2022/03/17 Servers
Linux中各个目录的作用与内容
2022/06/28 Servers