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;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            padding:0px;
            margin:0px;
        }
        .display{
            height:50%;
            width:50%;
            display: flex;
            flex-wrap: wrap;
            padding:0px;
            margin:0px;
            border: 2px solid #000000;
        }
        .mapPart{
            height: 33%;
            width: 32.333%;
            padding:0px;
            margin:-1px;
            display: flex;
            align-items: center;
            justify-content: center;
            border:1px solid #000000;
        }
    </style>
</head>
<body>
    <div class="display" id="display"></div>
    <script>
        const CircleOrCross = ["none","none","O","X"];
        let currentPlayer = 0;
        let MapArray = [];
        for (let i = 0;i<3;i++) {
            MapArray.push([]);
            for (let j = 0;j<3;j++) {
                MapArray[i].push(2);
                let div = document.createElement('div');
                div.id = "partNo"+i+"/"+j;
                div.className = 'mapPart';
                div.setAttribute("onclick", "set("+i+","+j+")")
                document.getElementById("display").appendChild(div);
                document.getElementById("partNo"+i+"/"+j).style.height = 100/3+"%";
                document.getElementById("partNo"+i+"/"+j).style.width = 100/3+"%";
                console.log("set MapArray property no["+i+"]["+j+"]"+MapArray);
            }
        }
        function set(x,y) {
            if (MapArray[x][y] == 2){
                let img = document.createElement('img');
                img.src = CircleOrCross[currentPlayer];
                img.alt = CircleOrCross[currentPlayer+2];
                document.getElementById("partNo"+x+"/"+y).appendChild(img);
                MapArray[x][y] = currentPlayer;
                let check = 0;
                let j = y-2;
                for (let i = x-2; i < 5-2;i++){
                    try {
                        if (MapArray[i][j] == currentPlayer && x+"/"+y != i+"/"+j){
                            check++;
                            console.log("left to right cross check ="+check);
                        }
                    }catch{}
                    if (checkIfCheck2(check)){
                        break;
                    }
                    j++;
                }
                check = 0;
                j = y+2;
                for (let i = x-2; i < 5-2;i++){
                    try {
                        if (MapArray[i][j] == currentPlayer && x+"/"+y != i+"/"+j){
                            check++;
                            console.log("right to left cross check ="+check);
                        }
                    }catch{}
                    if (checkIfCheck2(check)){
                        break;
                    }
                    j--;
                }
                check = 0;
                j = y;
                for (let i = x-2; i < 5-2;i++){
                    try {
                        if (MapArray[i][j] == currentPlayer && x+"/"+y != i+"/"+j){
                            check++;
                            console.log("vertical check="+check);
                        }
                    }catch{}
                    if (checkIfCheck2(check)){
                        break;
                    }
                }
                check = 0;
                i = x;
                for (let j = y-2; j < 5-2;j++){
                    try {
                        if (MapArray[i][j] == currentPlayer && x+"/"+y != i+"/"+j){
                            check++;
                            console.log("horisontal check ="+check);
                        }
                    }catch{}
                    if (checkIfCheck2(check)){
                        break;
                    }
                }
                check = 0;
                for (i = 0; i < 3;i++){
                    if (MapArray[i].includes(2)){
                        break;
                    } else {
                        check++;
                        console.log("no free spaces check="+check);
                    }
                }
                if (check == 3){
                    let div=document.createElement('div');
                    div.innerHTML = "draw";
                    document.body.appendChild(div);
                    reset();
                }
                currentPlayer = (currentPlayer - 1)*(currentPlayer - 1);
            }
        }
        function checkIfCheck2(check){
            if (check >= 2){
                let div=document.createElement('div');
                div.innerHTML = CircleOrCross[currentPlayer+2]+"'s won";
                document.body.appendChild(div);
                reset();
                return true;
            }
        }
        function reset() {
            for (let i = 0; i < 3; i++){
                for (let j = 0; j < 3; j++){
                    document.getElementById("partNo"+i+"/"+j).textContent = '';
                    MapArray[i][j] = 2;
                    console.log("set MapArray property no["+i+"]["+j+"]");
                }
            }
        }
    </script>
</body>
</html>