Add files via upload

andrianxm · Jan 11, 2024 · 42f80bb · 42f80bb
1 parent 0906eda
commit 42f80bb
Show file tree

Hide file tree

Showing 4 changed files with 395 additions and 0 deletions.
diff --git a/game-tebakkata/index.html b/game-tebakkata/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Game Tebak Kata</title>
+    <link rel="stylesheet" href="style.css">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  </head>
+  <body>
+    <div class="wrapper">
+      <h1>Tebak Kata</h1>
+      <div class="content">
+        <input type="text" class="typing-input" maxlength="1">
+        <div class="inputs"></div>
+        <div class="details">
+          <p class="hint">Petunjuk: <span></span></p>
+          <p class="guess-left">Sisa Tebakan: <span></span></p>
+          <p class="wrong-letter">Huruf Salah: <span></span></p>
+        </div>
+        <button class="reset-btn">Ulang Game</button>
+      </div>
+    </div>
+
+    <script src="js/words.js"></script>
+    <script src="js/script.js"></script>
+
+  </body>
+</html>
diff --git a/game-tebakkata/js/script.js 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 += `<input type="text" disabled>`;
+        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());
diff --git a/game-tebakkata/js/words.js 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"
+    },
+]