2048游戏为什么无法实现左移动 求解
<!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>
慕粉42400021回答
-
Stardust1001
为什么case37里没有isgameover
随时随地看视频慕课网APP
相关分类
JavaScript