1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
2 <html xmlns="http://www.w3.org/1999/xhtml">
3 <head>
4 <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5 <title>无标题文档</title>
6 <style>
7 header{display:block; margin:0 auto; width:100%; text-align:center;}
8 header h1{font-size:40px; font-family:Arial, Helvetica, sans-serif; font-weight:bold;}
9 header #newgamebutton{display:block; margin:10px auto; width:100px; padding:10px 10px; background-color:#8f7a66; font-family:Arial; color:white; border-radius:10px; text-decoration:none;}
10 header #newgamebutton:hover{background-color:#9f8b77;}
11 header p{font-family:Arial; font-size:25px; margin:10px auto;}
12
13 #grid-container{width:460px; height:460px; padding:20px; margin:20px auto; background-color:#bbada0; border-radius:10px; position:relative;}
14 .grid-cell{width:100px; height:100px; border-radius:6px; color:white; background-color:#ccc0b3; position:absolute; font-family:Arial; font-weight:bold; font-size:60px; line-height:100px; text-align:center;}
15
16 .gameover{display:block; margin:0 auto; width:500px; text-align:center; vertical-align:middle; position:absolute;}
17
18 .gameover p {
19 font-family: Arial;
20 font-size: 50px;
21 color: white;
22 margin: 20px auto;
23
24 margin-top: 150px;
25 }
26
27 .gameover span {
28 font-family: Arial;
29 font-size: 50px;
30 color: white;
31 margin: 20px auto;
32 }
33
34 #restartgamebutton {
35 display: block;
36 margin: 20px auto;
37
38 width: 180px;
39 padding: 10px 10px;
40 background-color: #8f7a66;
41
42 font-family: Arial;
43 font-size: 30px;
44 color: white;
45
46 border-radius: 10px;
47
48 text-decoration: none;
49 }
50
51 #restartgamebutton:hover {
52 background-color: #9f8b77;
53 }
54
55 #showGameover{width:100px; padding:10px 10px; background-color:#8f7a66; font-family:Arial; color:white; border-radius:10px; text-decoration:none; font-size:36px; position:absolute;}
56
57 </style>
58
59 <script>
60
61 window.onload = function (){
62 //newgame();
63 var showScore = document.getElementById(‘score‘);
64 score = 0;
65 init();
66 generateOneNumber();
67 generateOneNumber();
68
69 window.onkeydown = function (e){
70 var e = e || window.event;
71
72 switch(e.keyCode){
73 case 37:
74 if(canMoveLeft(board)){
75 moveLeft();
76 generateOneNumber();
77 isgameover();
78 }
79 break;
80 case 38:
81 if(canMoveUp(board)){
82 moveUp();
83 generateOneNumber();
84 isgameover();
85 }
86 break;
87 case 39:
88 if(canMoveRight(board)){
89 moveRight();
90 generateOneNumber();
91 isgameover();
92 }
93 break;
94 case 40:
95 if(canMoveDown(board)){
96 moveDown();
97 generateOneNumber();
98 isgameover();
99 }
100 break;
101 default :
102 break;
103 }
104 };
105 };
106
107 function generateOneNumber() {
108 if(!nospace(board)){
109 var randx = parseInt(Math.floor(Math.random() * 4));
110 var randy = parseInt(Math.floor(Math.random() * 4));
111 while (true) {
112 if (board[randx][randy] == 0) {
113 break;
114 }
115 var randx = parseInt(Math.floor(Math.random() * 4));
116 var randy = parseInt(Math.floor(Math.random() * 4));
117 }
118 var randNumber = Math.random() < 0.5 ? 2 : 4;
119 board[randx][randy] = randNumber;
120 var gridCell = document.getElementById(‘grid-cell-‘+randx+‘-‘+randy);
121 gridCell.innerHTML = randNumber;
122 //
123 }
124 else {
125 gameover();
126 }
127 }
128
129
130 function newgame() {
131 window.location.reload();
132
133 }
134
135 var board = new Array();
136 function init(){
137 for(var i=0;i<4;i++){
138 board[i] = new Array();
139 for(var j=0;j<4;j++){
140 board[i][j] = 0;
141
142 var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
143 gridCell.style.top = (20+i*120)+‘px‘;
144 gridCell.style.left = (20+j*120)+‘px‘;
145 }
146 }
147 }
148
149 function getNumberBackgroundColor(number) {
150 switch (number) {
151 case 2:return "#eee4da";break;
152 case 4:return "#ede0c8";break;
153 case 8:return "#f2b179";break;
154 case 16:return "#f59563";break;
155 case 32:return "#f67c5f";break;
156 case 64:return "#f65e3b";break;
157 case 128:return "#edcf72";break;
158 case 256:return "#edcc61";break;
159 case 512:return "#9c0";break;
160 case 1024:return "#33b5e5";break;
161 case 2048:return "#09c";break;
162 case 4096:return "#a6c";break;
163 case 8192:return "#93c";break;
164 }
165 }
166
167 function getNumberColor(number) {
168 if (number <= 4) {
169 return "#776e65"
170 }
171 return "white";
172 }
173
174 function nospace(board) {
175 for (var i = 0; i < 4; i++) {
176 for (var j = 0; j < 4; j++) {
177 if (board[i][j] == 0) {
178 return false;
179 }
180 }
181 }
182 return true;
183 }
184
185 function canMoveLeft(board) {
186 for (var i = 0; i < 4; i++) {
187 for (var j = 1; j < 4; j++) {
188 if (board[i][j] != 0) {
189 if (board[i][j - 1] == 0 || board[i][j - 1] == board[i][j]) {return true; }
190 }
191 }
192 }
193 return false;
194 }
195
196 function moveLeft() {
197 for (var i = 0; i < 4; i++) {
198 for (var j = 1; j < 4; j++) {
199 if (board[i][j] != 0) {
200 for (var k = j-1; k > -1; k--) {
201 if(board[i][k] == 0 || board[i][k] == board[i][j]){
202 board[i][k] = board[i][k] + board[i][j];
203 board[i][j] = 0;
204 var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
205 gridCell.innerHTML = ‘‘;
206 var gridCellk = document.getElementById(‘grid-cell-‘+i+‘-‘+k);
207 gridCellk.innerHTML = board[i][k];
208 gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
209 gridCell.style.backgroundColor = ‘#ccc0b3‘;
210 gridCellk.style.color = getNumberColor(board[i][k]);
211 gridCell.style.color = ‘white‘;
212 score += board[i][k];
213 var showScore = document.getElementById(‘score‘);
214 showScore.innerHTML = score;
215 j = k;
216 //
217 }
218 else {
219 break; //跳出 var k 的for循环
220 }
221
222 }
223 }
224 }
225 }
226 }
227
228 function canMoveUp(board) {
229 for (var j = 0; j < 4; j++) {
230 for (var i = 1; i < 4; i++) {
231 if (board[i][j] != 0) {
232 if (board[i - 1][j] == 0 || board[i - 1][j] == board[i][j]) {return true; }
233 }
234 }
235 }
236 return false;
237 }
238
239 function moveUp() {
240 for (var j = 0; j < 4; j++) {
241 for (var i = 1; i < 4; i++) {
242 if (board[i][j] != 0) {
243 for (var k = i-1; k > -1; k--) {
244 if(board[k][j] == 0 || board[k][j] == board[i][j]){
245 board[k][j] = board[k][j] + board[i][j];
246 board[i][j] = 0;
247 var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
248 gridCell.innerHTML = ‘‘;
249 var gridCellk = document.getElementById(‘grid-cell-‘+k+‘-‘+j);
250 gridCellk.innerHTML = board[k][j];
251 gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
252 gridCell.style.backgroundColor = ‘#ccc0b3‘;
253 gridCellk.style.color = getNumberColor(board[i][k]);
254 gridCell.style.color = ‘white‘;
255 score += board[k][j];
256 var showScore = document.getElementById(‘score‘);
257 showScore.innerHTML = score;
258 i = k;
259 //
260 }
261 else {
262 break; //跳出 var k 的for循环
263 }
264
265 }
266 }
267 }
268 }
269 }
270
271 function canMoveRight(board) {
272 for (var i = 0; i < 4; i++) {
273 for (var j = 2; j > -1; j--) {
274 if (board[i][j] != 0) {
275 if (board[i][j + 1] == 0 || board[i][j + 1] == board[i][j]) {return true; }
276 }
277 }
278 }
279 return false;
280 }
281
282 function moveRight() {
283 for (var i = 0; i < 4; i++) {
284 for (var j = 2; j > -1; j--) {
285 if (board[i][j] != 0) {
286 for (var k = j+1; k < 4; k++) {
287 if(board[i][k] == 0 || board[i][k] == board[i][j]){
288 board[i][k] = board[i][k] + board[i][j];
289 board[i][j] = 0;
290 var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
291 gridCell.innerHTML = ‘‘;
292 var gridCellk = document.getElementById(‘grid-cell-‘+i+‘-‘+k);
293 gridCellk.innerHTML = board[i][k];
294 gridCellk.style.backgroundColor = getNumberBackgroundColor(board[i][k]);
295 gridCell.style.backgroundColor = ‘#ccc0b3‘;
296 gridCellk.style.color = getNumberColor(board[i][k]);
297 gridCell.style.color = ‘white‘;
298 score += board[i][k];
299 var showScore = document.getElementById(‘score‘);
300 showScore.innerHTML = score;
301 j = k;
302 //
303 }
304 else {
305 break; //跳出 var k 的for循环
306 }
307
308 }
309 }
310 }
311 }
312 }
313
314 function canMoveDown(board) {
315 for (var j = 0; j < 4; j++) {
316 for (var i = 2; i > -1; i--) {
317 if (board[i][j] != 0) {
318 if (board[i + 1][j] == 0 || board[i + 1][j] == board[i][j]) {return true; }
319 }
320 }
321 }
322 return false;
323 }
324
325 function moveDown() {
326 for (var j = 0; j < 4; j++) {
327 for (var i = 2; i > -1; i--) {
328 if (board[i][j] != 0) {
329 for (var k = i+1; k < 4; k++) {
330 if(board[k][j] == 0 || board[k][j] == board[i][j]){
331 board[k][j] = board[k][j] + board[i][j];
332 board[i][j] = 0;
333 var gridCell = document.getElementById(‘grid-cell-‘+i+‘-‘+j);
334 gridCell.innerHTML = ‘‘;
335 var gridCellk = document.getElementById(‘grid-cell-‘+k+‘-‘+j);
336 gridCellk.innerHTML = board[k][j];
337 gridCellk.style.backgroundColor = getNumberBackgroundColor(board[k][j]);
338 gridCell.style.backgroundColor = ‘#ccc0b3‘;
339 gridCellk.style.color = getNumberColor(board[i][k]);
340 gridCell.style.color = ‘white‘;
341 score += board[k][j];
342 var showScore = document.getElementById(‘score‘);
343 showScore.innerHTML = score;
344 i = k;
345 //
346 }
347 else {
348 break; //跳出 var k 的for循环
349 }
350
351 }
352 }
353 }
354 }
355 }
356
357 function isgameover() {
358 if (nospace(board) && nomove(board)) {
359 gameover();
360 }
361 }
362
363 function nomove(board) {
364 if (canMoveDown(board) ||
365 canMoveLeft(board) ||
366 canMoveRight(board) ||
367 canMoveUp(board)) {
368 return false;
369 }
370 return true;
371 }
372
373 function bounce(obj,top){
374 clearInterval(obj.timer);
375 var nSpeed = 0;
376 var acceleration = 9;
377 var Flag = 0;
378
379 obj.timer = setInterval(function (){
380 nSpeed += acceleration;
381 nSpeed *= 0.93;
382
383 if(obj.offsetTop + nSpeed >= top){
384 obj.style.top = top + ‘px‘;
385 nSpeed *= -1;
386 }else{
387 if(Math.abs(nSpeed) < 4 && Math.abs(top-obj.offsetTop)<1){
388 clearInterval(obj.timer);
389 }
390 else{
391 obj.style.top = obj.offsetTop + nSpeed + ‘px‘;
392 }
393 }
394
395 },30);
396 }
397
398 function gameover() {
399 //alert("gameover!");
400 var gameover = document.createElement(‘div‘);
401 gameover.id = ‘showGameover‘;
402 gameover.innerHTML = ‘GAME OVER‘;
403 var gridContainer = document.getElementById(‘grid-container‘);
404 gridContainer.appendChild(gameover);
405 var showGameover = document.getElementById(‘showGameover‘);
406 showGameover.style.left = (gridContainer.offsetWidth - showGameover.offsetWidth ) / 2 + ‘px‘;
407
408 bounce(showGameover,200);
409 }
410
411
412 </script>
413
414 </head>
415
416 <body>
417 <header>
418 <!--<h1> 2048 </h1>-->
419 <a href="javascript:newgame();" id="newgamebutton"> New Game </a>
420
421 <p> score: <span id="score">0</span></p>
422
423 <div id="grid-container">
424 <div class="grid-cell" id="grid-cell-0-0"></div>
425 <div class="grid-cell" id="grid-cell-0-1"></div>
426 <div class="grid-cell" id="grid-cell-0-2"></div>
427 <div class="grid-cell" id="grid-cell-0-3"></div>
428 <div class="grid-cell" id="grid-cell-1-0"></div>
429 <div class="grid-cell" id="grid-cell-1-1"></div>
430 <div class="grid-cell" id="grid-cell-1-2"></div>
431 <div class="grid-cell" id="grid-cell-1-3"></div>
432 <div class="grid-cell" id="grid-cell-2-0"></div>
433 <div class="grid-cell" id="grid-cell-2-1"></div>
434 <div class="grid-cell" id="grid-cell-2-2"></div>
435 <div class="grid-cell" id="grid-cell-2-3"></div>
436 <div class="grid-cell" id="grid-cell-3-0"></div>
437 <div class="grid-cell" id="grid-cell-3-1"></div>
438 <div class="grid-cell" id="grid-cell-3-2"></div>
439 <div class="grid-cell" id="grid-cell-3-3"></div>
440 </div>
441 </header>
442 </body>
443 </html>
