Eventi js su matrice quadrata celle adiacenti - Alessandro Barazzuol

Eventi js su matrice quadrata celle adiacenti

<html>

<head>
    
<style>
        table{
           width: 30%;
           height: 50%;
        }
        th, td{
            
            border: 1px solid #000;
        }
    </style>
<script>
    
    
var C=new Array(0,1,2,3,4,5,6,7,8,9,"A","B","C","D","E","F");
var i,j;

var size=6;
function cancella()
{
    var el=document.getElementsByTagName("td");
    for(i=0;i<el.length;i++)
    {
        el[i].style.background="white";
         el[i].style.borderColor = "black";;
    }
    
}

function flash(e)
{
    document.getElementById(e.id).style.background="#ffff00";
    setTimeout(flash(e),10);
}
function colora(e){
 
cancella();

var colore="#"+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)]+C[Math.floor(Math.random()*16)];

var numero=parseInt(e.id);
document.getElementById(numero.toString()).style.background="black";

if(numero%size!=0)
{
   
    document.getElementById((numero+1).toString()).style.background="black";
    
}

if(numero%size!=1){
   
   document.getElementById((numero-1).toString()).style.background="black";
  
}
if(numero<size*size-size){
  
    document.getElementById((numero+size).toString()).style.background="black";
   
    
}
if(numero>size){
  
    document.getElementById((numero-size).toString()).style.background="black";
   
    
}

flash(e);
}

</script>

</head>



<div id="bodyys">


</div>

<script>
    
    
    
    
       let table = document.createElement('table');
       let tr,td;
       var k=1;
      
      
       document.getElementById('bodyys').appendChild(table);
       
      
       for(i=0;i<size;i++)
       {
          
          tr= document.createElement('tr');
          table.appendChild(tr);
          
           
           for(j=0;j<size;j++)
           {
               td= document.createElement('td');
               
               td.setAttribute("id", k++);
               
               td.addEventListener("mouseover",function (){
                   
                   colora(this);
                   
               });
             
               tr.appendChild(td);
               
           }
         
           
       }


      
     
    </script>


</html>