JavaScript實(shí)現(xiàn)連連看連線算法
更新時(shí)間：2022年05月09日 12:24:47 作者：瑟提曼的海
這篇文章主要為大家詳細(xì)介紹了JavaScript實(shí)現(xiàn)連連看連線算法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下
本文實(shí)例為大家分享了JavaScript實(shí)現(xiàn)連連看連線算法的多種情況，供大家參考，具體內(nèi)容如下
第一種情況為兩個(gè)精靈能通過一條直線連接，如下圖
代碼如下：
var self = this; //用self變量來保存當(dāng)下的這個(gè)this，以免在其他函數(shù)域中this指向不同對(duì)象而調(diào)用錯(cuò)誤
//直線連接的兩個(gè)對(duì)象
function isDirectLink(_begin,_end){
//若傳入的是同一對(duì)象，連線的長度為0，返回false row col 分別表示精靈的行號(hào)和列號(hào)
if(_begin.row == _end.row&&_begin.col==_end.col){
m_line.length = 0;
return false;
}
//行號(hào)相等時(shí)
if(_begin.row == _end.row){
var steps = _begin.col - _end.col;
var direction = steps/Math.abs(steps);
var row = _begin.row;
//判斷兩個(gè)對(duì)象直線距離上是否存在精靈
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;
}
//列號(hào)相等時(shí)
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;
};第二種情況為只需一個(gè)轉(zhuǎn)角就能連接兩個(gè)精靈 如下圖
function isOneCornerLink(_begin,_end){
if(_begin.row == _end.row&&_begin.col == _end.col){
m_line.length = 0;
return false;
}
//第一種拐點(diǎn) M_Point（）是自定義的一個(gè)函數(shù)
var point_1 = new M_Point(_begin.row,_end.col);
//用拐點(diǎn)分別連接兩個(gè)精靈
var islink_1 =(isDirectLink(_begin,point_1)&&isDirectLink(point_1,_end));
//若連接成功
if(islink_1){
//若拐點(diǎn)上無精靈，則返回true
if(self.m_sprites[point_1.row*m_col+point_1.col]==null){
return true;
}
}
m_line.length=0;
//第二種拐點(diǎn)
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;
};第三種情況是需要兩個(gè)拐點(diǎn)才能相連 這種情況比較多，列出兩種的圖，供理解代碼的時(shí)候參考
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;
}
//若兩個(gè)對(duì)象在同一行，且在邊框最外的兩行
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;
//若兩個(gè)對(duì)象在同一列，且在邊框最外的兩行
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點(diǎn)在最外一行，判斷end點(diǎn)對(duì)應(yīng)邊框上的點(diǎn)是否存在，再判斷是否能連接
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點(diǎn)在第八行
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點(diǎn)和end點(diǎn)列對(duì)應(yīng)的第八行上是否為空
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);
//若連線第一個(gè)拐點(diǎn)為空
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;
}以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
使用JavaScript實(shí)現(xiàn)一個(gè)物理模擬
最近掌門人在寫3D游戲,對(duì)于其中的物理效果很感興趣,今天我將使用純JavaScript來實(shí)現(xiàn)一個(gè)簡易的物理模擬,其中包括碰撞檢測與響應(yīng)、摩擦力與空氣阻力、以及物體的破壞效果,文中通過代碼示例講解的非常詳細(xì),需要的朋友可以參考下2024-01-01
小程序角標(biāo)的添加及綁定購物車數(shù)量進(jìn)行實(shí)時(shí)更新的實(shí)現(xiàn)代碼
這篇文章主要介紹了小程序角標(biāo)的添加及綁定購物車數(shù)量進(jìn)行實(shí)時(shí)更新的實(shí)現(xiàn)代碼,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
Egg.js構(gòu)建一個(gè)stream流式接口服務(wù)實(shí)現(xiàn)詳解
這篇文章主要為大家介紹了Egg.js構(gòu)建一個(gè)stream流式接口服務(wù)實(shí)現(xiàn)詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2023-09-09
echarts折線圖月份數(shù)據(jù)不足自動(dòng)補(bǔ)0和日期達(dá)到數(shù)據(jù)連續(xù)的效果(最新推薦)
這篇文章主要介紹了echarts折線圖月份數(shù)據(jù)不足自動(dòng)補(bǔ)0和日期達(dá)到數(shù)據(jù)連續(xù)的效果,本文通過實(shí)例代碼給大家介紹的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友參考下吧2024-03-03
在《理解Javascript_12_執(zhí)行模型淺析》一文中,我們初步的了解了執(zhí)行上下文與作用域的概念，那么這一篇將深入分析執(zhí)行上下文的構(gòu)建過程，了解執(zhí)行上下文、函數(shù)對(duì)象、作用域三者之間的關(guān)系。2010-10-10
JS中FileReader類實(shí)現(xiàn)文件上傳及時(shí)預(yù)覽功能
這篇文章主要為大家詳細(xì)介紹了JS中FileReader類實(shí)現(xiàn)文件上傳及時(shí)預(yù)覽功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-03-03
JavaScript 進(jìn)度條實(shí)現(xiàn)代碼(Firefox等相似瀏覽器下不支持)
JavaScript實(shí)現(xiàn)的進(jìn)度條，可惜在Firefox等相似瀏覽器下不支持(遠(yuǎn)程）2009-07-07
這篇文章主要是對(duì)js跑步算法的實(shí)現(xiàn)代碼進(jìn)行了詳細(xì)的分析介紹，需要的朋友可以過來參考下，希望對(duì)大家有所幫助2013-12-12
這篇文章主要為大家詳細(xì)介紹了three.js實(shí)現(xiàn)圓柱體的相關(guān)代碼，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2018-12-12
大家都知道JS是一門動(dòng)態(tài)語言，與傳統(tǒng)的c和c++最大的區(qū)別就是js是在運(yùn)行時(shí)動(dòng)態(tài)檢測值的類型和變化。this是js中的一個(gè)關(guān)鍵字，它代表當(dāng)前作用域的上下文環(huán)境，而且隨著上下文的改變而動(dòng)態(tài)變化。這篇文章我們將詳細(xì)介紹Javascript中綁定this的三種方法與簡單的比較。2016-10-10