8-4 代码展示：@大花猫

#title{ font-family: Arial; font-size: 16px; /* font-weight: bold; */ text-shadow:none; margin:10px auto; } #newgamebutton{ display: block; margin: 10px auto; width: 100px; padding: 5px 5px; background-color: #8f7a66; font-family: Arial; color: white; border-radius: 8px; text-decoration: none; text-align: center; text-shadow:none; } #newgamebutton:hover{ background-color: #9f8b77; } #scoreText{ font-family: Arial; font-size: 16px; color: gray; margin: 8px auto; text-align: center; text-shadow:none; } #grid-container{ width: gridContainerWidth; height: gridContainerWidth; padding: cellSpace; margin: 10px auto; background-color: #bbada0; border-radius: 10px; position: relative; } .grid-cell{ width: cellSideLength; height: cellSideLength; border-radius: 10px; background-color: #ccc0b3; position: absolute; text-shadow:none; } .number-cell{ border-radius: 10px; font-family: Arial; font-weight: bold; font-size: cellSideLength/5; line-height: cellSideLength; text-align: center; text-shadow:none; position: absolute; } /*弹窗样式 .black_overlay{ display: none; position: absolute; top: 0%; left: 0%; width: 100%; height: 100%; background-color: black; z-index:1001; -moz-opacity: 0.8; opacity:.80; filter: alpha(opacity=88); } .white_content { display: none; position: absolute; top: 20%; left: 20%; width: 50%; height: 50%; padding: 5%; border: 0px solid gray; background-color: white; z-index:1002; overflow: auto; } */

documentWith = window.screen.availWidth < window.screen.availHeight ? window.screen.availWidth:window.screen.availHeight; gridContainerWidth = 0.79 * documentWith; cellSideLength = 0.16 * documentWith; cellSpace = 0.03 * documentWith; function getPosTop(i, j){ return cellSpace+i*(cellSpace + cellSideLength); } function getPosLeft(i, j){ return cellSpace+j*(cellSpace + cellSideLength); } function getNumberBackgroundColor(number){ switch(number){ case 2: return "#eee4da"; break; case 4: return "#ede0c8"; break; case 8: return "#f2b179"; break; case 16: return "#f59563"; break; case 32: return "#f07c5f"; break; case 64: return "#ff5e3b"; break; case 128: return "#edcf72"; break; case 256: return "#fd0361"; break; case 512: return "#9c0"; break; case 1024: return "#33b5e5"; break; case 2048: return "#09c"; break; case 4096: return "#a6c"; break; case 8192: return "#93c"; break; case 16384: return "#888"; break; default: return "#111";break; } return "black"; } function getTextValue(number){ switch(number){ case 2: return "小白"; break; case 4: return "实习僧"; break; case 8: return "码农"; break; case 16: return "程序猿"; break; case 32: return "攻城狮"; break; case 64: return "项目经理"; break; case 128: return "部门主管"; break; case 256: return "经理秘书"; break; case 512: return "总经理"; break; case 1024: return "执行官"; break; case 2048: return "董事长"; break; case 4096: return "嘉诚女婿"; break; case 8192: return "盖茨基友"; break; case 16384: return "~神~"; break; case 16384: return "~超神~"; break; default: return "END";break; } return "black"; } 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 canMoveRight(board){ for(var i=0; i<4; i++){ for(var j=2; j>=0; 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 j=0; j<4; j++){ for(var i=1; i<4; i++){ if(board[i][j] != 0){ if(board[i-1][j] == 0 || board[i-1][j] == board[i][j]){ return true; } } } } return false; } function canMoveDown(board){ for(var j=0; j<4; j++){ for(var i=2; i>=0; i--){ if(board[i][j] != 0){ if(board[i+1][j] == 0 || board[i+1][j] == board[i][j]){ return true; } } } } return false; } function noBlockHorizontal(row, col1, col2, board){ for(var i=col1+1; i<col2; i++){ if(board[row][i] != 0){ return false; } } return true; } function noBlockVertical(row1, row2, col, board){ for(var i=row1+1; i<row2; i++){ if(board[i][col] != 0){ return false; } } return true; } function noMove(board){ if(canMoveDown(board) ||canMoveUp(board) ||canMoveRight(board) ||canMoveLeft(board)){ return false; } return true; } function uploadGrade(){ }

function showNumberWithAnimation(i, j, randNumber){ var numberCell = $('#number-cell-'+i+"-"+j); numberCell.css('background-color', getNumberBackgroundColor(randNumber)); numberCell.css('color', getNumberColor(randNumber)); numberCell.text(getTextValue(randNumber)); numberCell.animate({ width:cellSideLength*1.2, height:cellSideLength*1.2, top:getPosTop(i, j)-cellSideLength*0.1, left:getPosLeft(i, j)-cellSideLength*0.1 }, 100); numberCell.animate({ width:cellSideLength, height:cellSideLength, top:getPosTop(i, j), left:getPosLeft(i, j) }, 100); } function showMoveAnimation(fromx, fromy, tox, toy){ var numberCell = $('#number-cell-'+fromx+"-"+fromy); numberCell.animate({ top:getPosTop(tox, toy), left:getPosLeft(tox, toy) }, 200); } function updateScore(score, currentScore){ $("#score").text(score); if(currentPosition < currentScore){ currentPosition = currentScore; $("#position").text(getTextValue(currentPosition)); } }

var board = new Array(); var score = 0;//分数 var currentPosition = 0;//当前职位 var hasConflicted = new Array();//冲突事件 var isGameOverFlag = false;//是否结束 var isMoving = false;//关闭操作 var canScroll = true;//禁用滚屏 $(document).ready(function(){ prepareForMobile(); newgame(); }); function prepareForMobile(){ if( documentWith > 400){ //documentWith = 400; gridContainerWidth = 316; cellSpace = 12; cellSideLength = 64; } $('#grid-container').css('width', gridContainerWidth - 2*cellSpace); $('#grid-container').css('height', gridContainerWidth - 2*cellSpace); $('#grid-container').css('padding', cellSpace); $('#grid-container').css('border-radius', 0.02*gridContainerWidth); $('.grid-cell').css('width', cellSideLength); $('.grid-cell').css('height', cellSideLength); $('.grid-cell').css('border-radius', 0.02*cellSideLength); } function newgame(){ isGameOverFlag = false; currentPosition = 0; score = 0; init(); generateOneNumber(); generateOneNumber(); } function init(){ updateScore(score, 2) 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(); } 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>'); 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)+cellSideLength/2); theNumberCell.css('left', getPosLeft(i, j)+cellSideLength/2); }else{ theNumberCell.css('width', cellSideLength); theNumberCell.css('height', cellSideLength); theNumberCell.css('top', getPosTop(i, j)); theNumberCell.css('left', getPosLeft(i, j)); theNumberCell.css('background-color', getNumberBackgroundColor(board[i][j])); theNumberCell.css('color', getNumberColor(board[i][j])); theNumberCell.text(getTextValue(board[i][j])); } hasConflicted[i][j] = false; } } $('.number-cell').css('line-height', cellSideLength+'px'); $('.number-cell').css('font-size', 0.2 * cellSideLength+'px'); // $('.number-cell').css('text-shadow', 'none'); } 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; } } } } //随机一个数字 var randNumber = Math.random() < 0.5 ? 2 : 4; //显示随机数字 board[randx][randy] = randNumber; updateScore(score, randNumber); //动画 showNumberWithAnimation(randx, randy, randNumber); //开启操作 isMoving = false; return true; } $(document).keydown(function(event){ if(!canScroll){ switch(event.keyCode){ case 37: event.preventDefault();//remove按键默认效果 if(!isGameOverFlag){ if(!isMoving){ if(moveLeft()){ isMoving = true; setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } } }else{ gameOver(); } break; case 38: event.preventDefault();//remove按键默认效果 if(!isGameOverFlag){ if(!isMoving){ if(moveUp()){ isMoving = true;//关闭操作 setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } } }else{ gameOver(); } break; case 39: event.preventDefault();//remove按键默认效果 if(!isGameOverFlag){ if(!isMoving){ if(moveRight()){ isMoving = true; setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } } }else{ gameOver(); } break; case 40: event.preventDefault();//remove按键默认效果 if(!isGameOverFlag){ if(!isMoving){ if(moveDown()){ isMoving = true; setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 300); } } }else{ gameOver(); } break; default: break; } } }) document.addEventListener('touchstart',function(event){ startx = event.touches[0].pageX; starty = event.touches[0].pageY; }); document.addEventListener('touchmove',function(event){ if(!canScroll){ event.preventDefault();//remove按键默认效果 } }); document.addEventListener('touchend',function(event){ endx = event.changedTouches[0].pageX; endy = event.changedTouches[0].pageY; var deltax = endx - startx; var deltay = endy - starty; var moveLength = 0.05*documentWith; if(moveLength > 30){ moveLength = 30; } if(Math.abs(deltax)<moveLength && Math.abs(deltay)<moveLength){ return; } if(!canScroll){ if(Math.abs(deltax) >= Math.abs(deltay)){ if(deltax > 0){ if(!isGameOverFlag){ if(!isMoving){ if(moveRight()){ isMoving = true; setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 550); } } }else{ gameOver(); } }else{ if(!isGameOverFlag){ if(!isMoving){ if(moveLeft()){ isMoving = true; setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 550); } } }else{ gameOver(); } } }else{ if(deltay > 0){ if(!isGameOverFlag){ if(!isMoving){ if(moveDown()){ isMoving = true; setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 550); } } }else{ gameOver(); } }else{ if(!isGameOverFlag){ if(!isMoving){ if(moveUp()){ isMoving = true; setTimeout("generateOneNumber()", 210); setTimeout("isGameOver()", 550); } } }else{ gameOver(); } } } } }); function isGameOver(){ if(nospace(board) && noMove(board)){ gameOver(); } } function gameOver(){ isGameOverFlag = true; alert("老板说不给你涨了！\n换个公司重新来过吧！"); } function moveLeft(){ if(!canMoveLeft(board)){ return false; } 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 && noBlockHorizontal(i,k,j,board)){ showMoveAnimation(i, j, i, k); board[i][k] = board[i][j]; board[i][j] = 0; continue; }else if(board[i][k] == board[i][j] && noBlockHorizontal(i,k,j,board)&& !hasConflicted[i][k]){ showMoveAnimation(i, j, i, k); board[i][k] += board[i][j]; board[i][j] = 0; score+=board[i][k]; updateScore(score, board[i][k]); hasConflicted[i][k] = true; continue; } } } } } setTimeout("updateBoardView()", 200); return true; } function moveRight(){ if(!canMoveRight(board)){ return false; } 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 && noBlockHorizontal(i,j,k,board)){ showMoveAnimation(i, j, i, k); board[i][k] = board[i][j]; board[i][j] = 0; continue; }else if(board[i][k] == board[i][j] && noBlockHorizontal(i,j,k,board) && !hasConflicted[i][k]){ showMoveAnimation(i, j, i, k); board[i][k] += board[i][j]; board[i][j] = 0; score+=board[i][k]; updateScore(score, board[i][k]); hasConflicted[i][k] = true; continue; } } } } } setTimeout("updateBoardView()", 200); return true; } function moveUp(){ if(!canMoveUp(board)){ return false; } for(var j=0; j<4; j++){ for(var i=1; i<4; i++){ if(board[i][j] != 0){ for(var k=0; k<i; k++){ if(board[k][j] == 0 && noBlockVertical(k,i,j,board)){ showMoveAnimation(i, j, k, j); board[k][j] = board[i][j]; board[i][j] = 0; continue; }else if(board[k][j] == board[i][j] && noBlockVertical(k,i,j,board)&& !hasConflicted[k][j]){ showMoveAnimation(i, j, k, j); board[k][j] += board[i][j]; board[i][j] = 0; score+=board[k][j]; updateScore(score, board[k][j]); hasConflicted[k][j] = true; continue; } } } } } setTimeout("updateBoardView()", 200); return true; } function moveDown(){ if(!canMoveDown(board)){ return false; } for(var j=0; j<4; j++){ for(var i=2; i>=0; i--){ if(board[i][j] != 0){ for(var k=3; k>i; k--){ if(board[k][j] == 0 && noBlockVertical(i,k,j,board)){ showMoveAnimation(i, j, k, j); board[k][j] = board[i][j]; board[i][j] = 0; continue; }else if(board[k][j] == board[i][j] && noBlockVertical(i,k,j,board)&& !hasConflicted[k][j]){ showMoveAnimation(i, j, k, j); board[k][j] += board[i][j]; board[i][j] = 0; score+=board[k][j]; updateScore(score, board[k][j]); hasConflicted[k][j] = true; continue; } } } } } setTimeout("updateBoardView()", 200); return true; }