-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
154 lines (136 loc) · 6.19 KB
/
index.html
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
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
<html>
<head>
<title>Tic-Tok</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<script src="https://cdn.tailwindcss.com"></script>
<script src="https://cdn.jsdelivr.net/npm/vue@2/dist/vue.js"></script>
</head>
<body>
<div id="app" class="min-h-full flex items-center justify-center py-12 px-4 sm:px-6 lg:px-8 bg-blue-100">
<div class="max-w-md w-full bg-white px-10 py-4 rounded">
<div class="relative">
<div class="py-4 pb-10">
<h1 class="text-center text-2xl text-gray-600 font-bold">Tic Tac Toe</h1>
<h2 v-if="winner == ''" class="text-center text-lg mt-2 text-gray-400">
Current player: {{currentPlayer}}</h2>
<h2 v-else class="text-center text-lg mt-2 text-gray-400">Winner is {{winner}}</h2>
</div>
<div class="flex justify-item">
<label for="checked-toggle"
class="absolute inline-flex items-center mt-4 bottom-0 right-0 cursor-pointer ">
<input type="checkbox" id="checked-toggle" v-model="is1Player" class="sr-only peer" checked>
<div
class="w-11 h-6 bg-gray-200 rounded-full peer peer-focus:ring-4 peer-focus:ring-blue-300 dark:peer-focus:ring-blue-800 dark:bg-gray-700 peer-checked:after:translate-x-full peer-checked:after:border-white after:content-[''] after:absolute after:top-0.5 after:left-[2px] after:bg-white after:border-gray-300 after:border after:rounded-full after:h-5 after:w-5 after:transition-all dark:border-gray-600 peer-checked:bg-blue-600">
</div>
<span class="ml-3 text-sm font-medium text-gray-900 dark:text-gray-300">1 player</span>
</label>
</div>
<button @click="startGame" class="bg-blue-200 p-2 top-6 right-0 absolute rounded">
<svg class="w-6 h-6 stroke-blue-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"
xmlns="http://www.w3.org/2000/svg">
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2"
d="M4 4v5h.582m15.356 2A8.001 8.001 0 004.582 9m0 0H9m11 11v-5h-.581m0 0a8.003 8.003 0 01-15.357-2m15.357 2H15">
</path>
</svg>
</button>
</div>
<div class="grid grid-flow-col grid-rows-3 mt-4">
<div class="flex h-32 w-32 items-center justify-center border text-5xl cursor-pointer"
@click="changePlayer(index)" v-for="(cell, index) in cells">
{{ cell }}
</div>
</div>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
currentPlayer: "X",
boatPlayer: "O",
cells: [],
winner: "",
is1Player: true
},
created() {
this.startGame();
},
methods: {
takeBoatTurn() {
let randomIndex = Math.floor(Math.random() * 9);
this.is1Player = true;
if (this.cells[randomIndex] == "") {
this.cells.splice(randomIndex, 1, this.boatPlayer);
this.checkForWinner();
} else {
this.takeBoatTurn();
}
},
startGame() {
this.winner = "";
this.cells = [];
for (let index = 0; index < 9; index++) {
this.cells.push("");
}
this.currentPlayer = "X";
},
changePlayer(index) {
if (this.winner != '') {
return
}
if (this.cells[index] == "") {
this.cells.splice(index, 1, this.currentPlayer);
} else {
return;
}
if (this.is1Player == false) {
this.changeTurn();
}
this.checkForWinner();
if (this.winner == '' && this.is1Player == true) {
this.takeBoatTurn();
}
},
changeTurn() {
if (this.currentPlayer == "X") {
this.currentPlayer = "O";
} else {
this.currentPlayer = "X";
}
},
checkForWinner() {
for (let i = 0; i < 3; i += 1) {
if (this.cells[i] != "") {
if (this.cells[i] == this.cells[i + 3] && this.cells[i] == this.cells[i + 6]) {
this.winner = this.cells[i];
return;
}
}
}
for (let i = 0; i < 7; i += 3) {
if (this.cells[i] != "") {
if (this.cells[i] == this.cells[i + 1] && this.cells[i] == this.cells[i + 2]) {
this.winner = this.cells[i];
return;
}
}
}
if (this.cells[0] != "") {
if (this.cells[0] == this.cells[4] && this.cells[0] == this.cells[8]) {
this.winner = this.cells[0];
return;
}
}
if (this.cells[2] != "") {
if (this.cells[2] == this.cells[4] && this.cells[4] == this.cells[6]) {
this.winner = this.cells[2];
return;
}
}
}
}
})
</script>
</body>
</html>