绘制网格javascript

Question

我正在进行塔防游戏，我遇到了一个问题，我无法解决这个问题。

当我将鼠标悬停在一个充当塔台的牢房时，问题就出现了。它显示了他的范围。但我绘图的方式不正常。

情况如下：

所以，假设第一个单元格悬停，然后它是一个塔，然后围绕它显示一个圆圈，然后绘图循环绘制下一个不是塔的单元格，也不会被悬停，所以它作为一个简单的单元格绘制在仍在徘徊的前一个细胞的圆圈。

绘图循环

  setInterval(function(){
    for(var row = 0; row < NumberOfRow; row++){
        for(var col = 0; col < NumberOfCol; col++){
            grid[row][col].draw();          
        }
    }

},1000 / 60);

每个细胞的方法绘制

this.draw = function(){
    if(this.isPath && this.tower == null){  
        c.fillStyle = "rgba(69,14,14,0.5)";
        c.fillRect(this.x,this.y,this.width,this.height);   
    }
    else if(this.tower != null){
            //Draw range
            if(this.isHover){
                c.beginPath();
                c.arc((this.x + (this.width / 2)), (this.y + (this.height / 2)), this.tower.range, (2 * Math.PI), 0, false);
                c.fillStyle = this.tower.color;
                c.fill();
                c.lineWidth = 2;
            }
            //Draw the tower
            c.fillStyle = this.tower.color;
            c.fillRect(this.x,this.y,this.width,this.height);
    }
    else{
        //Draw the normal cell
        c.beginPath();
            c.lineWidth="1";
            c.strokeStyle= this.borderColor;
            c.rect(this.x,this.y,this.width,this.height);
        c.stroke(); 

        c.fillStyle = "rgba(0,0,0,0.5)";
        c.fillRect(this.x,this.y,this.width,this.height);
    }

}

这里有一张图片来解释

Answer 1

像@singhisking一样，我现在只需在绘制单元格后绘制塔。

setInterval(function(){
    //draw all cells
    for(var row = 0; row < NumberOfRow; row++){
        for(var col = 0; col < NumberOfCol; col++){
            grid[row][col].draw();          
        }
    }
    //draw all tower
    for(var row = 0; row < NumberOfRow; row++){
        for(var col = 0; col < NumberOfCol; col++){
        if(grid[row][col].tower != null)
            grid[row][col].tower.draw();            
        }
    }
},1000 / 60);