首页 > 代码库 > 2048小游戏-JS实现（BUG调试中）
2048小游戏-JS实现（BUG调试中）
刚刚学习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>
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。