连连看算法实现web版
假期闲来无事，写了一个连连看，基本思想是：
1.先找直线可以连接消除的，边缘的如果中间有图片也能消除；
2.找转一个弯可以消除的（A和B），看是否存在一个点C既可以和A消除又可以跟B消除；
3.找转两个弯可以消除的（A和B）,看是否存在一个点C既可以和A转个弯消除，又可以和B直线消除；
代码如下（代码不多，所以注释就省略了，莫喷，图片无法提供下载所以就都贴到上面去了，右键另存为吧），希望高手能指点，如果有更好的算法一起分享。
感谢 @key yao 找到的bug，代码更新了，欢迎指出新的bug。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>连连看</title> 6 <style> 7 body,div{ 8 margin:0; 9 padding:0; 10 } 11 body{ 12 text-align:center; 13 } 14 #wrapper{ 15 position:absolute; 16 top:50%; 17 left:50%; 18 margin-top:-240px; 19 margin-left:-240px; 20 width:480px; 21 height:480px; 22 } 23 #canvas{ 24 background-color:gray; 25 } 26 </style> 27 </head> 28 <body> 29 <div id="wrapper"></div> 30 <script type="text/javascript"> 31 (function(){ 32 var LinkGame = { 33 filePath : "images/", 34 level : 1, 35 images : ["1.gif","2.gif","3.gif","4.gif","5.gif","6.gif","7.gif","8.gif","9.gif","10.gif","11.gif","12.gif","13.gif","14.gif","15.gif","16.gif","17.gif","18.gif","19.gif","20.gif"], 36 init : function(){ 37 var that = this; 38 that.createPanel(3); 39 that.bindEvent(); 40 }, 41 //level: 1(4*4) 2(8*8) 3(12*12) 42 createPanel : function(level){ 43 if(level > 3){ 44 return; 45 } 46 var that = this, 47 wrapper = document.getElementById("wrapper"), 48 count = 16*level*level, 49 content = "<div id='canvas' style='width:"+4*level*35+"px;height:"+4*level*39+"px'>", 50 contentArr = [], 51 randomImg = 0, 52 randomIndex = 0, 53 position = []; 54 that.level = level; 55 for(var i = 0;i < count;i++){ 56 if(i % 2 == 0){ 57 randomImg=parseInt(Math.random()*19); 58 } 59 contentArr.push(" style='width:35px;height:39px;float:left;cursor:pointer' class='image"+randomImg+"'><img src='"+that.filePath+that.images[randomImg]+"'/></div>"); 60 } 61 for(var j = 0;j < count;j++){ 62 randomIndex=parseInt(Math.random()*contentArr.length); 63 //row column 64 position = [parseInt(j/(level*4)),j%(level*4)]; 65 content += "<div id='position_"+position[0]+"_"+position[1]+"'"+contentArr.splice(randomIndex,1); 66 } 67 content += "</div>"; 68 wrapper.innerHTML=content; 69 }, 70 bindEvent : function(){ 71 var target = null, 72 clickTime = 0, 73 that = this, 74 wrapper = document.getElementById("wrapper"), 75 canvas = document.getElementById("canvas"), 76 elem1 = null, 77 elem2 = null, 78 parent1 = null, 79 parent2 = null, 80 islink = false, 81 tagname; 82 helper.addEventHandler(canvas,'click',function(e){ 83 e = e || window.event; 84 if(e.target){ 85 target = e.target; 86 }else{ 87 target = e.srcElement; 88 } 89 tagName = target.tagName; 90 if(tagName != "IMG"){ 91 return; 92 } 93 if(clickTime == 2){ 94 clickTime = 0; 95 elem1 = null; 96 elem2 = null; 97 } 98 99 if(clickTime == 0){ 100 elem1 = target; 101 parent1 = elem1.parentNode; 102 parent1.setAttribute("clicked","clicked"); 103 parent1.style.outline='1px solid red'; 104 }else{ 105 elem2 = target; 106 parent2 = elem2.parentNode; 107 if(parent1.getAttribute('id') == parent2.getAttribute('id')){ 108 clickTime = 0; 109 parent1.setAttribute("clicked",""); 110 parent1.style.outline=''; 111 elem1 = null; 112 elem2 = null; 113 return; 114 } 115 parent2.style.outline='1px solid red'; 116 islink = that.isLink(parent1,parent2); 117 if(islink){ 118 that.removeLinked(parent1,parent2); 119 }else{ 120 that.cancelLinked(parent1,parent2); 121 } 122 parent1.style.outline=''; 123 parent2.style.outline=''; 124 } 125 clickTime++; 126 127 }); 128 }, 129 isLink : function(elem1,elem2){ 130 var that = this; 131 if(!that.isSameImg(elem1,elem2)){ 132 return false; 133 } 134 var islink = that.isOneDerictLine(elem1,elem2) || that.isTwoLine(elem1,elem2) || that.isThreeLine(elem1,elem2); 135 return islink; 136 }, 137 isOneDerictLine : function(elem1,elem2){ 138 var elem1Id = elem1.getAttribute('id'), 139 elem2Id = elem2.getAttribute('id'), 140 elem1Row = elem1Id.split("_")[1], 141 elem2Row = elem2Id.split("_")[1], 142 elem1Column = elem1Id.split("_")[2], 143 elem2Column = elem2Id.split("_")[2]; 144 if(elem1Id == elem2Id){ 145 return false; 146 } 147 var that = this; 148 if(elem1Row == elem2Row){ 149 if(elem1Row == 0 || elem1Row == (that.level*4-1)){ 150 return true; 151 }else{ 152 var dValue = Math.abs(elem1Column-elem2Column); 153 if(dValue == 1){ 154 return true; 155 }else{ 156 var minValue = Math.min(elem1Column,elem2Column); 157 var maxValue = Math.max(elem1Column,elem2Column); 158 var tempElem = null; 159 for(var i=1;i<maxValue-minValue;i++){ 160 tempElem = document.getElementById("position_"+elem1Row+"_"+(minValue+i)+""); 161 //alert("position_"+elem1Row+"_"+(minValue+i)+""); 162 if(tempElem.childNodes.length > 0){ 163 return false; 164 } 165 } 166 return true; 167 } 168 } 169 170 }else if( elem1Column == elem2Column){ 171 if(elem1Column == 0 || elem1Column == (that.level*4-1)){ 172 return true; 173 }else{ 174 var minValue = Math.min(elem1Row,elem2Row); 175 var maxValue = Math.max(elem1Row,elem2Row); 176 var tempElem = null; 177 for(var i=1;i<(maxValue-minValue);i++){ 178 tempElem = document.getElementById("position_"+(minValue+i)+"_"+elem1Column+""); 179 if(tempElem.childNodes.length > 0){ 180 return false; 181 } 182 } 183 return true; 184 } 185 }else{ 186 return false; 187 } 188 189 }, 190 isOneLine : function(elem1,elem2){ 191 var elem1Id = elem1.getAttribute('id'), 192 elem2Id = elem2.getAttribute('id'), 193 elem1Row = elem1Id.split("_")[1], 194 elem2Row = elem2Id.split("_")[1], 195 elem1Column = elem1Id.split("_")[2], 196 elem2Column = elem2Id.split("_")[2]; 197 var that = this; 198 if(elem1Id == elem2Id){ 199 return true; 200 } 201 if(elem1Row == elem2Row){ 202 var dValue = Math.abs(elem1Column-elem2Column); 203 if(dValue == 1){ 204 return true; 205 }else{ 206 var minValue = Math.min(elem1Column,elem2Column); 207 var maxValue = Math.max(elem1Column,elem2Column); 208 var tempElem = null; 209 for(var i=1;i<maxValue-minValue;i++){ 210 tempElem = document.getElementById("position_"+elem1Row+"_"+(minValue+i)+""); 211 //alert("position_"+elem1Row+"_"+(minValue+i)+""); 212 if(tempElem.childNodes.length > 0){ 213 return false; 214 } 215 } 216 return true; 217 } 218 }else if( elem1Column == elem2Column){ 219 var minValue = Math.min(elem1Row,elem2Row); 220 var maxValue = Math.max(elem1Row,elem2Row); 221 var tempElem = null; 222 for(var i=1;i<(maxValue-minValue);i++){ 223 tempElem = document.getElementById("position_"+(minValue+i)+"_"+elem1Column+""); 224 if(tempElem.childNodes.length > 0){ 225 return false; 226 } 227 } 228 return true; 229 }else{ 230 return false; 231 } 232 233 }, 234 isTwoLine : function(elem1,elem2){ 235 var that = this, 236 elem1Id = elem1.getAttribute('id'), 237 elem2Id = elem2.getAttribute('id'), 238 elem1Row = elem1Id.split("_")[1], 239 elem2Row = elem2Id.split("_")[1], 240 elem1Column = elem1Id.split("_")[2], 241 elem2Column = elem2Id.split("_")[2]; 242 var tempElem1Id = "position_"+elem1Row+"_"+elem2Column+""; 243 var tempElem2Id = "position_"+elem2Row+"_"+elem1Column+""; 244 var tempElem1 = document.getElementById(tempElem1Id); 245 var tempElem2 = document.getElementById(tempElem2Id); 246 if((tempElem1.childNodes.length == 0 && that.isOneLine(tempElem1,elem1) && that.isOneLine(tempElem1,elem2))||(tempElem2.childNodes.length == 0 && that.isOneLine(tempElem2,elem1) && that.isOneLine(tempElem2,elem2))){ 247 return true; 248 }else{ 249 return false; 250 } 251 }, 252 isThreeLine : function(elem1,elem2){ 253 var that = this, 254 elem1Id = elem1.getAttribute('id'), 255 elem2Id = elem2.getAttribute('id'), 256 elem1Row = elem1Id.split("_")[1], 257 elem2Row = elem2Id.split("_")[1], 258 elem1Column = elem1Id.split("_")[2], 259 elem2Column = elem2Id.split("_")[2], 260 tempElem1, 261 tempElem2; 262 for(var i = 0;i < (that.level)*4;i++){ 263 tempElem1 = document.getElementById("position_"+elem1Row+"_"+i+""); 264 tempElem2 = document.getElementById("position_"+i+"_"+elem1Column+""); 265 if(that.isOneLine(tempElem1,elem1) && that.isTwoLine(tempElem1,elem2) && tempElem1.childNodes.length == 0){ 266 return true; 267 }else if(that.isOneLine(tempElem2,elem1) && that.isTwoLine(tempElem2,elem2) && tempElem2.childNodes.length == 0){ 268 return true; 269 } 270 } 271 var isOneLineLeft = that.isOneLine(document.getElementById("position_"+elem1Row+"_0"),elem1)&& 272 that.isOneLine(document.getElementById("position_"+elem2Row+"_0"),elem2) && 273 (elem1.getAttribute('id') == ("position_"+elem1Row+"_0") || document.getElementById("position_"+elem1Row+"_0").childNodes.length == 0)&& 274 (elem2.getAttribute('id') == ("position_"+elem2Row+"_0") || document.getElementById("position_"+elem2Row+"_0").childNodes.length == 0); 275 var isOneLineRight = that.isOneLine(document.getElementById("position_"+elem1Row+"_"+(that.level*4-1)+""),elem1)&& 276 that.isOneLine(document.getElementById("position_"+elem2Row+"_"+(that.level*4-1)+""),elem2)&& 277 (elem1.getAttribute('id') == ("position_"+elem1Row+"_"+(that.level*4-1)+"") || document.getElementById("position_"+elem1Row+"_"+(that.level*4-1)+"").childNodes.length == 0) && 278 (elem2.getAttribute('id') == ("position_"+elem2Row+"_"+(that.level*4-1)+"") || document.getElementById("position_"+elem2Row+"_"+(that.level*4-1)+"").childNodes.length == 0); 279 var isOneLineTop = that.isOneLine(document.getElementById("position_0_"+elem1Column+""),elem1) && 280 that.isOneLine(document.getElementById("position_0_"+elem2Column+""),elem2) && 281 (elem1.getAttribute('id') == ("position_0_"+elem1Column+"") || document.getElementById("position_0_"+elem1Column+"").childNodes.length == 0) && 282 (elem2.getAttribute('id') == ("position_0_"+elem2Column+"") || document.getElementById("position_0_"+elem2Column+"").childNodes.length == 0); 283 var isOneLineBottom = that.isOneLine(document.getElementById("position_"+(that.level*4-1)+"_"+elem1Column+""),elem1) && 284 that.isOneLine(document.getElementById("position_"+(that.level*4-1)+"_"+elem2Column+""),elem2) && 285 (elem1.getAttribute('id') == ("position_"+(that.level*4-1)+"_"+elem1Column+"") || document.getElementById("position_"+(that.level*4-1)+"_"+elem1Column+"").childNodes.length == 0) && 286 (elem2.getAttribute('id') == ("position_"+(that.level*4-1)+"_"+elem2Column+"") || document.getElementById("position_"+(that.level*4-1)+"_"+elem2Column+"").childNodes.length == 0); 287 if(isOneLineLeft || isOneLineRight || isOneLineTop || isOneLineBottom){ 288 return true; 289 }else{ 290 return false; 291 } 292 }, 293 removeLinked : function(elem1,elem2){ 294 elem1.style.cursor = "auto"; 295 elem2.style.cursor = "auto"; 296 elem1.removeChild(elem1.firstChild); 297 elem2.removeChild(elem2.firstChild); 298 }, 299 isSameImg : function(elem1,elem2){ 300 return elem1.getAttribute('class') == elem2.getAttribute('class'); 301 }, 302 cancelLinked : function(elem1,elem2){} 303 }; 304 var helper = { 305 addEventHandler : function (oElement, sEvent, fnHandler) { 306 oElement.addEventListener ? oElement.addEventListener(sEvent, fnHandler, false) : oElement.attachEvent("on" + sEvent, fnHandler) 307 } 308 } 309 310 LinkGame.init(); 311 })(); 312 </script> 313 </body> 314 </html>
