tic-tac-toe/app.js at main · fakelozic/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
const squareC = document.querySelectorAll(".squareC")
const playerOneDis = document.querySelector("#playerOneDis");
const playerTwoDis = document.querySelector("#playerTwoDis");

const winCombi = [
    ['box1', 'box2', 'box3'],
    ['box4', 'box5', 'box6'],
    ['box7', 'box8', 'box9'],
    ['box1', 'box4', 'box7'],
    ['box2', 'box5', 'box8'],
    ['box3', 'box6', 'box9'],
    ['box1', 'box5', 'box9'],
    ['box3', 'box5', 'box7'],
]
let playerOne = [];
let playerTwo = [];
let usedSquare = [];

// Checking turns for players, true = PlayerOne turn and false = PlayerTwo
let turnCheck = true;

function play(e) {
    if (usedSquare.length <= 8){
        if(turnCheck && !usedSquare.includes(e.target.id)){
            e.target.classList.add("pOneColor");
            usedSquare.push(e.target.id);
            playerOne.push(e.target.id);
            turnCheck = false;
        }
        else if(!turnCheck && !usedSquare.includes(e.target.id)){
            e.target.classList.add("pTwoColor");
            usedSquare.push(e.target.id);
            playerTwo.push(e.target.id);
            turnCheck = true;
        }
        else {
            alert(`BOX ALREADY IN USE`)
        }
        winCheck(playerOne, playerTwo, winCombi);
    }
    else {
        alert(`OUT OF OPTIONS`)
    }
}

// playfunc ensure that nothing hppens after gave is over
let playfunc = true;

// for listning all the events on squares
squareC.forEach(square =>{
    square.addEventListener("click", (e)=>{
        if(playfunc){
            play(e);
        }
    })
})


// game's logic it checks after every move which player has won
function winCheck(arr1, arr2, arrWC) {

    let pOneResult
    if(arr1.length >= 3){
        pOneResult = arrWC[0].every(e => arr1.includes(e))
            || arrWC[1].every(e => arr1.includes(e))
            || arrWC[2].every(e => arr1.includes(e))
            || arrWC[3].every(e => arr1.includes(e))
            || arrWC[4].every(e => arr1.includes(e))
            || arrWC[5].every(e => arr1.includes(e))
            || arrWC[6].every(e => arr1.includes(e))
            || arrWC[7].every(e => arr1.includes(e));
    }

    let pTwoResult
    if(arr2.length >= 3){
        pTwoResult = arrWC[0].every(e => arr2.includes(e))
            || arrWC[1].every(e => arr2.includes(e))
            || arrWC[2].every(e => arr2.includes(e))
            || arrWC[3].every(e => arr2.includes(e))
            || arrWC[4].every(e => arr2.includes(e))
            || arrWC[5].every(e => arr2.includes(e))
            || arrWC[6].every(e => arr2.includes(e))
            || arrWC[7].every(e => arr2.includes(e));
    }

    // for Displaying the winner and checking if either has won
    if(pOneResult){
        playfunc = false;
        playerOneDis.textContent = `YOU WON!!`;
        playerTwoDis.textContent = `YOU LOST!!`;

    }
    else if(pTwoResult){
        playfunc = false;
        playerTwoDis.textContent = `YOU WON!!`;
        playerOneDis.textContent = `YOU LOST!!`;
    }
    else if(!pOneResult && !pTwoResult && usedSquare.length == 9){
        alert(`IT'S A DRAW, SHAKE HANDS NOT FIST`)
    }
}