1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd& ...
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>
海外公司注册、海外银行开户、跨境平台代入驻、VAT、EPR等知识和在线办理:https://www.xlkjsw.com
原标题:javascript 2048游戏
关键词:JavaScript
*特别声明:以上内容来自于网络收集,著作权属原作者所有,如有侵权,请联系我们:
admin#shaoqun.com
(#换成@)。