绘图网格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);