🧠 Apa Itu Game Lairin Teks?

Game Lairin Teks adalah permainan sederhana di mana kamu harus mengetik kata yang muncul secepat mungkin sebelum waktunya habis. Kalau benar, kamu akan dapat skor dan waktu tambahan. Tapi kalau kamu terlalu lama mikir… ya, waktumu habis deh 😅.

Game ini cocok banget buat belajar:

HTML (struktur halaman)

CSS (tampilan dan animasi)

JavaScript (logika dan interaksi)

Cocok banget buat kamu yang pengin mulai bikin game sederhana langsung di browser.

🌟 Kenapa Proyek Ini Seru dan Bermanfaat?

Belajar DOM manipulation di JavaScript

Latihan bikin timer dan skor

Tambah skill bikin game HTML

Bisa dijadikan proyek portfolio atau konten video coding

Tampilannya warna-warni dan responsif, cocok juga dimainkan di HP!

🧱 1. Struktur HTML (Tampilan Dasar)

Kita mulai dari kerangka utamanya dulu. Di sini kita pakai elemen-elemen seperti <h1>, <input>, dan <div> untuk menampilkan kata, waktu, dan skor.

🔧 Kode HTML:

<!DOCTYPE html>
<html lang="id">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Lairin Teks Game</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="game-container">
    <h1>💥 Lairin Teks! 💥</h1>
    <div id="word" class="rainbow-text">Memuat...</div>
    <input type="text" id="input" placeholder="Ketik di sini..." autofocus />
    <div class="info">
      ⏱️ Waktu: <span id="time">30</span> | 🎯 Skor: <span id="score">0</span>
    </div>
    <button id="restartBtn">🔄 Mulai Lagi</button>
  </div>

  <!-- Efek Suara -->
  <audio id="correctSound" src="https://www.soundjay.com/buttons/sounds/button-3.mp3"></audio>
  <audio id="gameOverSound" src="https://www.soundjay.com/button/sounds/beep-07.mp3"></audio>

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

📝 Penjelasan:

<div class="game-container"> adalah wadah utama game.

<div id="word"> untuk menampilkan kata yang harus diketik.

<input> tempat kita mengetik jawaban.

<span id="time"> dan <span id="score"> untuk menampilkan waktu & skor.

<audio> digunakan buat efek suara ketika menjawab benar atau game over.

🎨 2. CSS (Tampilan Keren & Mode Gelap)

Kita pakai mode gelap supaya lebih nyaman di mata, ditambah warna pelangi untuk teks agar makin menarik!

🎨 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;
}

.game-container {
  text-align: center;
  background: #1e1e1e;
  padding: 30px;
  border-radius: 20px;
  box-shadow: 0 0 20px #4caf50;
  width: 90%;
  max-width: 500px;
}

#word {
  font-size: 2.5rem;
  margin: 20px 0;
}

input {
  font-size: 1.2rem;
  padding: 10px;
  width: 100%;
  max-width: 300px;
  border-radius: 8px;
  border: none;
  outline: none;
  background: #333;
  color: white;
  text-align: center;
}

.info {
  margin-top: 15px;
  font-size: 1.1rem;
}

button {
  margin-top: 20px;
  background: #ff4081;
  color: white;
  border: none;
  padding: 10px 25px;
  border-radius: 10px;
  font-size: 1rem;
  cursor: pointer;
  transition: 0.3s;
}

button:hover {
  background: #f50057;
}

.rainbow-text {
  background: linear-gradient(90deg, red, orange, yellow, green, cyan, blue, violet);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  animation: rainbow 3s linear infinite;
  background-size: 300% auto;
}

@keyframes rainbow {
  0% { background-position: 0% }
  100% { background-position: 100% }
}

✨ Penjelasan:

body di-set ke mode gelap.

.game-container punya background gelap dengan bayangan hijau.

.rainbow-text bikin teks bergaya pelangi yang terus bergerak.

🧠 3. JavaScript (Logika Game)

Nah, bagian ini yang bikin game kita jadi hidup!

⚙️ Kode JavaScript:

const words = [
  "sinar", "pelangi", "bintang", "matahari", "awan", "bulan", "angin",
  "hujan", "pohon", "gunung", "lautan", "api", "batu", "tanah", "langit",
  "cahaya", "galaksi", "energi", "awan-awan", "berkilau", "keabadian", "fantasi", "meteor", "badai", "kabut"
];

const wordEl = document.getElementById("word");
const inputEl = document.getElementById("input");
const timeEl = document.getElementById("time");
const scoreEl = document.getElementById("score");
const restartBtn = document.getElementById("restartBtn");

const correctSound = document.getElementById("correctSound");
const gameOverSound = document.getElementById("gameOverSound");

let currentWord = "";
let score = 0;
let time = 30;
let timer;

function getRandomWord() {
  return words[Math.floor(Math.random() * words.length)];
}

function getFilteredWord() {
  if (score >= 10) {
    const longWords = words.filter(word => word.length >= 6);
    return longWords[Math.floor(Math.random() * longWords.length)];
  }
  return getRandomWord();
}

function showNewWord() {
  currentWord = getFilteredWord();
  wordEl.textContent = currentWord;
}

function updateScore() {
  score++;
  scoreEl.textContent = score;
}

function getDifficultyModifier() {
  if (score < 5) return 1;
  if (score < 10) return 1.3;
  if (score < 20) return 1.6;
  return 2;
}

function updateTime() {
  time -= getDifficultyModifier();
  timeEl.textContent = Math.max(0, Math.floor(time));
  if (time <= 0) {
    clearInterval(timer);
    wordEl.textContent = "⏰ Waktu Habis!";
    inputEl.disabled = true;
    playGameOverSound();
  }
}

function playCorrectSound() {
  correctSound.currentTime = 0;
  correctSound.play();
}

function playGameOverSound() {
  gameOverSound.play();
}

function startGame() {
  score = 0;
  time = 30;
  inputEl.disabled = false;
  inputEl.value = "";
  scoreEl.textContent = score;
  timeEl.textContent = time;
  inputEl.focus();
  showNewWord();
  clearInterval(timer);
  timer = setInterval(updateTime, 1000);
}

inputEl.addEventListener("input", () => {
  if (inputEl.value.trim().toLowerCase() === currentWord.toLowerCase()) {
    updateScore();
    showNewWord();
    inputEl.value = "";
    time += 2; // bonus waktu tiap benar
    playCorrectSound();
  }
});

restartBtn.addEventListener("click", startGame);

// Mulai otomatis saat halaman dibuka
window.onload = startGame;

🧾 Penjelasan Singkat:

Game dimulai saat halaman dibuka (window.onload = startGame)

Kata baru muncul, user mengetik.

Jika benar: skor naik, waktu ditambah, kata baru muncul, dan suara diputar.

Jika waktu habis: tampil pesan, input dimatikan, suara game over diputar.

Kesulitan meningkat otomatis saat skor naik.

🎉 Penutup

Game ini adalah cara seru buat belajar coding interaktif. Kamu bisa:

Modifikasi tampilannya sendiri

Tambahkan leaderboard atau efek tambahan

Atau ubah jadi tantangan multiplayer!

Kalau kamu suka konten seperti ini, jangan lupa:

👍 Like

🔔 Subscribe

📤 Share ke teman-temanmu

📥 Download source code-nya dan modifikasi sepuasnya!

Kalau kamu ingin versi dengan efek confetti, leaderboard online, atau fitur tambahan lainnya, tinggal tulis komentar atau hubungi saya langsung!

Semoga bermanfaat dan selamat ngoding! 🚀

CandraAndiP

Cari Blog Ini

🎮 Bikin Game "Lairin Teks" Sendiri Pakai HTML, CSS, & JavaScript (Cocok untuk Pemula!