Pokomko.github.io/TicTacToe.html at main · Pokomko/Pokomko.github.io · 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
<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>TicTacToe</title>

    <style>
        #poe {
            font-weight: bold;
            background-color: yellow;
            color: black;
            text-align: center;
            font-size: 50pt;
        }

        button {
            width: 150px;
            height: 80px;
            font-size: 35pt;
            margin: 5px;
            background-color: yellow;

            font-weight: bold;
            color: black;
        }
    </style>
</head>

<body>
    <button onclick="Turn(this)">-</button>
    <button onclick="Turn(this)">-</button>
    <button onclick="Turn(this)">-</button><br>
    <button onclick="Turn(this)">-</button>
    <button onclick="Turn(this)">-</button>
    <button onclick="Turn(this)">-</button><br>
    <button onclick="Turn(this)">-</button>
    <button onclick="Turn(this)">-</button>
    <button onclick="Turn(this)">-</button><br><br><br>
    <button onclick="reset()">Reset</button>
    <div id="poe"></div>
    <script>
        var buttons = document.getElementsByTagName("button");
        var display = document.getElementById("poe")
        alert("Крестики первые");
        var i = false;
        var finished = false;

        function Turn(button) {
            if (finished || button.textContent !== '-') {

                return;

            }
            if (i === true) {

                button.textContent = 'O';
                i = false;
            }
            else {
                button.textContent = 'X';
                i = true;
            }
            setTimeout(checkWin, 10);
        }

        function reset() {
            finished = false;
            display.innerHTML = '';
            for (var j = 0; j < 9; j++) {
                buttons[j].textContent = '-';

            }
        }

        function sayWin(winner) {
            finished = true;
            display.innerHTML = "Выйграл " + winner;
        }

        function checkWin() {
            if (buttons[0].textContent === buttons[4].textContent && buttons[4].textContent === buttons[8].textContent && buttons[4].textContent !== '-') {
                sayWin(buttons[0].textContent)
            }
            if (buttons[2].textContent === buttons[4].textContent && buttons[4].textContent === buttons[6].textContent && buttons[2].textContent !== '-') {
                sayWin(buttons[2].textContent)
            }
            for (var j = 0; j < 9; j += 3) {
                if (buttons[j].textContent === buttons[j + 1].textContent && buttons[j + 1].textContent === buttons[j + 2].textContent && buttons[j].textContent !== '-') {
                    sayWin(buttons[j].textContent)
                }
            }
            for (var j = 0; j < 3; j += 1) {
                if (buttons[j].textContent === buttons[j + 3].textContent && buttons[j + 3].textContent === buttons[j + 6].textContent && buttons[j].textContent !== '-') {
                    sayWin(buttons[j].textContent)
                }
            }
        }
    </script>
</body>


</html>