8-5 代码展示：@未曾至

body{ background: url(http://img1.sycdn.imooc.com//53f314300001f03519201200.jpg) 170px -50px; } .cdinf{ position: absolute; top: 125px; left: 110px; font: 14px '微软雅黑'; color: white; text-align: left; z-index: 1; } .mask{ height: 500px; width: 500px; top: 131px; margin: 0 auto; background-color: black; opacity: 0.5; filter:alpha(opacity=50); display: none; position: absolute; z-index: 100; border-radius: 10px; } .success{ position: absolute; top: 255px; left: 519px; z-index: 101; display: none; font: bold 40px '微软雅黑'; color:#FF9999; } .fail{ position: absolute; top: 255px; left: 519px; z-index: 101; display: none; font: bold 40px '微软雅黑'; color:pink; } header{ display: block; margin: 0 auto; width: 500px; text-align: center; } header h1{ font-family: '微软雅黑'; font-size: 35px; font-weight: bold; color: #FF9999; margin: 20px auto 10px auto; } .inf{ margin: 0 auto; } header .newGameButton{ display: inline-block; width: 100px; padding: 7px 8px 8px 8px; background-color: pink; font: 15px '微软雅黑'; color: white; border-radius: 10px; text-decoration: none; margin-right: 10px; } .myscore{ margin-top: 0px; margin-bottom: 0px; } header .newGameButton:hover{ background-color: #FF9999; } #grid-container{ width: 460px; height: 460px; padding: 20px; margin: 20px auto 0 auto; background-color: pink; border-radius: 10px; position: relative; } .grid-cell{ width: 100px; height: 100px; border-radius: 6px; background-color: #FFCCC9; position: absolute; } .number-cell{ border-radius: 6px; font-family: Arial; font-size: 60px; font-weight: bold; line-height: 100px; text-align: center; position: absolute; }

var board = new Array(); var score = 0; var hasConflicted = new Array(); $(document).ready(function(){ newGame(); }); function newGame(){ //初始化操作 init(); //随机产生两个数字 generateOneNumber(); generateOneNumber(); } function init(){ for (var i = 0; i < 4; i++) { for (var j = 0; j < 4; j++) { var gridCell = $("#grid-cell-" + i + "-" + j); gridCell.css('top',getPosTop(i,j)); gridCell.css('left',getPosLeft(i,j)); } } for (var i = 0; i < 4; i++) { board[i] = new Array(); hasConflicted[i] = new Array(); for(var j = 0; j < 4; j++ ){ board[i][j] = 0; hasConflicted[i][j] = false; } } updateBoardView(); score = 0; updateScore( score ); $('.mask').css('display','none'); $('.fail').css('display','none'); $('.success').css('display','none'); } function updateBoardView(){ $(".number-cell").remove(); for(var i = 0; i < 4; i++){ for(var j = 0; j < 4; j++){ $("#grid-container").append( '<div class="number-cell" id="number-cell-'+i+'-'+j+'"></div>' );//这里的append及里面的引号使用值得注意 var theNumberCell = $('#number-cell-'+i+'-'+j); if(board[i][j] == 0){ theNumberCell.css('width','0px'); theNumberCell.css('height','0px'); theNumberCell.css('top',getPosTop(i,j)+50); theNumberCell.css('left',getPosLeft(i,j)+50); } else{ theNumberCell.css('width','100px'); theNumberCell.css('height','100px'); theNumberCell.css('top',getPosTop(i,j)); theNumberCell.css('left',getPosLeft(i,j)); theNumberCell.css('background-image',getNumberBackgroundColor(board[i][j])); theNumberCell.css('color',getNumberColor(board[i][j])); //theNumberCell.text(board[i][j]); } hasConflicted[i][j] = false; } } } function generateOneNumber(){ if( noSpace( board ) ){ return false; } //随机一个位置 var randx = parseInt(Math.floor(Math.random()*4)); var randy = parseInt(Math.floor(Math.random()*4)); var times = 0; while( times < 50 ){ if(board[randx][randy]==0){ break; } randx = parseInt(Math.floor(Math.random()*4)); randy = parseInt(Math.floor(Math.random()*4)); times++; } if( times == 50 ){ for( var i = 0; i < 4; i++){ for( var j = 0; j < 4; j++){ if( board[i][j] == 0 ){ randx = i; randy = j; break; } } } } //随机一个数字 var randNumber = Math.random() < 0.5 ? 2 : 4; //在随机位置上显示随机数字 board[randx][randy] = randNumber; showNumberWithAnimation(randx,randy,randNumber); return true; } $(document).keydown( function(event){ switch(event.keyCode){ //注意大小写，keycode中C是大写 case 37://left if( moveLeft() ){ setTimeout("generateOneNumber()",210); setTimeout("isGameOver()",300); } break; case 38://up if( moveUp() ){ setTimeout("generateOneNumber()",210); setTimeout("isGameOver()",300); } break; case 39://right if( moveRight() ){ setTimeout("generateOneNumber()",210); setTimeout("isGameOver()",300); } break; case 40://down if( moveDown() ){ setTimeout("generateOneNumber()",210); setTimeout("isGameOver()",300); } break; default: break; } }); function isGameOver(){ if( noSpace(board) && noMove(board) ){ gameOver(); } for(var i = 0; i < 4; i++){ for(var j = 0; j < 4; j++){ if( board[i][j] == 2048 ){ youWin(); } } } } function gameOver(){ $('.mask').show(); $('.fail').show(); } function youWin(){ $('.mask').show(); $('.success').show(); } function moveLeft(){ if(!canMoveLeft(board)){ return false; } //move left for(var i = 0;i < 4;i++){ for(var j = 1;j < 4;j++){ if( board[i][j] != 0 ){ for(var k = 0; k < j; k++){ if( board[i][k] == 0 && noBlockx(i,k,j,board) ){ //move left showMoveAnimation(i,j,i,k); //注意参数的顺序 board[i][k] = board[i][j]; board[i][j] = 0; continue; } else if( board[i][k] == board [i][j] && noBlockx(i,k,j,board) && !hasConflicted[i][k] ){ //move left showMoveAnimation(i,j,i,k); //add board[i][k] += board[i][j]; board[i][j] = 0; score += board[i][k]; updateScore( score ); hasConflicted[i][k] = true; continue; } } } } } setTimeout("updateBoardView()",200); return true; } function moveUp(){ if(!canMoveUp(board)){ return false; } //move up for(var i = 1;i < 4;i++){ for(var j = 0;j < 4;j++){ if( board[i][j] != 0 ){ for(var k = 0; k < i; k++){ if( board[k][j] == 0 && noBlocky(j,k,i,board) ){ //move left showMoveAnimation(i,j,k,j); //注意参数的顺序 board[k][j] = board[i][j]; board[i][j] = 0; continue; } else if( board[k][j] == board [i][j] && noBlocky(j,k,i,board) && !hasConflicted[k][j] ){ //move left showMoveAnimation(i,j,k,j); //add board[k][j] += board[i][j]; board[i][j] = 0; score += board[k][j]; updateScore( score ); hasConflicted[k][j] = true; continue; } } } } } setTimeout("updateBoardView()",200); return true; } function moveRight(){ if(!canMoveRight(board)){ return false; } //move left for(var i = 0;i < 4;i++){ for(var j = 2;j >= 0; j--){ if( board[i][j] != 0 ){ for(var k = 3; k > j; k--){ if( board[i][k] == 0 && noBlockx(i,j,k,board) ){ //move left showMoveAnimation(i,j,i,k); //注意参数的顺序 board[i][k] = board[i][j]; board[i][j] = 0; continue; } else if( board[i][k] == board [i][j] && noBlockx(i,j,k,board) && !hasConflicted[i][k] ){ //move left showMoveAnimation(i,j,i,k); //add board[i][k] += board[i][j]; board[i][j] = 0; score += board[i][k]; updateScore( score ); hasConflicted[i][k] = true; continue; } } } } } setTimeout("updateBoardView()",200); return true; } function moveDown(){ if(!canMoveDown(board)){ return false; } //move up for(var i = 2;i >= 0;i--){ for(var j = 0;j < 4;j++){ if( board[i][j] != 0 ){ for(var k = 3; k > i; k--){ if( board[k][j] == 0 && noBlocky(j,i,k,board) ){ //move left showMoveAnimation(i,j,k,j); //注意参数的顺序 board[k][j] = board[i][j]; board[i][j] = 0; continue; } else if( board[k][j] == board [i][j] && noBlocky(j,i,k,board) && !hasConflicted[k][j] ){ //move left showMoveAnimation(i,j,k,j); //add board[k][j] += board[i][j]; board[i][j] = 0; score += board[k][j]; updateScore( score ); hasConflicted[k][j] = true; continue; } } } } } setTimeout("updateBoardView()",200); return true; } function noMove( board ){ if( canMoveDown( board ) || canMoveRight( board )|| canMoveUp( board ) || canMoveLeft( board ) ){ return false; } return true; }

function showNumberWithAnimation( i, j, randNumber){ var numberCell = $('#number-cell-'+i+'-'+j); numberCell.css('background-image',getNumberBackgroundColor(randNumber)); numberCell.css('color',getNumberColor(randNumber)); //numberCell.text(randNumber); numberCell.animate({ width:"100px", height:"100px", top:getPosTop(i,j), left:getPosLeft(i,j) },150); } function showMoveAnimation(fromx,fromy,tox,toy){ var numberCell = $('#number-cell-'+fromx+'-'+fromy); numberCell.animate({ top:getPosTop(tox,toy), left:getPosLeft(tox,toy) },300); } function updateScore( score ){ $('#score').text( score ); }

function getPosTop(i,j){ return 20 + i * 120; } function getPosLeft(i,j){ return 20 + j * 120; } function getNumberBackgroundColor( number ){ switch( number ){ case 2:return "url(http://www.imooc.com/activity/2048/117139/pics/1.jpg)";break; case 4:return "url(http://www.imooc.com/activity/2048/117139/pics/2.jpg)";break; case 8:return "url(http://www.imooc.com/activity/2048/117139/pics/3.jpg)";break; case 16:return "url(http://www.imooc.com/activity/2048/117139/pics/4.jpg)";break; case 32:return "url(http://www.imooc.com/activity/2048/117139/pics/5.jpg)";break; case 64:return "url(http://www.imooc.com/activity/2048/117139/pics/6.jpg)";break; case 128:return "url(http://www.imooc.com/activity/2048/117139/pics/7.jpg)";break; case 256:return "url(http://www.imooc.com/activity/2048/117139/pics/8.jpg)";break; case 512:return "url(http://www.imooc.com/activity/2048/117139/pics/9.jpg)";break; case 1024:return "url(http://www.imooc.com/activity/2048/117139/pics/10.jpg)";break; case 2048:return "url(http://www.imooc.com/activity/2048/117139/pics/11.jpg)";break; } } function getNumberColor( number ){ if( number <= 4 ){ return "#776e65"; } return "white"; } function noSpace( board ){ for(var i = 0; i < 4; i++){ for(var j = 0; j < 4; j++){ if(board[i][j] == 0){ return false; } } } return true; } function canMoveLeft( board ){ for(var i = 0; i < 4; i++){ for(var j = 1; j < 4; j++){ if( board[i][j] != 0){ if( board[i][j-1]==0 || board[i][j-1]==board[i][j] ){ return true; } } } } return false; } function canMoveUp( board ){ for(var i = 1; i < 4; i++){ for(var j = 0; j < 4; j++){ if( board[i][j] != 0){ if( board[i-1][j]==0 || board[i-1][j]==board[i][j] ){ return true; } } } } return false; } function canMoveRight( board ){ for(var i = 0; i < 4; i++){ for(var j = 0; j < 3; j++){ if( board[i][j] != 0){ if( board[i][j+1]==0 || board[i][j+1]==board[i][j] ){ return true; } } } } return false; } function canMoveDown( board ){ for(var i = 0; i < 3; i++){ for(var j = 0; j < 4; j++){ if( board[i][j] != 0){ if( board[i+1][j]==0 || board[i+1][j]==board[i][j] ){ return true; } } } } return false; } function noBlockx(row,col1,col2,board){ for(var i = col1 + 1; i < col2; i++){ if( board[row][i] != 0 ){ return false; } } return true; } function noBlocky(col,row1,row2,board){ for(var i = row1 + 1; i < row2; i++){ if( board[i][col] != 0 ){ return false; } } return true; }