代碼一樣的,但是并沒有隨機生成兩個數(shù)字?。壳蟠笊?/h1>
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();
????//在隨機兩個格子生成數(shù)字
????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));
????????????????}
????????????????//?隨機一個數(shù)字
????????????????var?randNumber?=?Math.random()?<?0.5???2?:?4;
????????????????//?在隨機位置顯示隨機數(shù)字
????????????????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;
}
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();
????//在隨機兩個格子生成數(shù)字
????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));
????????????????}
????????????????//?隨機一個數(shù)字
????????????????var?randNumber?=?Math.random()?<?0.5???2?:?4;
????????????????//?在隨機位置顯示隨機數(shù)字
????????????????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;
}
2020-01-23
showanimation里面的left:?getPosLeft(i,?j)應(yīng)當(dāng)沒有逗號
2019-11-26
獲取元素哪里不對