<!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>
2048游戲為什么無法實現左移動 求解
慕粉4240002
2017-11-15 21:57:07
