2048小游戏-JS实现（BUG调试中）

时间：2014-06-20 18:38:53 阅读：205 评论：0 收藏：0 [点我收藏+]
刚刚学习JS的菜鸟，游戏没有实现滑动效果。希望有前辈能指点一下······
定义的主要方法：
1.fuzhi()生成一对随机数，然后根据这对随机数取得一个随机单元格，先判断其是否为空，不为空，对其进行赋值为2的操作；为空，则再次调用fuzhi（）。
2.secai()遍历表格，根据单元格的数值改变单元格的背景颜色。
3.score()遍历单元格，计算实时总得分。
4.keyDown()主要方法，根据用户按上下左右键来进行不同的数值相加、消除动作。这一段代码写得很冗余·····
  1 <!DOCTYPE HTML>
  2 <html>
  3 <head>
  4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> 
  5     <title>1024</title>
  6     <style type="text/css">
  7         table{
  8             width: 400px;
  9             height: 400px;
 10             position: relative;
 11             left: 50%;
 12             margin-left: -200px;
 13         }
 14         p{
 15             text-align: center;
 16             font-weight: bolder;
 17         }
 18         tr td{
 19             width: 100px;
 20             height: 100px;
 21             font-size: 25px;
 22             text-align: center;
 23             font-weight: bold;
 24             border:2px solid #ffbbcc;
 25         }
 26     </style>
 27 </head>
 28 <body>
 29 <table id="table" style="border:1px solid #ffccee;background-color:#ffccee">
 30 <p>SCORE:<span id="score">0</span></p>
 31     <tbody id="tbody"></tbody>
 32 </table>
 33 <script type="text/javascript">
 34     for(i=1;i<=4;i++)
 35     {
 36         var row=document.createElement("tr");
 37         for(var j=1;j<=4;j++)
 38         {
 39             var cell=document.createElement("td");
 40             //cell.appendChild();
 41             row.appendChild(cell);
 42         }
 43         document.getElementById("tbody").appendChild(row);
 44     }
 45     function score()
 46     {
 47         var score=0;
 48         for(i=0;i<=3;i++)
 49         {
 50             for(j=0;j<=3;j++)
 51             {
 52                 if(document.all("table").rows[i].cells[j].innerHTML!="")
 53                 score+=parseInt(document.all("table").rows[i].cells[j].innerHTML);
 54             }
 55         }
 56         document.getElementById("score").innerHTML=score;
 57     }
 58     function secai()
 59     {
 60         for (var i = 0;i<=3;i++) 
 61         {
 62             for (var j=0; j <= 3; j++) {
 63                 if (parseInt(document.all("table").rows[i].cells[j].innerHTML)>=64) 
 64                     {document.all("table").rows[i].cells[j].style.backgroundColor="#ffeedd";}
 65                 else if (parseInt(document.all("table").rows[i].cells[j].innerHTML)>=32) 
 66                     {document.all("table").rows[i].cells[j].style.backgroundColor="#ffbcbc";}
 67                 else if (parseInt(document.all("table").rows[i].cells[j].innerHTML)>=16) {document.all("table").rows[i].cells[j].style.backgroundColor="#ffbbbb";}
 68                 else if  (parseInt(document.all("table").rows[i].cells[j].innerHTML)>=8) {document.all("table").rows[i].cells[j].style.backgroundColor="#ffeedd";}
 69                 else
 70                     {document.all("table").rows[i].cells[j].style.backgroundColor="#ffccee";}
 71             };
 72         };
 73     }
 74 
 75     function fuzhi()
 76     {
 77         var a=2;
 78         var i=Math.floor(Math.random()*4);//取得0到3随机整数
 79         var j=Math.floor(Math.random()*4);
 80         if(document.all("table").rows[i].cells[j].innerHTML=="")//如果单元格值为空
 81             {document.all("table").rows[i].cells[j].innerText=a;
 82             return;    }
 83         if(document.all("table").rows[i].cells[j].innerHTML!="")//如果单元格不为空
 84             fuzhi();
 85     }
 86     document.onkeydown=keyDown;
 87     function keyDown(e)
 88     {
 89         
 90         var keycode = event.keyCode;  
 91 
 92         
 93 　　 　if(keycode==37)//如果按左边箭头
 94         {
 95 
 96             for(i=3;i>=0;i--)
 97             {
 98                 for(j=3;j>=1;j--)
 99                 {
100                     if (document.all("table").rows[i].cells[j].innerHTML==document.all("table").rows[i].cells[j-1].innerHTML) 
101                         {
102                             if(document.all("table").rows[i].cells[j].innerHTML!="")
103                             {
104                                 document.all("table").rows[i].cells[j-1].innerHTML=parseInt(document.all("table").rows[i].cells[j].innerHTML)+parseInt(document.all("table").rows[i].cells[j-1].innerHTML);
105                                 document.all("table").rows[i].cells[j].innerHTML="";
106                             }
107                         }
108                     else if (document.all("table").rows[i].cells[j].innerHTML!=document.all("table").rows[i].cells[j-1].innerHTML) 
109                         {
110                             if (document.all("table").rows[i].cells[j-1].innerHTML==""&&document.all("table").rows[i].cells[j].innerHTML!="") 
111                                 {
112                                     if(j==3)
113                                         {
114                                             document.all("table").rows[i].cells[j-1].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
115                                             document.all("table").rows[i].cells[j].innerHTML="";
116                                         }
117                                     else if(j==2)
118                                         {
119                                             document.all("table").rows[i].cells[j-1].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
120                                             
121                                             document.all("table").rows[i].cells[j].innerHTML=document.all("table").rows[i].cells[j+1].innerHTML;
122                                             document.all("table").rows[i].cells[j+1].innerHTML="";
123 
124                                         }
125                                     else if(j==1)
126                                         {
127                                             document.all("table").rows[i].cells[j-1].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
128                                             
129                                             document.all("table").rows[i].cells[j].innerHTML=document.all("table").rows[i].cells[j+1].innerHTML;
130                                             
131                                             document.all("table").rows[i].cells[j+1].innerHTML=document.all("table").rows[i].cells[j+2].innerHTML;
132                                             document.all("table").rows[i].cells[j+2].innerHTML="";
133 
134                                         }
135                                 };
136                             
137                         };    
138 
139                 }
140                 
141             }
142         }
143         else if (keycode==38) 
144             {
145                 for(i=3;i>=1;i--)
146                     {
147                         for(j=3;j>=0;j--)
148                         {
149                             if (document.all("table").rows[i].cells[j].innerHTML==document.all("table").rows[i-1].cells[j].innerHTML) 
150                                 {
151                                     if(document.all("table").rows[i].cells[j].innerHTML!="")
152                                     {
153                                         document.all("table").rows[i-1].cells[j].innerHTML=parseInt(document.all("table").rows[i].cells[j].innerHTML)+parseInt(document.all("table").rows[i-1].cells[j].innerHTML);
154                                         document.all("table").rows[i].cells[j].innerHTML="";
155                                     }    
156                                 }
157                             else if (document.all("table").rows[i].cells[j].innerHTML!=document.all("table").rows[i-1].cells[j].innerHTML) 
158                                 {
159                                     if (document.all("table").rows[i-1].cells[j].innerHTML==""&&document.all("table").rows[i].cells[j].innerHTML!="") 
160                                         {
161                                             if(i==3)
162                                         {
163                                             document.all("table").rows[i-1].cells[j].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
164                                             document.all("table").rows[i].cells[j].innerHTML="";
165                                         }
166                                     else if(i==2)
167                                         {
168                                             document.all("table").rows[i-1].cells[j].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
169                                             
170                                             document.all("table").rows[i].cells[j].innerHTML=document.all("table").rows[i+1].cells[j].innerHTML;
171                                             document.all("table").rows[i+1].cells[j].innerHTML="";
172 
173                                         }
174                                     else if(i==1)
175                                         {
176                                             document.all("table").rows[i-1].cells[j].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
177                                             
178                                             document.all("table").rows[i].cells[j].innerHTML=document.all("table").rows[i+1].cells[j].innerHTML;
179                                             
180                                             document.all("table").rows[i+1].cells[j].innerHTML=document.all("table").rows[i+2].cells[j].innerHTML;
181                                             document.all("table").rows[i+2].cells[j].innerHTML="";
182 
183                                         }
184                                         };
185                                     
186                                 };    
187 
188                     }
189                 
190                 }
191 
192         }
193     　else if(keycode==39)//如果按you边箭头
194         {
195 
196             for(i=0;i<=3;i++)
197             {
198                 for(j=0;j<=2;j++)
199                 {
200                     if (document.all("table").rows[i].cells[j+1].innerHTML==document.all("table").rows[i].cells[j].innerHTML) 
201                         {
202                             if(document.all("table").rows[i].cells[j+1].innerHTML!="")
203                             {
204                                 document.all("table").rows[i].cells[j+1].innerHTML=parseInt(document.all("table").rows[i].cells[j+1].innerHTML)+parseInt(document.all("table").rows[i].cells[j].innerHTML);
205                                 document.all("table").rows[i].cells[j].innerHTML="";
206                             }                        
207                         }
208                     else if (document.all("table").rows[i].cells[j+1].innerHTML!=document.all("table").rows[i].cells[j].innerHTML) 
209                         {
210                             if (document.all("table").rows[i].cells[j+1].innerHTML==""&&document.all("table").rows[i].cells[j].innerHTML!="") 
211                                 {
212                                     if(j==0)
213                                         {
214                                             document.all("table").rows[i].cells[j+1].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
215                                             document.all("table").rows[i].cells[j].innerHTML="";
216                                         }
217                                     else if(j==1)
218                                         {
219                                             document.all("table").rows[i].cells[j+1].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
220                                             
221                                             document.all("table").rows[i].cells[j].innerHTML=document.all("table").rows[i].cells[j-1].innerHTML;
222                                             document.all("table").rows[i].cells[j-1].innerHTML="";
223 
224                                         }
225                                     else if(j==2)
226                                         {
227                                             document.all("table").rows[i].cells[j+1].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
228                                             
229                                             document.all("table").rows[i].cells[j].innerHTML=document.all("table").rows[i].cells[j-1].innerHTML;
230                                             
231                                             document.all("table").rows[i].cells[j-1].innerHTML=document.all("table").rows[i].cells[j-2].innerHTML;
232                                             document.all("table").rows[i].cells[j-2].innerHTML="";
233 
234                                         }
235                                 };
236                             
237                         };    
238 
239                 }
240                 
241             }
242         }
243         else if (keycode==40) 
244             {
245                 for(i=0;i<=2;i++)
246                     {
247                         for(j=0;j<=3;j++)
248                         {
249                             if (document.all("table").rows[i+1].cells[j].innerHTML==document.all("table").rows[i].cells[j].innerHTML) 
250                                 {
251                                     if(document.all("table").rows[i+1].cells[j].innerHTML!="")
252                                     {
253                                         document.all("table").rows[i+1].cells[j].innerHTML=parseInt(document.all("table").rows[i+1].cells[j].innerHTML)+parseInt(document.all("table").rows[i].cells[j].innerHTML);
254                                         document.all("table").rows[i].cells[j].innerHTML="";
255                                     }    
256                                 }
257                             else if (document.all("table").rows[i+1].cells[j].innerHTML!=document.all("table").rows[i].cells[j].innerHTML) 
258                                 {
259                                     if (document.all("table").rows[i+1].cells[j].innerHTML==""&&document.all("table").rows[i].cells[j].innerHTML!="") 
260                                         {
261                                             if(i==0)
262                                         {
263                                             document.all("table").rows[i+1].cells[j].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
264                                             document.all("table").rows[i].cells[j].innerHTML="";
265                                         }
266                                     else if(i==1)
267                                         {
268                                             document.all("table").rows[i+1].cells[j].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
269                                             
270                                             document.all("table").rows[i].cells[j].innerHTML=document.all("table").rows[i-1].cells[j].innerHTML;
271                                             document.all("table").rows[i-1].cells[j].innerHTML="";
272 
273                                         }
274                                     else if(i==2)
275                                         {
276                                             document.all("table").rows[i+1].cells[j].innerHTML=document.all("table").rows[i].cells[j].innerHTML;
277                                             
278                                             document.all("table").rows[i].cells[j].innerHTML=document.all("table").rows[i-1].cells[j].innerHTML;
279                                             
280                                             document.all("table").rows[i-1].cells[j].innerHTML=document.all("table").rows[i-2].cells[j].innerHTML;
281                                             document.all("table").rows[i-2].cells[j].innerHTML="";
282 
283                                         }
284                                         };
285                                     
286                                 };    
287 
288                     }
289                 
290                 }
291 
292         }
293 
294         fuzhi();
295         secai();
296         score();
297     }
298 </script>
299 </body>
300 </html>
2048小游戏-JS实现（BUG调试中）,布布扣,bubuko.com
2048小游戏-JS实现（BUG调试中）
标签：style class blog code java http
原文地址：http://www.cnblogs.com/twobrothers/p/3796353.html
踩
(0)
评论一句话评论（0）
分享档案
更多>
2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)
周排行