index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <title>TickTackToe - MVP</title>
</head>
<script>
function initGame(){
    const body = document.getElementById('body');
    const title = document.getElementById('title');

    let size;
    var x;
    var y;

    /*Removes start screen elements*/
    body.removeAttribute("onclick");
    title.remove();
    body.style.backgroundColor = "revert";

    size = 3;
    y = 0;
    
    /*creates 3 rows each containing 3 divs and sets its attributes*/
    while(y < size){
        x = 0;
        const row = document.createElement("div");
        row.setAttribute("class", "flex row");
        while(x < size){
            const div = document.createElement("div");
            div.setAttribute("onclick", "setColor("+x+", "+y+")");
            div.setAttribute("class", "div");
            div.setAttribute("id", ""+x+""+y+"");
            row.appendChild(div);
            x++;
        }
        body.appendChild(row);
        y+=1;
    }
}

/*Quick fix, for itterator, that the color can switch without resetting or passing the count*/
var i;

i = 0;
function setColor(x, y){
    var color;
    const div = document.getElementById(""+x+""+y+"");
    
    /*default color is red*/
    color = "red";
    i++;
    
    /*if even, set color to blue*/
    if (i % 2 == 0)
        color = "blue";
    div.style.backgroundColor = color;
    
    /*removes event, preventing the "capturing" of tiles*/
    div.removeAttribute("onclick");
}
</script>
<body id="body" onclick="initGame()" class="vh10 flex center col">
    <h1 id="title"> Click to start! </h1>
</body>
<style>
    /*-webkit-fill-available - prevents safari miscalculation bug*/
    body{margin:0;height:-webkit-fill-available;background-color:#fdfdfdfd;}
    h1{font-size:10mm;}
    .div{width: 25mm; height:25mm; background-color:#111111;margin:2mm;}
    .vh10{height:100vh;}
    .flex{display:flex;}
    .row{flex-direction:row;}
    .col{flex-direction:column;}
    .center{justify-content:center;align-items:center;}
}
</style>
</html>