2048小游戏-JS实现（BUG调试中）
2020-12-13 15:34
标签：style class blog code java http 刚刚学习JS的菜鸟，游戏没有实现滑动效果。希望有前辈能指点一下······ 定义的主要方法： 1.fuzhi()生成一对随机数，然后根据这对随机数取得一个随机单元格，先判断其是否为空，不为空，对其进行赋值为2的操作；为空，则再次调用fuzhi（）。 2.secai()遍历表格，根据单元格的数值改变单元格的背景颜色。 3.score()遍历单元格，计算实时总得分。 4.keyDown()主要方法，根据用户按上下左右键来进行不同的数值相加、消除动作。这一段代码写得很冗余····· 2048小游戏-JS实现（BUG调试中）,搜素材,soscw.com 2048小游戏-JS实现（BUG调试中）< 1 DOCTYPE HTML>
2 html>
3 head>
4 meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 title>1024title>
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">0span>p>
31 tbody id="tbody">tbody>
32 table>
33 script type="text/javascript">
34 for(i=1;i4;i++)
35 {
36 var row=document.createElement("tr");
37 for(var j=1;j4;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;i3;i++)
49 {
50 for(j=0;j3;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;i3;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;i3;i++)
197 {
198 for(j=0;j2;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;i2;i++)
246 {
247 for(j=0;j3;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>