script.js

console.log("Welcome to Tic Tac Toe")

let music = new Audio("music.mp3")
let audioturn = new Audio("click.wav")
let gameover = new Audio("gamewin.wav")

let turn = "X"
let isgameover = false ;
// Funcion to change x to o
const changeTurn = () =>{
    return turn==="X" ? "O" : "X"
}
document.getElementsByClassName('info')[0].innerText = "Turn of  " + turn;

// Check win
const checkWin = () => {
    let boxtext = document.getElementsByClassName('boxtext');
    let wins = [
        [0,1,2,5,5,0],  
        // Last three values are for translate X,y and rotate
        [3,4,5,5,15,0],
        [6,7,8,5,25,0],
        [0,3,6,-5,15,90],
        [1,4,7,5,15,90],
        [2,5,8,15,15,90],
        [0,4,8,5,15,45],
        [2,4,6,5,15,135],
    ]

    wins.forEach(e => {
        if ((boxtext[e[0]].innerText === boxtext[e[1]].innerText) && (boxtext[e[2]].innerText === boxtext[e[1]].innerText) && boxtext[e[0]].innerText !== "" ){
        document.querySelector('.info').innerText = boxtext[e[0]].innerText + " Won!!"
        isgameover = true
        document.querySelector('.imgBox').getElementsByTagName('img')[0].style.width = "200px";
        document.querySelector(".line").style.width="20vw";
        document.querySelector(".line").style.transform = `translate(${e[3]}vw,${e[4]}vw) rotate(${e[5]}deg)`;
        gameover.play();
        }
    })
}

// logic
// music.play();
let boxes= document.getElementsByClassName("box");
Array.from(boxes).forEach(element => {
    let boxtext = element.querySelector('.boxtext');
    element.addEventListener('click', () => {
        if(boxtext.innerText === ''){
             boxtext.innerText = turn ;
             turn = changeTurn();
             audioturn.play();
             checkWin();
             if (!isgameover){
                document.getElementsByClassName('info')[0].innerText = "Turn of  " + turn;
             }
             
        }
    })
})

//add event listener to reset button
reset.addEventListener('click', () => {
    let boxtexts = document.querySelectorAll('.boxtext');
    Array.from(boxtexts).forEach(element =>{
        element.innerText=""
    });
    turn="X";
    isgameover=false
    document.querySelector(".line").style.width="0vw";
    document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
    document.querySelector('.imgBox').getElementsByTagName('img')[0].style.width = "0px"
})