-
Notifications
You must be signed in to change notification settings - Fork 1
/
Copy path4x4.html
220 lines (206 loc) · 10.6 KB
/
4x4.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
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<!DOCTYPE html>
<head>
<title>Tic-Tac-Mas</title>
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1, maximum-scale=1">
<script src="js/4x4.js"></script>
<link rel="stylesheet" href="dist/css/reset.css">
<link rel="stylesheet" href="dist/css/style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/8.0.1/normalize.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link href="https://fonts.googleapis.com/css?family=Yeon+Sung&display=swap" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=McLaren&display=swap" rel="stylesheet">
</head>
<body onload="newboard();">
<div class="navbar-container">
<a id="button-audio" onclick="audioFunction()" class=" nav-button">
<p id="icon-music" class="icon-2"><i class="fa fa-music"></i></p>
</a>
<a id="button" class="nav-button">
<p class="icon"><i class="fa fa-question"></i></p>
</a>
<a href="./about.html" class="nav-button">
<p class="icon"><i class="fa fa-gamepad"></i></p>
</a>
<a href="./index.html" class="nav-button">
<p class="icon"><i class="fa fa-home"></i></p>
</a>
</div>
<div id="modal" class="modal">
<div class="modal-content">
<span class="close">×</span>
<h1 class="subtitle">Cara Bermain</h1>
<hr class="line">
<div class="how-to-content">
<p><span class="bold">1. Pilih papannya.</span> Pertama, Anda harus milih papan permainannya, yang
terdiri dari petak-petak persegi 3 x 3, 4 x 4, atau 5 x 5. Pada Cara Bermain di sini, kita akan
fokus pada petak 3 x 3.</p>
<p><span class="bold">2. Biarkan pemain pertama bermain terlebih dulu.</span> Meskipun tradisionalnya,
pemain pertama bermain dengan “X”, Anda dapat mengizinkan pemain pertama menentukan apakah dia ingin
memainkan “X” atau “O”. Simbol-simbol ini akan digambar pada tabel, dalam usaha untuk menggambar
tiga simbol yang sama dalam satu deret. Jika Anda menjadi pemain pertama, “langkah terbaik yang
dapat Anda lakukan adalah menggambar simbol Anda di kotak tengah.” Ini akan memaksimalkan peluang
Anda untuk menang, karena Anda akan dapat membuat sederet tiga “X” atau “O” dalam lebih banyak
kombinasi (4) dengan cara ini daripada jika Anda memilih kotak yang berbeda.</p>
<p><span class="bold">3. Selanjutnya, giliran pemain kedua bermain.</span> Setelah pemain pertama
menggambar simbol, pemain kedua harus menggambar simbolnya, yang akan berbeda dari simbol yang
digunakan oleh pemain pertama. Pemain kedua dapat berusaha memblokir pemain pertama membuat tiga
simbol dalam satu deret, atau fokus pada pembuatan tiga simbol dalam satu deretnya sendiri.
Idealnya, seorang pemain dapat melakukan keduanya secara bersamaan.</p>
<p><span class="bold">4. Teruslah bergiliran menggambar simbol masing-masing sampai salah satu pemain
telah menggambar tiga simbol dalam satu deret atau sampai tidak ada pemain yang dapat
menang.</span> Pemain yang pertama kali menggambar tiga simbolnya dalam satu deret, entah secara
horizontal, vertikal, ataupun diagonal, menjadi pemenang permainan. Namun, jika kedua pemain
menggunakan strategi optimal, kemungkinan besar tidak akan ada pemenang karena kalian akan saling
memblokir kesempatan masing-masing untuk membuat tiga simbol dalam satu deret.</p>
<p><span class="bold">5. Teruslah berlatih. Berlawanan dengan kepercayaan umum, tic-tac-toe bukanlah
sepenuhnya permainan peluang.</span> Ada beberapa strategi yang dapat membantu Anda
mengoptimalkan kemampuan Anda dan membuat Anda menjadi pemain tic-tac-toe yang ahli. Jika Anda terus
bermain, Anda akan segera mempelajari semua trik untuk memastikan Anda memenangkan setiap permainan
— atau, setidaknya, Anda akan mempelajari trik-trik untuk memastikan Anda tidak pernah kalah.</p>
</div>
</div>
</div>
<div class="content-container">
<h1 class="title-2">Tic-Tac-Mas</h1>
<div class="board-container">
<div class="board-size">
<div class="size">
<button id="size3" onclick="function3()" class="button-size">3x3</button>
<button id="size4" onclick="function4()" class="button-size">4x4</button>
<button id="size5" onclick="function5()" class="button-size">5x5</button>
</div>
</div>
<div class="board-content">
<div class="row-board">
<img class="tile" src="images/blank.png" onclick="makeMove(0)" />
<img class="tile" src="images/blank.png" onclick="makeMove(1)" />
<img class="tile" src="images/blank.png" onclick="makeMove(2)" />
<img class="tile" src="images/blank.png" onclick="makeMove(3)" />
</div>
<div class="row-board">
<img class="tile" src="images/blank.png" onclick="makeMove(4)" />
<img class="tile" src="images/blank.png" onclick="makeMove(5)" />
<img class="tile" src="images/blank.png" onclick="makeMove(6)" />
<img class="tile" src="images/blank.png" onclick="makeMove(7)" />
</div>
<div class="row-board">
<img class="tile" src="images/blank.png" onclick="makeMove(8)" />
<img class="tile" src="images/blank.png" onclick="makeMove(9)" />
<img class="tile" src="images/blank.png" onclick="makeMove(10)" />
<img class="tile" src="images/blank.png" onclick="makeMove(11)" />
</div>
<div class="row-board">
<img class="tile" src="images/blank.png" onclick="makeMove(12)" />
<img class="tile" src="images/blank.png" onclick="makeMove(13)" />
<img class="tile" src="images/blank.png" onclick="makeMove(14)" />
<img class="tile" src="images/blank.png" onclick="makeMove(15)" />
</div>
<input class="new-game" type="button" value="Permainan Baru" onclick="newboard()" />
</div>
<div class="info-game">
<p id="turnInfo"> TURN INFO </p>
</div>
</div>
<img class="pohon-1" src="dist/assets/pohon-1.png" />
<img class="pohon-2" src="dist/assets/pohon-2.png" />
<img class="semak-2" src="dist/assets/semak-2.png" />
</div>
<p class=footer-text>© Copyright 2019. All rights reserved.
<br>Darin Amanda - M. Fachry - Roshani Ayu</p>
</p>
</div>
<audio id="myAudio" allow='autoplay' loop='loop' loop>
<source src="music/cublak.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
</body>
<script>
var modal = document.getElementById("modal");
// Get the button that opens the modal
var btn = document.getElementById("button");
// Get the <span> element that closes the modal
var span = document.getElementsByClassName("close")[0];
// When the user clicks the button, open the modal
btn.onclick = function () {
modal.style.display = "flex";
}
// When the user clicks on <span> (x), close the modal
span.onclick = function () {
modal.style.display = "none";
}
// When the user clicks anywhere outside of the modal, close it
window.onclick = function (event) {
if (event.target == modal) {
modal.style.display = "none";
}
}
var x = document.getElementById("myAudio");
var checkAudio = true;
var property = document.getElementById("icon-music");
function audioFunction() {
if (checkAudio === true) {
property.style.color = "#F08732";
x.play();
checkAudio = false;
} else if (checkAudio === false) {
property.style.color = "#FFFFFF";
x.pause();
checkAudio = true;
}
}
function function3() {
let params = (new URL(document.location)).searchParams;
let name = params.get('name');
let level = params.get('level')
if (level === "easy") {
if (name === "butoIjo") {
window.location.href = '3x3.html?name=butoIjo&level=easy';
} else if (name === "timunMas") {
window.location.href = '3x3.html?name=timunMas&level=easy';
}
} else {
if (name === "butoIjo") {
window.location.href = '3x3.html?name=butoIjo';
} else if (name === "timunMas") {
window.location.href = '3x3.html?name=timunMas';
}
}
}
function function4() {
let params = (new URL(document.location)).searchParams;
let name = params.get('name');
let level = params.get('level')
if (level === "easy") {
if (name === "butoIjo") {
window.location.href = '4x4.html?name=butoIjo&level=easy';
} else if (name === "timunMas") {
window.location.href = '4x4.html?name=timunMas&level=easy';
}
} else {
if (name === "butoIjo") {
window.location.href = '4x4.html?name=butoIjo';
} else if (name === "timunMas") {
window.location.href = '4x4.html?name=timunMas';
}
}
}
function function5() {
let params = (new URL(document.location)).searchParams;
let name = params.get('name');
let level = params.get('level');
if (level === "easy") {
if (name === "butoIjo") {
window.location.href = '5x5.html?name=butoIjo&level=easy';
} else if (name === "timunMas") {
window.location.href = '5x5.html?name=timunMas&level=easy';
}
} else {
if (name === "butoIjo") {
window.location.href = '5x5.html?name=butoIjo';
} else if (name === "timunMas") {
window.location.href = '5x5.html?name=timunMas';
}
}
}
</script>
</html>