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 相关文章推荐
父窗口获取弹出子窗口文本框的值
Jun 27 Javascript
利用Ext Js生成动态树实例代码
Sep 08 Javascript
将CKfinder整合进CKEditor3.0的新方法
Jan 10 Javascript
JS修改css样式style浅谈
May 06 Javascript
原生javascript实现简单的datagrid数据表格
Jan 02 Javascript
Jquery实现地铁线路指示灯提示牌效果的方法
Mar 02 Javascript
简述AngularJS的控制器的使用
Jun 16 Javascript
AngularJS用户选择器指令实例分析
Nov 04 Javascript
原生JS和jQuery操作DOM对比总结
Jan 19 Javascript
angular实现IM聊天图片发送实例
May 08 Javascript
浅析JavaScript中的平稳退化(graceful degradation)
Jul 24 Javascript
WebGL学习教程之Three.js学习笔记(第一篇)
Apr 25 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
PHP漏洞全解(详细介绍)
2012/11/13 PHP
php判断上传的Excel文件中是否有图片及PHPExcel库认识
2013/01/11 PHP
Thinkphp中的curd应用实用要点
2015/01/04 PHP
thinkPHP框架通过Redis实现增删改查操作的方法详解
2019/05/13 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
如何重写Laravel异常处理类详解
2020/12/20 PHP
兼容IE与firefox火狐的回车事件(js与jquery)
2010/10/20 Javascript
jQuery制作简洁的图片轮播效果
2015/04/03 Javascript
浅谈javascript中call()、apply()、bind()的用法
2015/04/20 Javascript
基于Vue.js实现数字拼图游戏
2016/08/02 Javascript
JS中的Replace()传入函数时的用法详解
2017/09/11 Javascript
JavaScript满天星导航栏实现方法
2018/03/08 Javascript
JS代码实现电脑配置检测功能
2018/03/21 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
2019/11/07 Javascript
使用kbone解决Vue项目同时支持小程序问题
2019/11/08 Javascript
vue项目前端微信JSAPI与外部H5支付相关实现过程及常见问题
2020/04/14 Javascript
Vue作用域插槽实现方法及作用详解
2020/07/08 Javascript
vue项目中openlayers绘制行政区划
2020/12/24 Vue.js
Vue实现一种简单的无限循环滚动动画的示例
2021/01/10 Vue.js
[01:04:05]Mineski vs TNC 2019国际邀请赛小组赛 BO2 第一场 8.15
2019/08/16 DOTA
Python中用于计算对数的log()方法
2015/05/15 Python
Python语言实现机器学习的K-近邻算法
2015/06/11 Python
深入理解Django中内置的用户认证
2017/10/06 Python
给你选择Python语言实现机器学习算法的三大理由
2017/11/15 Python
Python中super函数的用法
2017/11/17 Python
Java文件与类动手动脑实例详解
2019/11/10 Python
Scrapy框架基本命令与settings.py设置
2020/02/06 Python
Pycharm 使用 Pipenv 新建的虚拟环境(图文详解)
2020/04/16 Python
python获取命令行参数实例方法讲解
2020/11/02 Python
Python Process创建进程的2种方法详解
2021/01/25 Python
html5 利用canvas手写签名并保存的实现方法
2018/07/12 HTML / CSS
荷兰网上鞋店:Ziengs.nl
2017/01/02 全球购物
西班牙用户之间买卖视频游戏的平台:Wakkap
2020/03/21 全球购物
我的梦想演讲稿500字
2014/08/21 职场文书
SpringBoot2零基础到精通之异常处理与web原生组件注入
2022/03/22 Java/Android
MYSQL优化之数据表碎片整理详解
2022/04/03 MySQL