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

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

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

 //人物的初始坐标 和  人物的行动力
  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&&x<menx*10+10&&y>meny*10&&y<meny*10+10){

           ctx.save();
           ctx.fillStyle = "#4A4AFF";
           for(var i =0;i< a.length;i++){
                    for(var j =0;j<a[i].length;j++){
                        if(a[i][j]==1){
                            ctx.fillRect(i*10,j*10,10,10);
                        }
                    }
                }

            ctx.restore();
            ctx.fillRect(menx*10,meny*10,10,10);
        }
        //这个是消除格子
        if(que(x,y)){

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

其中，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&&x<menx*10+10&&y>meny*10&&y<meny*10+10){

           ctx.save();
           ctx.fillStyle = "#4A4AFF";
           for(var i =0;i< a.length;i++){
                    for(var j =0;j<a[i].length;j++){
                        if(a[i][j]==1){
                            ctx.fillRect(i*10,j*10,10,10);
                        }
                    }
                }

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

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

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;j<a[i].length;j++){
                if(a[i][j]==1){
                    if(x>i*10&&x<i*10+10&&y>j*10&&y<j*10+10){
                        return false;
                    }
                }
            }
        }
        return true;
    }

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

下面写下完整代码

<script>
    /**
     * 构思：首先，用深搜便利出行动力所能达到的所有点 ，在显示出来
     *
     */

    //人物的初始坐标 和  人物的行动力
    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&&x<menx*10+10&&y>meny*10&&y<meny*10+10){

           ctx.save();
           ctx.fillStyle = "#4A4AFF";
           for(var i =0;i< a.length;i++){
                    for(var j =0;j<a[i].length;j++){
                        if(a[i][j]==1){
                            ctx.fillRect(i*10,j*10,10,10);
                        }
                    }
                }

            ctx.restore();
            ctx.fillRect(menx*10,meny*10,10,10);
        }
        if(que(x,y)){

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

    //记录
    var  book = [];
    for(var i =0;i<50;i++){
        var now = [];
        for(var j = 0;j<50;j++){
            now[j] = 0;
        }
        book[i] = now;
    }
    //地图 记录步数
    var a = [];

    for(var i =0;i<50;i++){
        var now1 = [];
        for(var j = 0;j<50;j++){
            now1[j] = 0;
        }
        a[i] = now1;
    }


     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;
     }

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

        for(var i =0;i< a.length;i++){
            for(var j =0;j<a[i].length;j++){
                if(a[i][j]==1){
                    if(x>i*10&&x<i*10+10&&y>j*10&&y<j*10+10){
                        return false;
                    }
                }
            }
        }
        return true;
    }
</script>