Game Tebak Hewan HTML Javascript
- Dapatkan link
- X
- Aplikasi Lainnya
Tebak Hewan
Skor: 0
Percobaan: 5
Waktu: 30s
1<!DOCTYPE html>
2<html lang="en">
3<head>
4<style>
5 .bungkusnye {
6 display: flex;
7 flex-direction: column;
8 align-items: center;
9 }
10 .judulnye {text-align:center;
11 padding-bottom : 25px}
12 .bingkai {
13 background: #FFF;
14 color: black;
15 border-radius: 10px;
16 padding: 2em;
17 margin-top: 2em;
18 width: 90%;
19 max-width: 500px;
20 box-shadow: 0 0 10px rgba(0,0,0,0.3);
21 }
22 .status-bar {
23 display: flex;
24 justify-content: space-between;
25 margin-bottom: 1em;
26 }
27 .Objek-container {
28 font-size: 5em;
29 text-align: center;
30 }
31 #KeyBoard-container {
32 display: flex;
33 flex-wrap: wrap;
34 gap: 10px;
35 justify-content: center;
36 margin-bottom: 1em;
37 }
38 .KeyBoard {
39 width: 1.8em;
40 height: 1.8em;
41 font-size: 1.5em;
42 -webkit-box-shadow: 0 3.5px 11.5px -1.5px #a4a4a4;
43 -moz-box-shadow: 0 3.5px 11.5px -1.5px #a4a4a4;
44 box-shadow: 0 3.5px 11.5px -1.5px #a4a4a4;
45 cursor: pointer;
46 }
47 .KeyBoard:hover{
48 background:#3da1ff;
49 color: #FFF;
50 }
51 .used {
52 -webkit-box-shadow: 0 3.5px 0 -32px #a4a4a4;
53 -moz-box-shadow: 0 3.5px 0 -32px #a4a4a4;
54 box-shadow: 0 3.5px 0 -32px #a4a4a4;
55 cursor: not-allowed;
56 }
57 .inputSpace {
58 font-weight: bold;
59 }
60 #userInputSection {
61 display: flex;
62 justify-content: center;
63 gap: 10px;
64 margin-bottom: 1em;
65 }
66 #result {
67 font-size: 1.2em;
68 margin: 1em 0;
69 color: darkgreen;
70 text-align: center;
71 }
72 #start{width:100%;padding:10px;font-size:1em;font-weight:bold;border:none;border-radius:10px;background:#007bff;color:#fff;cursor:pointer;display:none;}
73 #start:hover{background:#0056b3}
74 #waktu {
75 font-weight: bold;
76 }
77 #nilai {
78 font-weight: bold;
79 }
80 #usaha {
81 font-weight: bold;
82 }
83 </style>
84 </head>
85 <body>
86 <div class="bungkusnye">
87 <div class="bingkai">
88 <h2 class="judulnye">Tebak Hewan</h2>
89 <div class="status-bar">
90 <div id="nilai">Skor: 0</div>
91 <div id="usaha">Percobaan: 5</div>
92 <div id="waktu">Waktu: 30s</div>
93 </div>
94 <div class="Objek-container" id="ObjekNye"></div>
95 <div id="userInputSection"></div>
96 <div id="KeyBoard-container"></div>
97 <div id="result"></div>
98 <button id="start">Main Lagi</button>
99 </div>
100 </div>
101 <script>
102 // array dari gambar objek dan textnya
103 const soal = {
104 "🦒": "Jerapah",
105 "🦬": "Banteng",
106 "🦓": "Zebra",
107 "🦌": "Rusa",
108 "🦘": "Kanguru",
109 "🦥": "Kungkang",
110 "🦫": "Berang Berang",
111 "🐿️": "Bajing",
112 "🦭": "Anjing Laut",
113 "🐢": "Kura Kura",
114 "🦧": "Orang Utan",
115 "🐍": "Ular",
116 "🦎": "Kadal",
117 "🐅": "Harimau",
118 "🐆": "Macan Tutul",
119 "🐪": "Unta",
120 "🐘": "Gajah",
121 "🦏": "Badak",
122 "🦛": "Kuda Nil",
123 "🐐": "Kambing",
124 "🐏": "Domba",
125 "🐎": "Kuda",
126 "🐃": "Kerbau",
127 "🐄": "Sapi",
128 "🐖": "Babi",
129 "🦇": "Kelelawar",
130 "🐒": "Monyet",
131 "🦍": "Gorila",
132 "🐝": "Lebah",
133 "🐛": "Ulat",
134 "🦋": "Kupu Kupu",
135 "🐌": "Siput",
136 "🐞": "Kumbang",
137 "🐜": "Semut",
138 "🪱": "Cacing",
139 "🪳": "Kecoa",
140 "🦗": "Jangkrik",
141 "🦂": "Kalajengking",
142 "🦟": "Nyamuk",
143 "🐊": "Buaya",
144 "🐋": "Paus",
145 "🦈": "Hiu",
146 "🐬": "Lumba Lumba",
147 "🦐": "Udang",
148 "🦀": "Kepiting",
149 "🦑": "Cumi Cumi",
150 "🐙": "Gurita",
151 "🐓": "Ayam",
152 "🦅": "Rajawali",
153 "🦢": "Angsa",
154 "🦆": "Bebek",
155 "🦩": "Flamingo",
156 "🦜": "Kakatua",
157 "🦉": "Burung Hantu",
158 "🦚": "Merak",
159 "🐕": "Anjing",
160 "🐈": "Kucing",
161 "🐇": "Kelinci",
162 "🐀": "Tikus",
163 "🦨": "Sigung",
164 "🦡": "Luwak",
165 "🦔": "Landak",
166 "🪼": "Ubur Ubur",
167 "🕷": "Laba Laba",
168 "🪰": "Lalat",
169 "🐧": "Pinguin",
170 "🦪": "Kerang",
171 };
172 const SetDetik = 30; // set berapa detik waktu untuk menjawab
173 const SetNyawa = 5; // set berapa banyak percobaan yang tersedia dalam 1 jawaban
174 const NamaObjek = Object.keys(soal);
175 let usedHints = [];
176 let nilai = 0, lossCount = SetNyawa, winCount = 0, waktu = SetDetik, timerInterval;
177 let randomHint = "", randomWord = "";
178 const nilaiDisplay = document.getElementById("nilai");
179 const usahaDisplay = document.getElementById("usaha");
180 const waktuDisplay = document.getElementById("waktu");
181 const TampilinObjek = document.getElementById("ObjekNye");
182 const userInput = document.getElementById("userInputSection");
183 const KeyBoardContainer = document.getElementById("KeyBoard-container");
184 const resultDisplay = document.getElementById("result");
185 const startButton = document.getElementById("start");
186 function updateDisplays() {
187 nilaiDisplay.textContent = "Skor: " + nilai;
188 usahaDisplay.textContent = "Percobaan: " + lossCount;
189 waktuDisplay.textContent = "Waktu: " + waktu + " Detik";
190 }
191 function startwaktu() {
192 clearInterval(timerInterval);
193 waktu = SetDetik;
194 waktuDisplay.textContent = "Waktu: " + waktu + " Detik";
195 timerInterval = setInterval(() => {
196 waktu--;
197 waktuDisplay.textContent = "Waktu: " + waktu + " Detik";
198 if (waktu === 0) {
199 clearInterval(timerInterval);
200 Berakhir("⏰ Waktu Habis Bro!"); // set pernyataan kalo waktu abis dan tidak bisa jawab.
201 }
202 }, 1000);
203 }
204 function RandomObjek() {
205 if (usedHints.length === NamaObjek.length) usedHints = [];
206 let availableHints = NamaObjek.filter(h => !usedHints.includes(h));
207 randomHint = availableHints[Math.floor(Math.random() * availableHints.length)];
208 usedHints.push(randomHint);
209 randomWord = soal[randomHint];
210 }
211 function NamaHewan() {
212 userInput.innerHTML = "";
213 winCount = 0;
214 randomWord.split("").forEach(char => {
215 let span = document.createElement("span");
216 span.className = "inputSpace";
217 if (char === " ") {
218 span.textContent = " ";
219 winCount++;
220 } else {
221 span.textContent = "_";
222 }
223 userInput.appendChild(span);
224 });
225 }
226 function BuatKey() {
227 KeyBoardContainer.innerHTML = "";
228 for (let i = 65; i <= 90; i++) {
229 let btn = document.createElement("button");
230 btn.className = "KeyBoard";
231 btn.textContent = String.fromCharCode(i);
232 btn.addEventListener("click", handleGuess);
233 KeyBoardContainer.appendChild(btn);
234 }
235 }
236 function handleGuess(e) {
237 const btn = e.target;
238 const char = btn.textContent;
239 btn.classList.add("used");
240 btn.disabled = true;
241 let charArray = randomWord.toUpperCase().split("");
242 let inputSpaces = document.getElementsByClassName("inputSpace");
243 if (charArray.includes(char)) {
244 charArray.forEach((c, i) => {
245 if (c === char) {
246 inputSpaces[i].textContent = c;
247 winCount++;
248 }
249 });
250 if (winCount === charArray.length) {
251 clearInterval(timerInterval);
252 nilai++;
253 resultDisplay.textContent = "✅ Benar!"; // set kalau jawaban benar.
254 updateDisplays();
255 setTimeout(Lanjutin, 1000);
256 }
257 } else {
258 lossCount--;
259 updateDisplays();
260 if (lossCount === 0) {
261 clearInterval(timerInterval);
262 Berakhir("❌ Kamu Gagal Jawab!"); // set kalau gagal menjawab untuk beberapa kali perobaan.
263 }
264 }
265 }
266 function Lanjutin() {
267 resultDisplay.textContent = "";
268 lossCount = SetNyawa;
269 updateDisplays();
270 RandomObjek();
271 TampilinObjek.textContent = randomHint;
272 NamaHewan();
273 BuatKey();
274 startwaktu();
275 }
276 function Berakhir(message) {
277 resultDisplay.textContent = message;
278 KeyBoardContainer.innerHTML = "";
279 startButton.style.display = "inline-block";
280 startButton.onclick = () => {
281 nilai = 0;
282 lossCount = SetNyawa;
283 updateDisplays();
284 startButton.style.display = "none";
285 resultDisplay.textContent = "";
286 Lanjutin();
287 };
288 }
289 window.onload = () => {
290 updateDisplays();
291 Lanjutin();
292 };
293 </script>
294 </body>
295</html>- Dapatkan link
- X
- Aplikasi Lainnya
Komentar
Posting Komentar