<!DOCTYPE html><html><head><meta charset='GBK'><title></title><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.width='0px'; numbercell.style.height='0px'; numbercell.style.top=(20+120*i)+'px'; numbercell.style.left=(65+120*j)+'px';}else{ numbercell.style.width='100px'; numbercell.style.height='100px'; numbercell.style.top=(20+120*i)+'px'; numbercell.style.left=(20+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 'green';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,j,board)){ /*showNumberWithAnimate(i,j,i,k);*/ board[i][k]+=board[i][j]; board[i][j]=0; continue;}}}}} numberCell(); return true; console.log(board);}function moveRight(board){ if(!canMoveright){ 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=0;j<3;j++){ if(board[i][j]!=0){ if(board[i][j+1]==0||board[i][j]==board[i][j+1]){ 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+120*toyy)+'px'; }</script></head>
添加回答
举报
0/150
提交
取消