2048小游戏分析

这两天写了个2048小游戏先看效果图：

 

现在分享一下它的逻辑：

首先要关注的就是它的页面结构：

容器中放置16个div用于，初始页背景的16个格子，注意class命名方式，这样命名可以用函数方便的进行布局,和其他功能操作。

其次 数字所在的div并不是这16个div，而是在通过方向键移动的过程中另外动态生成的。这里我先用一个值为0的4 *4的二维数组来标记初始的16个div,然后移动过程中生成的数字根据坐标放到这个数组的相应位置。而动态div就是根据这个数组的值来生成的，值不为0，则生成div，值为0，相应位置不生成div

   //1:二维数组生成函数
       function getArr () {
           var arr =[];
           for( var i = 0; i < 4; i++){
                 arr[i]=[];
               for( var j = 0; j < 4; j++){
                 arr[i][j]=0
               }
           }
           return arr;
       }

  // 2: 创建16个容纳数字的方格函数
       function getBoxs(arr1) {
           //重新开始先移除包含数字的格子
         if(getChild(parents)>16){
            removeClassEle('news');
         }
        for( var i = 0; i < arr1.length; i++){
               for( var j = 0; j < arr1[0].length; j++){
                  if(arr1[i][j]===0){
                      continue;
                  }else{
                    var divs = document.createElement('div');
                    divs.setAttribute('id','news--'+i+'-'+j);
                    divs.setAttribute('class','news');
                    divs.style.left=20+j*120+'px';
                    divs.style.top=20+i*120+'px';
                    divs.innerText=arr1[i][j]
                    parents.appendChild(divs);
                  }
               }
           }
       }

第三点就是上下左右移动的逻辑

以向左移动为例：

向左移动=>首先判断能否向左移动（条件：向左移动列的左侧有空间或者移动列与它相邻的左侧列值相等 xx24||x224）=>移动完成改变之前定义的数组的值，然后再重新根据该数组动态布局，=>检测数组的剩余空间，然后在剩余的空间位置中随机添加一个值=》在根据数组动态布局

 //判断能否向左移动，可以向左移动的条件，1:存在数字的方格左侧不存在数字，2：存在数字但两者相同。x 1 xx |  1,1 xx | 1 x 1 x 
    function canLeft(arr){
        //我通过arr2来判断
     for(var i=0;i=0;k--){   //循环判断数字左侧的格子
                     if(arr[i][k]===0){
                         arr[i][k]=arr[i][k+1];
                         arr[i][k+1]=0;
                     }
                     else if(arr[i][k]===arr[i][k+1]){
                         arr[i][k]=arr[i][k]*2;
                         arr[i][k+1]=0;
                     }
                 }
             
         }
     }
     return arr
    }

//随机生成一个Box
function productRandomBox (arr){
    //首先盘算是否有空间
    var arr3 =[]; //放剩余空间

    var objs;
  for (var i=0;i0){  //随机生成box的逻辑
         objs=Math.floor(Math.random()*(arr3.length));
            arr[arr3[objs].x][arr3[objs].y]=getNum()
            return arr
            
      }else{
          alert('GG思密达')
      }
 }

//左移事件，首先判断能否左移，然后随机生成数组,左移后，重新设定样式
    function goLeft (){
            getBoxs(canLeft(arr2));
           
            getBoxs( productRandomBox(arr2));
         
            getColor();
    }

主要逻辑就是这些，写完后发现还是很简单的，下面附上完整代码：

    
    
    
    
    


    

        
唯美JS2048
        
new game
        score:0