你的位置:首页 > Java教程

[Java教程]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  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 id="grid-cell-0-0"></div>425       <div id="grid-cell-0-1"></div>426       <div id="grid-cell-0-2"></div>427       <div id="grid-cell-0-3"></div>428       <div id="grid-cell-1-0"></div>429       <div id="grid-cell-1-1"></div>430       <div id="grid-cell-1-2"></div>431       <div id="grid-cell-1-3"></div>432       <div id="grid-cell-2-0"></div>433       <div id="grid-cell-2-1"></div>434       <div id="grid-cell-2-2"></div>435       <div id="grid-cell-2-3"></div>436       <div id="grid-cell-3-0"></div>437       <div id="grid-cell-3-1"></div>438       <div id="grid-cell-3-2"></div>439       <div id="grid-cell-3-3"></div>440     </div>441   </header>442 </body>443 </html>