为什么这个存储在索引变量中的 Math.random() 函数在这个 if 语句中不起作用，这是我在这里遇到的主要问题？

Question

我尝试制作一种贪吃蛇游戏，在一个包装元素中有方形 div，我将这些方块存储在 sq 变量中，我想根据它们的索引在这些方块中设置食物，但在 if 语句中它不起作用，并且由于什么原因 math.random() 在这个嵌套的 if 语句中不起作用。

当我将蛇元素重叠到食物元素时，它不显示；但其余的事情并没有像我上面提到的那样工作

const sq = document.querySelectorAll(".square");

var food = document.createElement("div");

   food.setAttribute("class", "food")
const snake = document.querySelector(".snake");

const btns = document.querySelectorAll(".btns > button");


var x = 0;


var y = 0;


var index = Math.floor(Math.random() * 23)


var item = sq[index].appendChild(food)
btns.forEach((btn)=> {


    btn.addEventListener("click", (e)=>{

        x += 100;

      

        if(e.target.innerHTML.trim() === "right"){

          

         

            snake.style.left = x;
           
           

            if(x == 500){

                x = -100;
            }





           

          
      
        }


        if(snake.getBoundingClientRect().left >= food.getBoundingClientRect().left && snake.getBoundingClientRect().top >= food.getBoundingClientRect().top){

            food.classList.add("hide");

            if(!food.classList.contains("show")){

                 food.classList.add("show");

                
            }

            sq[index].appendChild(food)
            
   }



    })


})