From 42f80bbdd7c79bc20075847bf88265f401e682b4 Mon Sep 17 00:00:00 2001 From: itsyellow04 <143130038+yellowww04@users.noreply.github.com> Date: Fri, 12 Jan 2024 05:48:51 +0700 Subject: [PATCH] Add files via upload --- game-tebakkata/index.html | 28 +++++ game-tebakkata/js/script.js | 62 +++++++++++ game-tebakkata/js/words.js | 198 ++++++++++++++++++++++++++++++++++++ game-tebakkata/style.css | 107 +++++++++++++++++++ 4 files changed, 395 insertions(+) create mode 100644 game-tebakkata/index.html create mode 100644 game-tebakkata/js/script.js create mode 100644 game-tebakkata/js/words.js create mode 100644 game-tebakkata/style.css diff --git a/game-tebakkata/index.html b/game-tebakkata/index.html new file mode 100644 index 0000000..3edbd3b --- /dev/null +++ b/game-tebakkata/index.html @@ -0,0 +1,28 @@ + + + + + Game Tebak Kata + + + + +
+

Tebak Kata

+
+ +
+
+

Petunjuk:

+

Sisa Tebakan:

+

Huruf Salah:

+
+ +
+
+ + + + + + \ No newline at end of file diff --git a/game-tebakkata/js/script.js b/game-tebakkata/js/script.js new file mode 100644 index 0000000..e4ab35a --- /dev/null +++ b/game-tebakkata/js/script.js @@ -0,0 +1,62 @@ +const inputs = document.querySelector(".inputs"), +hintTag = document.querySelector(".hint span"), +guessLeft = document.querySelector(".guess-left span"), +wrongLetter = document.querySelector(".wrong-letter span"), +resetBtn = document.querySelector(".reset-btn"), +typingInput = document.querySelector(".typing-input"); + +let word, maxGuesses, incorrectLetters = [], correctLetters = []; + +function randomWord() { + let ranItem = wordList[Math.floor(Math.random() * wordList.length)]; + word = ranItem.word; + maxGuesses = word.length >= 5 ? 8 : 6; + correctLetters = []; incorrectLetters = []; + hintTag.innerText = ranItem.hint; + guessLeft.innerText = maxGuesses; + wrongLetter.innerText = incorrectLetters; + + let html = ""; + for (let i = 0; i < word.length; i++) { + html += ``; + inputs.innerHTML = html; + } +} +randomWord(); + +function initGame(e) { + let key = e.target.value.toLowerCase(); + if(key.match(/^[A-Za-z]+$/) && !incorrectLetters.includes(` ${key}`) && !correctLetters.includes(key)) { + if(word.includes(key)) { + for (let i = 0; i < word.length; i++) { + if(word[i] == key) { + correctLetters += key; + inputs.querySelectorAll("input")[i].value = key; + } + } + } else { + maxGuesses--; + incorrectLetters.push(` ${key}`); + } + guessLeft.innerText = maxGuesses; + wrongLetter.innerText = incorrectLetters; + } + typingInput.value = ""; + + setTimeout(() => { + if(correctLetters.length === word.length) { + alert(`Selamat! Kamu menemukan kata itu ${word.toUpperCase()}`); + return randomWord(); + } else if(maxGuesses < 1) { + alert("Permainan telah berakhir! Kamu tidak memiliki sisa tebakan"); + for(let i = 0; i < word.length; i++) { + inputs.querySelectorAll("input")[i].value = word[i]; + } + } + }, 100); +} + +resetBtn.addEventListener("click", randomWord); +typingInput.addEventListener("input", initGame); +inputs.addEventListener("click", () => typingInput.focus()); +document.addEventListener("keydown", () => typingInput.focus()); \ No newline at end of file diff --git a/game-tebakkata/js/words.js b/game-tebakkata/js/words.js new file mode 100644 index 0000000..76e7586 --- /dev/null +++ b/game-tebakkata/js/words.js @@ -0,0 +1,198 @@ +let wordList = [ + { + word: "phyton", + hint: "bahasa pemrograman" + }, + { + word: "gitar", + hint: "alat musik dipetik" + }, + { + word: "bidik", + hint: "saat kita memakai senjata" + }, + { + word: "venus", + hint: "planet tata surya kita" + }, + { + word: "emas", + hint: "logam mulia berwarna kuning paling langka" + }, + { + word: "shopee", + hint: "situs belanja online berwarna orange" + }, + { + word: "javascript", + hint: "bahasa pemrograman web" + }, + { + word: "ngoding", + hint: "berkaitan dengan pemrograman" + }, + { + word: "matriks", + hint: "materi yang banyak dialjabar" + }, + { + word: "serangga", + hint: "hewan kecil-kecil" + }, + { + word: "rokok", + hint: "menenangkan pikiran" + }, + { + word: "gif", + hint: "format file untuk gambar bisa bergerak" + }, + { + word: "mental", + hint: "berhubungan dengan pikiran" + }, + { + word: "peta", + hint: "yang sering dikatakan di kartun dora" + }, + { + word: "pulau", + hint: "tanah dikelilingi air" + }, + { + word: "hoki", + hint: "datang keberuntungan" + }, + { + word: "catur", + hint: "permainan yang dimainkan magnus carlsen" + }, + { + word: "whatsapp", + hint: "aplikasi media sosial" + }, + { + word: "github", + hint: "platform hosting kode" + }, + { + word: "png", + hint: "format file gambar" + }, + { + word: "perak", + hint: "logam berharga berwarna putih keabu-abuan" + }, + { + word: "ponsel", + hint: "perangkat elektronik" + }, + { + word: "gpu", + hint: "komponen komputer" + }, + { + word: "jawa", + hint: "bahasa pemrograman" + }, + { + word: "google", + hint: "mesin pencari terkenal" + }, + { + word: "venesia", + hint: "kota perairan yang terkenal" + }, + { + word: "unggul", + hint: "produk microsoft untuk windows" + }, + { + word: "mysql", + hint: "sistem database relasional" + }, + { + word: "nepal", + hint: "nama negara berkembang" + }, + { + word: "seruling", + hint: "alat musik" + }, + { + word: "kripto", + hint: "terkait dengan cryptocurrency" + }, + { + word: "tesla", + hint: "satuan kerapatan fluks magnet" + }, + { + word: "mars", + hint: "planet tata surya kita" + }, + { + word: "proksi", + hint: "terkait dengan aplikasi server" + }, + { + word: "email", + hint: "terkait dengan pertukaran pesan" + }, + { + word: "html", + hint: "bahasa markup untuk web" + }, + { + kata: "udara", + hint: "berhubungan dengan gas" + }, + { + word: "ide", + hint: "sebuah pemikiran atau saran" + }, + { + word: "pelayan", + hint: "berkaitan dengan komputer atau sistem" + }, + { + word: "svg", + hint: "format gambar vektor" + }, + { + kata: "jpeg", + hint: "format file gambar" + }, + { + word:"pencarian", + hint: "bertindak untuk menemukan sesuatu" + }, + { + word: "kunci", + hint: "sepotong kecil logam" + }, + { + word: "Mesir", + hint: "nama negara" + }, + { + word: "pelawak", + hint: "film thriller psikologis" + }, + { + word: "dubai", + hint: "nama negara maju" + }, + { + word: "foto", + hint: "representasi orang atau pemandangan" + }, + { + word: "sungai", + hint: "sungai terbesar di dunia" + }, + { + word: "hujan", + hint: "berhubungan dengan air" + }, +] \ No newline at end of file diff --git a/game-tebakkata/style.css b/game-tebakkata/style.css new file mode 100644 index 0000000..f787ae6 --- /dev/null +++ b/game-tebakkata/style.css @@ -0,0 +1,107 @@ +/* Import Google font - Poppins */ +@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@400;500;600&display=swap'); +*{ + margin: 0; + padding: 0; + box-sizing: border-box; + font-family: 'Poppins', sans-serif; +} +body{ + display: flex; + padding: 0 10px; + min-height: 100vh; + align-items: center; + justify-content: center; + background: #858585; +} +.wrapper{ + width: 720px; + background: #fff; + border-radius: 10px; + box-shadow: 0 10px 25px rgba(0,0,0,0.1); +} +.wrapper h1{ + font-size: 25px; + font-weight: 500; + padding: 20px 25px; + border-bottom: 1px solid #ccc; +} +.wrapper .content{ + margin: 25px 25px 35px; +} +.content .inputs{ + display: flex; + flex-wrap: wrap; + justify-content: center; +} +.inputs input{ + height: 57px; + width: 56px; + margin: 4px; + font-size: 24px; + font-weight: 500; + color: #1ba98c; + text-align: center; + border-radius: 5px; + background: none; + pointer-events: none; + text-transform: uppercase; + border: 1px solid #B5B5B5; +} +.typing-input { + opacity: 0; + z-index: -999; + position: absolute; + pointer-events: none; +} +.inputs input:first-child{ + margin-left: 0px; +} +.content .details{ + margin: 20px 0 25px; +} +.details p{ + font-size: 19px; + margin-bottom: 10px; +} +.content .reset-btn{ + width: 100%; + border: none; + cursor: pointer; + color: #fff; + outline: none; + padding: 15px 0; + font-size: 17px; + border-radius: 5px; + background: #1BB295; + transition: all 0.3s ease; +} +.content .reset-btn:hover{ + background: #18a589; +} + +@media screen and (max-width: 460px) { + .wrapper { + width: 100%; + } + .wrapper h1{ + font-size: 22px; + padding: 16px 20px; + } + .wrapper .content{ + margin: 25px 20px 35px; + } + .inputs input{ + height: 51px; + width: 50px; + margin: 3px; + font-size: 22px; + } + .details p{ + font-size: 17px; + } + .content .reset-btn{ + padding: 14px 0; + font-size: 16px; + } +} \ No newline at end of file