🧠 Bikin Game Susun Kata dengan HTML, CSS, dan JavaScript

Kalau kamu lagi belajar coding dan pengen bikin proyek web yang seru tapi tetap simpel, game ini cocok banget buat kamu! Di artikel ini, kita akan bareng-bareng bikin game Susun Kata dengan tampilan mode gelap dan fitur level bertahap. Kamu bisa seret huruf-huruf acak dan coba menyusunnya jadi kata yang benar. Seru ‘kan?

✨ Apa Manfaat Proyek Ini?

Selain seru dimainkan, game ini cocok banget buat:

Melatih logika dasar JavaScript

Belajar drag and drop di web

Menggabungkan HTML, CSS, dan JavaScript dalam satu proyek nyata

Bahan portofolio coding-mu!

Kalau kamu masih pemula, proyek ini akan bantu kamu ngerti bagaimana elemen web saling terhubung.

🧱 1. Kode HTML: Struktur Utama Halaman

HTML bertugas membentuk kerangka dasar game. Kita siapkan bagian judul, petunjuk, area huruf, tombol aksi, dan hasil jawaban.

📄 Kode HTML

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Game Susun Kata</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="container">
    <h1>Susun Kata</h1>
    <p id="level">Level 1</p>
    <p class="hint" id="hint"></p>
    <div id="letter-container"></div>
    <button id="action-btn" onclick="checkAnswer()">Cek Jawaban</button>
    <p id="result"></p>
  </div>

  <script src="script.js"></script>
</body>
</html>

📝 Penjelasan:

#letter-container: tempat huruf-huruf yang bisa di-drag.

#action-btn: tombol untuk mengecek jawaban.

#hint: menampilkan petunjuk sesuai level.

🎨 2. Kode CSS: Tampilan Mode Gelap

CSS akan membuat tampilan game jadi kece dengan mode gelap, warna neon, dan tata letak yang rapi.

🎨 Kode CSS

body {
  background-color: #121212;
  color: #fff;
  font-family: 'Segoe UI', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

.container {
  text-align: center;
  background: #1e1e1e;
  padding: 30px;
  border-radius: 15px;
  box-shadow: 0 0 15px #00ffe1;
  max-width: 400px;
}

#letter-container {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 20px 0;
}

.letter {
  padding: 15px 20px;
  background-color: #292929;
  border: 2px solid #00ffe1;
  border-radius: 10px;
  cursor: grab;
  font-size: 24px;
  user-select: none;
}

button {
  padding: 10px 20px;
  background-color: #00ffe1;
  color: #000;
  border: none;
  border-radius: 8px;
  font-size: 16px;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background-color: #00bfa6;
}

#result {
  margin-top: 15px;
  font-size: 18px;
}

#level {
  font-weight: bold;
  margin: 10px 0;
}

📝 Penjelasan:

body dan .container: atur tata letak dan warna dasar.

.letter: gaya untuk setiap huruf.

button: desain tombol interaktif.

⚙️ 3. Kode JavaScript: Logika Permainan

JavaScript adalah otak dari game ini. Ia akan:

Menampilkan huruf acak

Mengecek jawaban

Berpindah ke level berikutnya

Mengulang dari awal saat game selesai

⚙️ Kode JavaScript

const levels = [
  { word: "kucing", hint: "Nama hewan berkaki empat" },
  { word: "pisang", hint: "Buah kuning melengkung" },
  { word: "bintang", hint: "Bersinar di malam hari" },
  { word: "komputer", hint: "Alat bantu kerja digital" },
  { word: "pelangi", hint: "Muncul setelah hujan, warna-warni" }
];

let currentLevel = 0;
let shuffledLetters = [];

const container = document.getElementById("letter-container");
const hintElement = document.getElementById("hint");
const levelText = document.getElementById("level");
const result = document.getElementById("result");
const actionBtn = document.getElementById("action-btn");

function loadLevel() {
  const { word, hint } = levels[currentLevel];
  levelText.textContent = `Level ${currentLevel + 1}`;
  hintElement.textContent = `Petunjuk: ${hint}`;
  shuffledLetters = word.split('').sort(() => Math.random() - 0.5);
  renderLetters();
  result.textContent = "";
}

function renderLetters() {
  container.innerHTML = "";
  shuffledLetters.forEach((char, index) => {
    const span = document.createElement("div");
    span.className = "letter";
    span.textContent = char;
    span.draggable = true;
    span.dataset.index = index;

    span.addEventListener("dragstart", dragStart);
    span.addEventListener("dragover", dragOver);
    span.addEventListener("drop", drop);

    container.appendChild(span);
  });
}

let draggedIndex;

function dragStart(e) {
  draggedIndex = +e.target.dataset.index;
}

function dragOver(e) {
  e.preventDefault();
}

function drop(e) {
  const targetIndex = +e.target.dataset.index;
  [shuffledLetters[draggedIndex], shuffledLetters[targetIndex]] =
    [shuffledLetters[targetIndex], shuffledLetters[draggedIndex]];
  renderLetters();
}

function checkAnswer() {
  const userWord = shuffledLetters.join("");
  const correctWord = levels[currentLevel].word;

  if (userWord === correctWord) {
    result.textContent = "🎉 Benar! Lanjut ke level berikutnya...";
    result.style.color = "#00ffe1";

    setTimeout(() => {
      currentLevel++;
      if (currentLevel < levels.length) {
        loadLevel();
      } else {
        showCompletion();
      }
    }, 1000);
  } else {
    result.textContent = "❌ Salah, coba lagi!";
    result.style.color = "#ff5c5c";
  }
}

function showCompletion() {
  result.textContent = "🏁 Semua level selesai! Hebat!";
  container.innerHTML = "";
  hintElement.textContent = "";
  levelText.textContent = "";

  actionBtn.textContent = "Mulai Lagi";
  actionBtn.onclick = restartGame;
}

function restartGame() {
  currentLevel = 0;
  actionBtn.textContent = "Cek Jawaban";
  actionBtn.onclick = checkAnswer;
  loadLevel();
}

loadLevel();

📝 Penjelasan:

levels: kumpulan level, kata & petunjuk.

renderLetters(): menampilkan huruf-huruf acak.

checkAnswer(): mengecek apakah kata sudah benar.

showCompletion(): muncul saat semua level selesai.

restartGame(): memulai ulang game dari level pertama.

🧩 Penutup

Proyek ini cocok banget untuk latihan JavaScript dasar, sekaligus jadi game mini yang menyenangkan. Kamu bisa kembangkan lagi dengan:

Timer

Skor

Animasi transisi

Tambahan level lewat file JSON

Kalau kamu suka, jangan lupa share dan modifikasi sesuai ide kreatifmu ya!

CandraAndiP

Cari Blog Ini