Untitled

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        html,body{
            height:100%;
            width:100%;
            display: flex;
            align-items: center;
            justify-content: center;
            padding:0px;
            margin:0px;
        }
        .display{
            height:50%;
            aspect-ratio: 1/1;
            display: flex;
            flex-wrap: wrap;
            padding:0px;
            margin:0px;
            border:2px solid #000000;
        }
        .part{
            padding:0px;
            margin:0px;
            display: flex;
            align-items: center;
            justify-content: center;
        }
    </style>
</head>
<body>
    <div class="display" id="display"></div>
    <script>
        let snake = [];
        const verticalfov = 2;
        const horisontalfov = 2;
        let foodPosition = [-1,-1];
        for (y = 0 ; y < 1+2*verticalfov ; y++){
            for (x = 0 ; x < 1+2*horisontalfov ; x++){
                var div = document.createElement('div');
                div.id = "partNo"+x+"/"+y;div.className = "part";
                document.getElementById("display").appendChild(div);
                document.getElementById("partNo"+x+"/"+y).style.height = 100/(1+2*verticalfov)+"%";
                document.getElementById("partNo"+x+"/"+y).style.width = 100/(1+2*horisontalfov)+"%";
                console.log("generated div for coordinates x:" + x + " y:" + y);
            }
        }
        snake.push([horisontalfov,verticalfov]);
        console.log("current snake x y and status "+snake);
        for ( y = 1 ; y < 4 ; y++ ){
            console.log("current y "+y)
            snake.push([horisontalfov,verticalfov+y]);
            console.log("current snake x y and status "+snake);
        }
        setSnakeValuesAndRender(true);
        function setSnakeValuesAndRender(SnakeGrowth){
            let snakeTemplate = [];
            for (i = 0 ; i < snake.length ; i ++){
                snakeTemplate.push(snake[i]);
            }
            snake [0] = [0,0];
            console.log(snake);
            console.log(snakeTemplate);
            for( let currentlyUpdatedSnakePart = 1 ; currentlyUpdatedSnakePart < snake.length ; currentlyUpdatedSnakePart++){
                console.log("Currently Updated Snake Part "+currentlyUpdatedSnakePart+" and it's values x y and status "+snake[currentlyUpdatedSnakePart]);
                snake[currentlyUpdatedSnakePart] = snakeTemplate[currentlyUpdatedSnakePart - 1];
                console.log("Post Update Currently Updated Snake Part "+currentlyUpdatedSnakePart+" and it's values x y and status "+snake[currentlyUpdatedSnakePart]);
                document.getElementById("partNo"+snake[currentlyUpdatedSnakePart][0]+"/"+snake[currentlyUpdatedSnakePart][1]).style.backgroundColor = "lime";
            }
        }
        for (let i = 0 ; i < (2+2*horisontalfov)*(2+2*verticalfov) ; i++){
            randomizeFoodLocation();
        }
        randomizeFoodLocation()
        function randomizeFoodLocation(){
            let x = 0,y = 0;
            for (i=0;i==0;){
                x =Math.floor(Math.random() * (1+2*horisontalfov));
                y =Math.floor(Math.random() * (1+2*verticalfov));
                for (j=1;j<snake.length;j++){
                    if (x!=snake[j][0] && y!=snake[j][1]){
                        i++;
                    }else{}
                    console.log(snake[j])
                }
            }
            foodPosition[0] = x;
            foodPosition[1] = y;
            console.log(foodPosition);
            document.getElementById("partNo"+(foodPosition[0])+"/"+(foodPosition[1])).style.backgroundColor = "red";
        }
    </script>
</body>
</html>