Simple Tic Tac Toe Game
A very basic Tic-Tac-Toe game
HTML
1 <!DOCTYPE html>
2 <html lang="en">
3 <head>
4 <title>Tic Tac Toe</title>
5 <style>
6 * {
7 padding: 0;
8 margin: 0;
9 }
10 .container {
11 width: 100vw;
12 height: 100vh;
13 display: flex;
14 flex-direction: column;
15 align-items: center;
16 justify-content: center;
17 }
18 .row {
19 width: 100%;
20 display: flex;
21 justify-content: center;
22 margin-top: 10px;
23 }
24 .pad {
25 width: 25vw;
26 height: 25vw;
27 margin-right: 10px;
28 border-radius: 20px;
29 }
30 </style>
31 </head>
32 <body>
33 <div class="container">
34 <h2 id="ins">Player 1's turn</h2>
35 <div class="row">
36 <button class="pad" index="0"></button>
37 <button class="pad" index="1"></button>
38 <button class="pad" index="2"></button>
39 </div>
40 <div class="row">
41 <button class="pad" index="3"></button>
42 <button class="pad" index="4"></button>
43 <button class="pad" index="5"></button>
44 </div>
45 <div class="row">
46 <button class="pad" index="6"></button>
47 <button class="pad" index="7"></button>
48 <button class="pad" index="8"></button>
49 </div>
50 </div>
51
52 <script>
53 var pads = document.getElementsByClassName("pad")
54 var instruction = document.getElementById("ins")
55 var arr = new Array(9).fill(0)
56 var player = 1, count = 0
57 var combi = [
58 [0,1,2],
59 [3,4,5],
60 [6,7,8],
61 [0,3,6],
62 [1,4,7],
63 [2,5,8],
64 [0,4,8]
65 ]
66
67 for( var i=0; i<pads.length; i++ ) {
68 pads[i].onclick = onClick
69 }
70
71 function onClick() {
72 var index = this.getAttribute("index")
73 index = parseInt(index)
74
75 if( arr[index] > 0 ) return
76
77 arr[index] = player
78
79 this.style.backgroundColor = player == 1 ? "blue" : "red"
80 player = player == 1 ? 2 : 1
81 instruction.innerText = "Player "+player+"'s turn"
82 count ++
83 checkForWinnder()
84 }
85
86 function checkForWinnder() {
87 var winner = null
88 for( var i=0; i<combi.length; i++ ) {
89 var c = combi[i]
90 var a = (arr[c[0]] == arr[c[1]] && arr[c[0]] == arr[c[2]] && arr[c[0]] > 0)
91 if( a ) {
92 winner = arr[c[0]]
93 break
94 }
95 }
96 if( winner ) {
97 instruction.innerText = "Winner is Player " + winner
98 for( var i=0; i<pads.length; i++ )
99 pads[i].onclick = null
100 count = 0
101 } else if( count >= 9 ) {
102 location.reload()
103 }
104 }
105 </script>
106 </body>
107 </html>
