JS推箱子项目总结——地图创建与铺设简述（二）

前言

上一篇我们讲解了地图的简单创建，虽然最后我加上了二维数组的一个代码展示，但讲的还是不是很详细。所以就有写了一篇专门讲一下。
在上一篇我们其实对地图的原理有了一定的了解，就是使用循环，不断创建小方块，填充进大地图里。二维数组创建是对地图的进一步优化。
在这一篇了，我会讲解一下，使用二维数组创建箱子与终点
首先，我把上一篇的div使用函数创建模板的代码放在这。

 function createEle(oCss){
   
 //把形式参数定义为一个对象，然后对象名加.点就是对象的属性，可以随时调用。
         var oBox=document.createElement("div");
                oCss.parent.appendChild(oBox);
                oBox.id=oCss.id;
                oBox.style.width=oCss.w+"px";
                oBox.style.height=oCss.h+"px";
                oBox.style.position=oCss.p;
                oBox.style.margin=oCss.m;
                oBox.style.backgroundImage=oCss.bgi;
                oBox.style.backgroundSize=oCss.bgs;
        return oBox;
    }
    //"w"相当于oCss.w 以此类推。然后使用，（逗号）分割。
    //注意属性使用字符串，就跟：
    //box.style.margin="10px auto"一样，还是要用字符串形式。
    var oBox=createEle({
   "w":800,
                        "h":600,
    					"p":"relative",
    					"m":"10px auto",
    					"bgi":"url('tu.jpg')",
    					"bgs":"100% 100%",
    					"id":"",
    					"parent":document.body});

这里是上一篇，创建地图的代码。

.box{
   width: 500px;
     height:500px;
     background-color:#000;
     margin:50px auto; 
     position:relative;
     verflow: hidden;}
.son{
   width:48px;
     height:48px;
     border:1px solid #f0f;
     position:absolute;}

//createElement()创建元素与appendChild配套使用
//appendChild声明元素创建在哪里（哪个标签里面）
  var oMap=document.createElement("div");
    document.body.appendChild(oMap);
    oMap.className="box";
    for(var i=0;i<10;i++){
   
        for(var j=0;j<10;j++){
   
        var oSon=document.createElement("div");
        oSon.className="son";
        //定位位置
        oSon.style.left=j*50+"px";
        oSon.style.top=i*50+"px";
        oMap.appendChild(oSon);
        }
    }

二维数组使用

首先我们要把创建地图与二维数组对接，从二维数组中我们可以看出地图的行列数 以及一些具体要求。
首先我们写一个10 x 10的一个二维数组，以及创建地图的基本代码。

    //基础设施
function createEle(oCss){
   
         var oBox=document.createElement("div");
                oCss.parent.appendChild(oBox);
                oBox.style.width=oCss.w+"px";
                oBox.style.height=oCss.h+"px";
                oBox.style.position=oCss.p;
                oBox.style.left=oCss.l+"px";
                oBox.style.top=oCss.t+"px";
        return oBox;
    }
//注意在数组最后一位不需要加逗号,
//我们得确认二维数组是一个完整的。
arr=[
      [0,0,0,0,0,0,0,0,0,0],
      [0,1,1,1,1,1,1,1,1,0],
      [0,1,0,0,0,0,0,0,1,0],
      [0,1,0,0,0,0,0,0,1,0],
      [0,1,0,0,2,3,0,0,1,0],
      [0,1,0,0,0,0,0,0,1,0],
      [0,1,0,0,0,0,0,0,1,0],
      [0,1,0,0,0,0,0,10,1,0],
      [0,1,1,1,1,1,1,1,1,0],
      [0,0,0,0,0,0,0,0,0,0]
    ];
//创建外面的大box
    var oBox=createEle({
   "w":600,
                        "h":600,
                        "p":"relative",
                        "parent":document.body});
    oBox.style.margin="20px auto";
    oBox.style.backgroundColor="#000";
    //算出小box的长宽
    var w=oBox.clientWidth/arr.length;
    var h=oBox.clientHeight/arr[0].length;

    for(var row=0;row<arr.length;row++){
   
            for(var col=0;col<arr[0].length;col++){
   
                var oGrid=createEle({
   "w":w,
                                     "h":h,
                                     "p":"absolute",
                                     "parent":oBox,
                                     "l":col*w,
                                     "t":row*h
                                    });
            }
        }

在这里我们就跟二维数组对接了，使用arr.length与arr[0].length作为box的行列。现在只是行列有了对应，如果我们任意改变二维数组是没有任何变化的。
我们首先得改变二维数组，然后在循环创建的地方加上一个if条件，这样才会在地图上做出想要的创建。

    for(var row=0;row<arr.length;row++){
   
            for(var col=0;col<arr[0].length;col++){
   
                //我们把1当做障碍，2作为人物
                var oGrid=createEle({
   "w":w,
                                     "h":h,
                                     "p":"absolute",