连连看算法实现web版

本文转载自查看原文 2013-04-08 11:43 1501 web前端/ 连连看/ js
假期闲来无事，写了一个连连看，基本思想是：
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>