-
Notifications
You must be signed in to change notification settings - Fork 0
/
logic.js
70 lines (65 loc) · 2.36 KB
/
logic.js
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
console.log("TicTacToe");
// let music = new Audio("bgmusic.mp3");
let audioTurn = new Audio("userput.mp3");
let gameover = new Audio("gameover.mp3");
let isgameover = false;
let turn = "X"
// Function to change the turn
const changeTurn = () => {
return turn === "X" ? "0" : "X"
}
// Function to check anyine has win
const checkWin = () => {
let boxtext = document.getElementsByClassName('boxtext');
let wins = [
[0, 1, 2, 5, 5, 0],
[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";
gameover.play();
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)`;
}
})
}
//Logic
// music.play()
let boxes = document.getElementsByClassName("box");
Array.from(boxes).forEach(element => {
let boxtext = element.querySelector(".boxtext");
element.addEventListener('click', (e) => {
if (boxtext.innerText === '') {
boxtext.innerText = turn;
turn = changeTurn();
audioTurn.play();
checkWin();
if (!isgameover) {
document.getElementsByClassName("info")[0].innerText = turn+" Turn";
}
}
})
})
//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';
if (!isgameover) {
document.getElementsByClassName("info")[0].innerText = "Turn for " + turn;
document.querySelector('.imgbox').getElementsByTagName('img')[0].style.width = 'none'
}
})