對照老師的源代碼了，為啥效果變成只有一個格子？
main
var?board?=?new?Array();
var?score?=?0;
$(document).ready(function?()?{
????newgame();
});
function?newgame()?{
????//初始化棋盤格
????init();
????//在隨機兩個格子生成數(shù)字
????generateOneNumber();
????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;
}
$(document).keydown(function?(event)?{
????switch?(event.keyCode)?{
????????case?37:?//left
????????????if?(moveLeft())?{
????????????????generateOneNumber();
????????????????isgameover();
????????????}
????????????break;
????????case?38:?//up
????????????if?(moveUp())?{
????????????????generateOneNumber();
????????????????isgameover();
????????????}
????????????break;
????????case?39:?//right
????????????if?(moveRight())?{
????????????????generateOneNumber();
????????????????isgameover();
????????????}
????????????break;
????????case?40:?//down
????????????if?(moveDown())?{
????????????????generateOneNumber();
????????????????isgameover();
????????????}
????????????break;
????????default:?//default
????????????break;
????}
});
function?isgameover()?{
}
//?向左移動
function?moveLeft()?{
????if?(!canMoveLeft(board))
????????return?false;
????//moveLeft
????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++)?{
????????????????????if?(board[i][k]?==?0?&&?noBlockHorizontal(i,?k,?j,?board))?{
????????????????????????//move
????????????????????????showMoveAnimation(i,?j,?i,?k);
????????????????????????board[i][k]?=?board[i][j];
????????????????????????board[i][j]?=?0;
????????????????????????continue;
????????????????????}
????????????????????else?if?(board[i][k]?==?board[i][j]?&&?noBlockHorizontal(i,?k,?j,?board))?{
????????????????????????//move
????????????????????????showMoveAnimation(i,?j,?i,?k);
????????????????????????//add
????????????????????????board[i][k]?+=?board[i][j];
????????????????????????board[i][j]?=?0;
????????????????????????continue;
????????????????????}
????????????????}
????????????}
????????}
????setTimeout("updateBoardView()",?200);
????return?true;
}
//?向右移動
function?moveRight()?{
????if?(!canMoveRight(board))
????????return?false;
????//?moveRight
????for?(var?i?=?0;?i?<?4;?i++)
????????for?(var?j?=?2;?j?>=?4;?j--)?{
????????????if?(board[i][j]?!=?0)?{
????????????????for?(var?k?=?3;?k?>?j;?k--)?{
????????????????????if?(board[i][k]?==?0?&&?noBlockHorizontal(i,j?,k?,?board))?{
????????????????????????//?move
????????????????????????showMoveAnimation(i,?j,?i,?k);
????????????????????????board[i][k]?=?board[i][j];
????????????????????????board[i][j]?=?0;
????????????????????????continue;
????????????????????}
????????????????????else?if?(board[i][k]?==?board[i][j]?&&?noBlockHorizontal(i,?j,?k,?board))?{
????????????????????????//?move
????????????????????????showMoveAnimation(i,?j,?i,?k);
????????????????????????//?add
????????????????????????board[i][k]?*=?2
????????????????????????board[i][j]?=?0;
????????????????????????continue;
????????????????????}
????????????????}
????????????}
????????}
????setTimeout("updateBoardView()",?200);
????return?true;
}
//?向上移動
function?moveUp()?{
????if?(!canMoveUp(board))
????????return?false;
????//?move?Up
????for?(var?j?=?0;?j?<?4;?j++)
????????for?(var?i?=?1;?i?<?4;?i++)?{
????????????if?(board[i][j]?!=?0)?{
????????????????for?(var?k?=?0;?k?<?i;?k++)?{
????????????????????if?(board[k][j]?==?0?&&?noBlockVertical(j,?k,?i,?board))?{
????????????????????????showMoveAnimation(i,?j,?k,?j);
????????????????????????board[k][j]?=?board[i][j];
????????????????????????board[i][j]?=?0;
????????????????????????continue;
????????????????????}
????????????????????else?if?(board[k][j]?==?board[i][j]?&&?noBlockVertical(j,?k,?i,?board))?{
????????????????????????showMoveAnimation(i,?j,?k,?j);
????????????????????????board[k][j]?*=?2;
????????????????????????board[i][j]?=?0;
????????????????????????continue;
????????????????????}
????????????????}
????????????}
????????}
????setTimeout("updateBoardView()",?200);
????return?true;
}
//?向下移動
function?moveDown()?{
????if?(!canMoveDown(board))
????????return?false;
????//?move?down
????for?(var?j?=?0,?;?j?<?4;?j++)
????????for?(var?i?=?2;?i?>=?0;?i--)?{
????????????if?(board[i][j]?!=?0)?{
????????????????for?(var?k?=?3;?k?>?i;?k--)?{
????????????????????if?(board[k][j]?==?0?&&?noBlockVertical(j,?i,?k,?board))?{
????????????????????????showMoveAnimation(i,?j,?k,?j);
????????????????????????board[k][j]?=?board[i][j];
????????????????????????board[i][j]?=?0;
????????????????????????continue;
????????????????????}
????????????????????else?if?(board[k][j]?==?board[i][j]?&&?noBlockVertical(j,i?,?k,?board))?{
????????????????????????showMoveAnimation(i,j?,?k,?j);
????????????????????????board[k][j]?*=?2;
????????????????????????board[i][j]?=?0;
????????????????????????
????????????????????????continue;
????????????????????}
????????????????}
????????????}
????????}
????setTimeout("updateBoardView()",?200);
????return?true;
}
support
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?"#f67c5f";?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;
}
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?=?2;?j?>=?0;?j--)
????????????if?(board[i][j]?!=?0)
????????????????if?(board[i][j?+?1]?==?0?||?board[i][j?+?1]?==?board[i][j])
????????????????????return?true;
????return?false;
}
function?canMoveUp(board)?{
????for?(var?j?=?0;?j?<?4;?j++)
????????for?(var?i?=?1;?1?<?4;?i++)
????????????if?(board[i][j]?!=?0)
????????????????if?(board[i?-?1][j]?==?0?||?board[i?-?1][j]?==?board[i][j])
????????????????????return?true;
????return?false;
}
function?canMoveDown(board)?{
????for?(var?j?=?0;?j?<?4;?j++)
????????for?(var?i?=?2;?i?>=?0;?i--)
????????????if?(board[i][j]?!=?0)
????????????????if?(board[i?+?1][j]?==?0?||?board[i?+1][j]?==?board[i][j])
????????????????????return?true;
????return?false;
}
function?noBlockHorizontal(row,?col1,?col2,?board)?{
????for?(var?i?=?col1?+?1;?i?<?col2;?i++)
????????if?(board[row][i]?!=?0)
????????????return?false;
????return?true;
}
function?noBlockHorizontal(col,?row1,?row2,?board)?{
????for?(var?i?=?row1?+?1;?i?<?row2;?i++)
????????if?(board[i][col]?!=?0)
????????????return?false;
????return?true;
}
2019-10-23
下了第四章第一節(jié)的代碼看? 有一個錯誤
support里最后那個函數(shù)命名應(yīng)該是 function?noBlockVertical（）{ }