代碼如下：
<!DOCTYPE html>
<html>
<head>
<meta charset='GBK'>
<title></title>
<style>
.grid-content{
width:480px;
height:480px;
padding:20px;
text-align:center;
position:relative;
}
.grid{
width:100px;
height:100px;
margin-right:20px;
border-radius:5px;
background-color:grey;
position:absolute;
}
.contentClassName{
border-radius:5px;
font-family:'微軟';
font-size:25px;
font-weight:bold;
text-align:center;
line-height:100px;
position:absolute;
}
</style>
<script>
window.onload=newGame;
var board=new Array();
function newGame(){
init();
generateNumber();
generateNumber();
}
function init(){
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
var grid=document.getElementById('grid-'+i+'-'+j);
console.log(grid);
grid.style.position='absolute';
grid.style.cssText='left:'+(20+120*j)+'px;'+'top:'+(20+120*i)+'px';
console.log(grid.style.left);
}
}
for(var i=0;i<4;i++){
board[i]=new Array();
for(var j=0;j<4;j++){
board[i][j]=0;
console.log('2');
}
}
numberCell();
}
function numberCell(){
var gridContent=document.getElementById('gridContent');
for(var i=0;i<4;i++){
for(var j=0;j<4;j++){
var content=document.createElement('div');
content.id='gridcontent-'+i+'-'+j;
content.className='contentClassName';
gridContent.appendChild(content);
console.log(content.id);
var numbercell=document.getElementById('gridcontent-'+i+'-'+j);
console.log(numbercell);
if(board[i][j]==0){
numbercell.style.height='0px';
numbercell.style.width='0px';
numbercell.style.top=(20+120*i)+'px';
numbercell.style.left=(60+120*j)+'px';
}else{
numbercell.style.width='100px';
numbercell.style.height='100px';
numbercell.style.top=(50+120*i)+'px';
numbercell.style.left=(50+120*j)+'px';
numbercell.style.backgroundColor=getBackground(board[i][j]);
numbercell.style.color=getColor(board[i][j]);
numbercell.innerText=board[i][j];
}
}
}
}
function getColor(number){
if(number<=4){
return 'black';
return 'white';
}
}
function getBackground(number){
switch(number){
case 2:return 'blue';break;
case 4:return 'grey';break;
case 8:return 'pink';break;
case 16:return 'red';break;
}
return black;
}
function generateNumber(){
if(nospace(board))
return false;
ranX=parseInt(Math.floor(Math.random()*4));
ranY=parseInt(Math.floor(Math.random()*4));
while(true){
if(board[ranX][ranY]==0)
break;
ranX=parseInt(Math.floor(Math.random()*4));
ranY=parseInt(Math.floor(Math.random()*4));
}
var ranNum=Math.random()<0.5?2:4;
board[ranX][ranY]=ranNum;
showAnimate(ranX,ranY,ranNum);
return true;
}
function showAnimate(x,y,num){
var numberCell=document.getElementById('gridcontent-'+x+'-'+y);
numberCell.style.backgroundColor=getBackground(num);
numberCell.style.color=getColor(num);
numberCell.innerText=num;
numberCell.style.width='100px';
numberCell.style.height='100px';
numberCell.style.top=(20+120*x)+'px';
numberCell.style.left=(20+120*y)+'px';
}
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;
}
}
}
document.onkeydown=function(e){
e=e||window.event;
console.log(e);
switch(e.keyCode){
case 37:
if(moveLeft()){
console.log(e.keyCode);
generateNumber();
}
break;
case 38:
if(moveUp()){
generateNumber();
isgameover();
}
break;
case 39:
if(moveRight){
generateNumber();
isgameover();
}
break;
case 40:
if(moveDown){
generateNumber();
isgameover();
}
break;
}
}
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++){
console.log(board[i][k]);
if(board[i][k]==0&&noBlock(i,k,j,board)){
showNumberWithAnimate(i,j,i,k);
board[i][k]=board[i][j];
board[i][j]=0;
continue;
}else if(board[i][k]==board[i][j]&&noBlock(i,k,board)){
showNumberWithAnimate(i,j,i,k);
board[i][k]+=board[i][j];
board[i][j]=0;
continue;
}
}
}
}
}
numberCell();
return true;
console.log(board);
}
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 noBlock(row,col1,col2,board){
for(var i=col1;i<col2;i++){
if(board[row][i]!=0){
return false;
}
return true;
}
}
function showNumberWithAnimate(fromx,fromy,toyx,toyy){
var cell=document.getElementById('gridcontent-'+fromx+'-'+fromy);
cell.style.top=(20+120*toyx)+'px';
cell.style.left=(20+100*toyy)+'px';
}
</script>
</head>
<body>
<div class='wrap'>
<div class='grid-content' id='gridContent'>
<div class='grid' id='grid-0-0'>
</div>
<div class='grid' id='grid-0-1'>
</div>
<div class='grid' id='grid-0-2'>
</div>
<div class='grid' id='grid-0-3'>
</div>
<div class='grid' id='grid-1-0'>
</div>
<div class='grid' id='grid-1-1'>
</div>
<div class='grid' id='grid-1-2'>
</div>
<div class='grid' id='grid-1-3'>
</div>
<div class='grid' id='grid-2-0'>
</div>
<div class='grid' id='grid-2-1'>
</div>
<div class='grid' id='grid-2-2'>
</div>
<div class='grid' id='grid-2-3'>
</div>
<div class='grid' id='grid-3-0'>
</div>
<div class='grid' id='grid-3-1'>
</div>
<div class='grid' id='grid-3-2'>
</div>
<div class='grid' id='grid-3-3'>
</div>
<div class='grid' id='grid-4-0'>
</div>
<div class='grid' id='grid-4-1'>
</div>
<div class='grid' id='grid-4-2'>
</div>
<div class='grid' id='grid-4-3'>
</div>
</div>
</div>
</body>
</html>
起始坐標搞清楚了嗎？
position 后，你的dom就脫離文檔流了。所以起始坐標 加 padding + border
北大青鳥APTECH成立于1999年。依托北京大學(xué)優(yōu)質(zhì)雄厚的教育資源和背景，秉承“教育改變生活”的發(fā)展理念，致力于培養(yǎng)中國IT技能型緊缺人才，是大數(shù)據(jù)專業(yè)的國家
北大青鳥中博軟件學(xué)院創(chuàng)立于2003年，作為華東區(qū)著名互聯(lián)網(wǎng)學(xué)院和江蘇省首批服務(wù)外包人才培訓(xùn)基地，中博成功培育了近30000名軟件工程師走向高薪崗位，合作企業(yè)超4
中公教育集團創(chuàng)建于1999年，經(jīng)過二十年潛心發(fā)展，已由一家北大畢業(yè)生自主創(chuàng)業(yè)的信息技術(shù)與教育服務(wù)機構(gòu)，發(fā)展為教育服務(wù)業(yè)的綜合性企業(yè)集團，成為集合面授教學(xué)培訓(xùn)、網(wǎng)
達內(nèi)教育集團成立于2002年，是一家由留學(xué)海歸創(chuàng)辦的高端職業(yè)教育培訓(xùn)機構(gòu)，是中國一站式人才培養(yǎng)平臺、一站式人才輸送平臺。2014年4月3日在美國成功上市，融資1
浪潮集團項目經(jīng)理。精通Java與.NET 技術(shù)， 熟練的跨平臺面向?qū)ο箝_發(fā)經(jīng)驗，技術(shù)功底深厚。 授課風(fēng)格 授課風(fēng)格清新自然、條理清晰、主次分明、重點難點突出、引人入勝。
曾工作于聯(lián)想擔(dān)任系統(tǒng)開發(fā)工程師，曾在博彥科技股份有限公司擔(dān)任項目經(jīng)理從事移動互聯(lián)網(wǎng)管理及研發(fā)工作，曾創(chuàng)辦藍懿科技有限責(zé)任公司從事總經(jīng)理職務(wù)負責(zé)iOS教學(xué)及管理工作。
精通HTML5和CSS3；Javascript及主流js庫，具有快速界面開發(fā)的能力，對瀏覽器兼容性、前端性能優(yōu)化等有深入理解。精通網(wǎng)頁制作和網(wǎng)頁游戲開發(fā)。
具有10 年的Java 企業(yè)應(yīng)用開發(fā)經(jīng)驗。曾經(jīng)歷任德國Software AG 技術(shù)顧問，美國Dachieve 系統(tǒng)架構(gòu)師，美國AngelEngineers Inc. 系統(tǒng)架構(gòu)師。
掃碼關(guān)注鍍金池微信號
手機訂課，優(yōu)惠多多