tic-tac-toe/script.js at main · Ayon-coder/tic-tac-toe · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
let boxes=document.querySelectorAll(".box");
let resetBtn=document.querySelector(".reset");
let newGbtn=document.querySelector(".newGbtn");
let msg=document.querySelector(".msg");
let win=document.querySelector("#win");
let drawGame=document.querySelector(".draw");

let turnO=true; //player O/Player X

const winPatterns =[
    [0,1,2],
    [0,3,6],
    [0,4,8],
    [1,4,7],
    [2,5,8],
    [2,4,6],
    [3,4,5],
    [6,7,8],
];

function draw()
{
    d=false;
    for(let box of boxes)
    {
        if(box.innerText == "")
        {
            d=false;
            break;
        }
        else
            d=true
    }
    if(d)
    {
        drawGame.classList.remove("hide");
    }
}

function resetGame()
{
    turnO=true;
    enBox();
    msg.classList.add("hide");
}

function clickE(evt)
{
    if(turnO)
    {
        evt.target.innerText="O";
        turnO=false;
    }
    else
    {
        evt.target.innerText="X";
        turnO=true;
    }
    evt.target.disabled=true;
    checkWinner();
    draw();
}

function showWinner(Winner)
{
    win.innerText=`Winner is ${Winner}`
    msg.classList.remove("hide");
    disBox();

}

function disBox()
{
    for(let box of boxes)
    {
        box.disabled=true;
    }
}

function enBox()
{
    for(let box of boxes)
    {
        box.disabled=false;
        box.innerText="";
    }
}

for (let box of boxes)
{
    box.addEventListener("click", clickE);
}

function checkWinner()
{
    let winner_f=false
    for (let pattern of winPatterns)
    {
        let pso1Val=boxes[pattern[0]].innerText;
        let pos2val=boxes[pattern[1]].innerText;
        let pos3Val=boxes[pattern[2]].innerText;
        if(pso1Val != "" && pos2val != '' && pos3Val != "")
        {
            if(pso1Val==pos2val && pos2val===pos3Val)
            {
                winner_f=true;
                showWinner(pso1Val);
            }
        }
    }
}

newGbtn.addEventListener("click",resetGame);
resetBtn.addEventListener("click",resetGame);