最近同学参加宣讲会，说有个公司要求是写一个2048小游戏，参考了一点网上的代码以后，自己写了一个。
写的思路如下：
1.设置好HTML布局。大盒子嵌套小盒子，这块没什么可说的。
2.实现游戏初始化，生成一开始的两个小块。这里就要实现生成随机2或4，还要放入随机位置。其实从布局好了之后差不多就能想到用数组来存储数字了。这块主要用了Math.random()来生成随机数和随机X,Y来插入到数组中。然后写一个更新页面的函数，利用JS来更新小盒子的内容和CSS样式。这里把这一块，初始化数组和生成两个随机盒子的函数写成了一个newGame()函数，这样重新开始游戏可以直接调用。
3.最重要的来了，移动。我自己写的时候我是先按照先能然他们移动，在来考虑合并的思路来的。要留一个能记录下来为0的位置的变量，比如向下移动的时候，代码如下。
for(var i = 0;i<4;i++){
var n=3;
for(var j = 3;j>=0;j--){
if(board[j][i] == 0){
continue;
}else{
if(board[n][i]==0){
board[n][i] = board[j][i];
board[j][i] = 0;
}
n--;
}
}
}我是把继续生成随机盒子的函数放在了移动函数的结尾调用的，在这个时候就要考虑一个问题了，怎么让在其实没有移动动作的时候不在继续增加盒子。我还是用了一个循环遍历来完成这个问题。遍历循环数组，如果在移动方向上不为0的前面存在0就可以继续移动。比如判断是否能够下移：
function canMoveDown(){
for(var i = 0;i<4;i++){
for(var j = 3;j>=0;j--){
if(board[j][i]!=0&&j!=3){
if(board[j+1][i]==0){ return false;
}
}
}
} return true;
}然后改写了前面的移动函数，前面判断了这个，如果返回为真直接return false,不执行之后的移动函数体。
4.当移动都完成好了之后，就要考虑合并的问题了。我的思路是这样的，在移动之后，就移动后移动方向的前一个盒子（如果存在）和移动后的这个盒子来比较值，如果比较相等，就把前一个盒子置为本身2倍，移动后的盒子置为0。比如向下移动，修改代码如下：
for(var i = 0;i<4;i++){
var n=3;
for(var j = 3;j>=0;j--){
if(board[j][i] == 0){
continue;
}else{
if(board[n][i]==0){
board[n][i] = board[j][i];
board[j][i] = 0;
} if(n<3){
if(board[n][i] == board[n+1][i]){
board[n+1][i] = board[n][i]*2;
board[n][i] = 0;
continue;
}
}
n--;
}
}
}此处只有当n
if(board[j+1][i]==0||board[j+1][i]==board[j][i]){
eturn false;}
5.到这里呢，基本上主要功能就结束啦。还有一点点就是关于结束的判断。结束就是1没有盒子是空的，2不能够移动了。没有盒子是空的就遍历数组看是不是全部都不是0了。不能移动就把前面写的canMoveDown()函数和上移，左移，右移的函数用上，如果这5个都是真的，就弹出游戏结束框，然后调用新的newGame()函数重新来。
