showanimation.js

function?showNumberWithAnimation(i,?j,?randNumber)?{

????var?numberCell?=?$('#number-cell-'?+?i?+?"-"?+?j);

????numberCell.css('background-color',?getNumberBackgroundColor(randNumber));

????numberCell.css('color',?getNumberColor(randNumber));

????numberCell.text(randNumber);

????numberCell.animate({

????????width:?"100px",

????????height:?"100px",

????????top:?getPosTop(i,?j),

????????left:?getPosLeft(i,?j),

????},?50);

}

main2048.js

var?board?=?new?Array();

var?score?=?0;

$(document).ready(function?()?{

????newgame();

});

function?newgame()?{

????//初始化棋盤格

????init();

????//在隨機兩個格子生成數字

????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();

????for?(var?j?=?0;?j?<?4;?j++)?{

????????board[i][j]?=?0;

????}

????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)?+?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-color',?getNumberBackgroundColor(board[i][j]));

????????????????????????????theNumberCell.css('color',?getNumberColor(board[i][j]));

????????????????????????????theNumberCell.text(board[i][j]);

????????????????????????}

????????????????????}

????????????}

????????????function?generateOneNumber()?{

????????????????if?(nospace(board))

????????????????????return?false;

????????????????//?隨機一個位置

????????????????var?randx?=?parseInt(Math.floor(Math.random()?*?4));

????????????????var?randy?=?parseInt(Math.floor(Math.random()?*?4));

????????????????while?(true)?{

????????????????????if?(board[randx][randy]?==?0)

????????????????????????break;

????????????????????randx?=?parseInt(Math.floor(Math.random()?*?4));

????????????????????randy?=?parseInt(Math.floor(Math.random()?*?4));

????????????????}

????????????????//?隨機一個數字

????????????????var?randNumber?=?Math.random()?<?0.5???2?:?4;

????????????????//?在隨機位置顯示隨機數字

????????????????board[randx][randy]?=?randNumber;

????????????????showNumberWithAnimation(randx,?randy,?randNumber);

????????????????return?true;

????????????}

support2048.js

function?getPosTop(i,?j)?{

????return?20?+?i?*?120;

}

function?getPosLeft(i,?j)?{

????return?20?+?j?*?120;

}

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?"#f67e5f";?break;

????????case?64:?return?"#f65e3b";?break;

????????case?128:?return?"#edcf72";?break;

????????case?256:?return?"#edcc61";?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;

????}

????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;

}