使用js和jq写游戏2048的总结思考

代码地址
GitHub：https://github.com/cheesenoyume/proj1

总结出来的注意点

可以分多个Js文件，放不同分类的代码，这样写的时候更清晰。

模块化一点点把需求分析出来，实现各部分的内容。

逻辑错误，因此达不到预期效果，建议先梳理好逻辑，什么逻辑实现什么功能，再打代码

语法错误，比如Math.floor(x)不能忘记打Math.

拼写错误，比如变量名拼错或者写成其他的变量

可以在写了一段代码后就测试效果，比如给出固定的数组 利用alert或者其他调试工具看到哪里不运行了，然后在哪里修改bug

代码优化，除了相同功能的代码写成一个函数之外，看到浏览器崩溃，可能是自己的代码的问题，比如： 为了实现随机数满足要求才能出循环，用了while(true)，导致效率极慢。

改动后如下：让它试50次，不行就自己确定一个。

var times = 0 ;
    while(times<50){
        if(board[randomx][randomy]==0){
            break;
        }
            randomx = parseInt(Math.floor(Math.random()));
            randomy= parseInt(Math.floor(Math.random()));
            times++;
    }
    //猜了50次还是没找出正确位置
    if (times == 50){
        for(i=0;i<4;i++){
            for(j=0;j<4;j++){
                if(board[i][j]==0){
                    randomx = i;
                    randomy = j;
                }
            }
        }
    }

代码整体的逻辑分析

效果图：

首先写好html和css进行布局，在函数newgame()中放初始化函数和generateOneNumber()的函数。初始化是放置16个栅格。在随机格子里随机生成2或者4。然后写更新栅格内容的函数function updateBoardNumber()如果棋盘没有满，才能执行。

 $(".grid-container").append('
');

在大棋盘中加小格子，把二维数组board里面的数字取出放到对应的里面。不同数字对应不同背景色和字体颜色。
按下键盘上的上下左右键，控制格子移动的方向。移动完自动产生一个数字。
以向右移动为例，首先遍历前3列格子，对于数字不为0的格子，如果格子的右边有0或者和它相等数字，就可以移动。

 if(board[i][j] != 0){
                if((board[i][j+1] == 0) || (board[i][j] == board[i][j+1])){
                    return true;
                }
            }

如果可以是移动的，再遍历进行操作。i是行，j是列。遍历0-3行，再从标号为2的列向左遍历到第0列，for(j=2;j>=0;j--)，否则在操作的时候可能会出现Bug，因为需求是你向右滑，所有格子都向右移动，因此当然是先从最右边的先遍历起。当正在遍历的格子不为0，看从最右边的格子到它右边第一个格子里有没有满足要求的，for(k=3;k>j;k--)。加入最右的正好等于0或者和他数字一样，那么直接就可以移动，否则就看再左一个格子怎么样，以此类推。当时我画了图，思路就清晰了。

 for(i=0;i<4;i++){
        for(j=2;j>=0;j--){
            if(board[i][j] != 0){
               for(k=3;k>j;k--){
                    if(board[i][k] == 0 && noHorizontalBlock(i,j,k,board)){
                        //move
                        showMoveAnimation(i,j,i,k);
                        board[i][k] = board[i][j] ;
                        board[i][j] = 0;
                        //找到最左侧的0就可以移动
                        continue;
                    }
                    if(board[i][k] == board[i][j] && noHorizontalBlock(i,j,k,board) && !hasconflicted[i][k]){
                        //move
                        showMoveAnimation(i,j,i,k);
                        board[i][k] = 2*board[i][j] ;
                        board[i][j] = 0;
                        //add
                        score += board[i][k];
                        updateScore(score);
                        hasconflicted[i][k] = true;
                        continue;
                    }
               }
            }
        }
    }

写完上下左右的逻辑，最后判断能不能游戏结束，通过还有没有空余的格子&&能否上下左右移动来判断。