javascript 2048游戏
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>
