根据深搜做的战旗游戏行走准备格子

根据当前坐标和行动力，点击目标，显示可以行走的格子。
黑色的点表示当前人物所在位置。

如图，这个黑点代表人物（姑且这样吧，也可以换成一张图片）

 //人物的初始坐标 和  人物的行动力
  var menx = 10,meny = 10,stap = 6;
  function $(id){
        return document.getElementById(id);
    }

    var canvas  = $("canvas");
    var ctx = canvas.getContext("2d");
    canvas.width = 500;
    canvas.height = 500;

    ctx.fillRect(menx*10,meny*10,10,10);

然后是点击时，显示格子

显示的有点丑，这些都是可以调整的

canvas.addEventListener("click",function(e){
        var  x = e.offsetX;
        var  y = e.offsetY;
        //通过搜索  计算人物在行动力范围类  可以到达的地方
        dfs(menx,meny,stap);
        a[menx][meny] = 1;//人物坐标给初始化为0，避免下面重绘给覆盖掉
        //这个是显示格子
        if(x>menx*10&&xmeny*10&&y

其中，dfs是深搜方法 ，传递当前人物的坐标和行动力，可以计算出当前人物所能行走到的位置

function dfs(x,y,num){
         //方向
         var next = [
                 [0,1],//右
                 [1,0],//下
                 [0,-1],//左
                 [-1,0]//上
         ]
         var tx,ty;
         if(num==0){
           return;
         }
         for(var k =0;k<=3;k++){
             tx = x + next[k][0];
             ty = y + next[k][1];
             if(tx<0||tx>=50||ty<0||ty>=50){
                 continue;
             }
             if(book[tx][ty]==0){
                 book[tx][ty]=1;
                 num--;
                 a[tx][ty] = 1;
                 dfs(tx,ty,num);
                 book[tx][ty]=0;
                 num++;
             }
         }

         return;
     }

其中，里面的tx，ty是下一次移动的目标
book[tx][ty]==0代表当前坐标没有走过，其实可以加一个判断当前地图是否可以行走的判断，但是地图a数组我全初始化成零 ，也就是默认没有障碍物，也就没有添加

 if(book[tx][ty]==0){
                 book[tx][ty]=1;
                 num--;
                 a[tx][ty] = 1;
                 dfs(tx,ty,num);
                 book[tx][ty]=0;
                 num++;
             }

上面的是深搜核心的思想，当这个点没有走过就进入，执行下方的代码，首先让当前点标记为已走，就是让标记数组book当前点等于1，然后步数减一，在更新地图数组a的当前点坐标为1，然后以相同的方法执行下一个点。
直到

	 if(num==0){
           return;
         }

步数等于0时返回，返回到哪里呢？上一个方法的最后一步，也就是dfs(tx,ty,num);
在去执行后面的代码，book[tx][ty]=0;num++;因为返回上一步了，所以，行动力就会加一点，当前点标记为0，就是没有行走，（为什么呢？因为一会还是要通过这个点搜索其他的可能）接着，执行for(var k =0;k<=3;k++){…} 当执行完这个循环后，执行下一步就是return，那么这个返回到那呢？还是返回到当前方法的上一个方法，依次循环，直到返回到第一个方法，结束。
呢么，因为book标记回溯了，看不到那些事可以行走的格子，但是

a[tx][ty] = 1;

a数组记录了所有可以行走的点，可以根据a数组来画出行走格子

if(x>menx*10&&xmeny*10&&y

上面是绘制格子，判断是否点击在人物身上

if(que(x,y)){

            canvas.height = canvas.height;
            ctx.fillRect(menx*10,meny*10,10,10);
        }

判断是否点击在可以到达的格子上，如果不是，就清除格子

function que(x,y){//判断点击处是否在行动范围内

        for(var i =0;i< a.length;i++){
            for(var j =0;ji*10&&xj*10&&y

就是这样，又回到未点击状态

下面写下完整代码