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

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

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

 //人物的初始坐标 和  人物的行动力
  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);
                        }
                    }
                }