⏱️ Bikin Game Time Race dengan HTML, CSS, dan JavaScript (Mode Gelap)

 

1. Pembuka: Pernah Coba Tantang Diri Sendiri Berhenti di 3 Detik?

Pernah nggak, main game yang kelihatannya simpel, tapi ternyata bikin gemes sendiri? Nah, di artikel (dan video) ini, kita bikin game bernama Time Race — kamu cuma perlu pencet "Start", lalu "Stop" pas udah 3 detik. Tapi percayalah... itu nggak semudah kelihatannya 😆

Kita akan bikin ini pakai HTML, CSS, dan JavaScript, semua dipisah biar lebih rapi dan mudah dipahami, terutama buat kamu yang baru belajar coding.

2. Manfaat: Cocok Buat Latihan Refleks & Ngoding Web

Game ini:

  • Melatih refleks kamu dalam menghentikan waktu dengan akurat
  • Jadi bahan latihan JavaScript (terutama setInterval dan manipulasi waktu)
  • Cocok buat portofolio atau tugas belajar pemrograman dasar web
  • Sudah menggunakan mode gelap dan desain yang bersih — jadi juga enak dipakai untuk belajar desain UI dasar

3. Penjelasan Kode Time Race (Lengkap dan Bertahap)

Kita pisahkan jadi 3 file: index.html, style.css, dan script.js. Yuk, kita bahas satu per satu!

🔹 Kode HTML (index.html)

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
  <title>Time Race</title>
  <link rel="stylesheet" href="style.css"/>
</head>
<body>
  <div class="container">
    <h1>⏱️ Time Race</h1>
    <p class="target-time">Target: <span id="target">3.00</span> detik</p>
    <div class="timer" id="timer">0.00</div>
    <div class="buttons">
      <button id="start">Start</button>
      <button id="stop" disabled>Stop</button>
    </div>
    <p id="result"></p>
  </div>

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

Penjelasan:

  • Elemen utama dibungkus di dalam <div class="container">
  • Ada teks target waktu (3.00 detik) yang bisa diubah nanti
  • Timer utama tampil di <div id="timer">
  • Tombol Start & Stop sudah siap
  • Script JS di-load paling bawah agar HTML selesai dirender dulu

🔹 Kode CSS (style.css)

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

.container {
  text-align: center;
  background: #1f1f1f;
  padding: 40px;
  border-radius: 16px;
  box-shadow: 0 0 20px #00ffc3;
  width: 320px;        /* Ukuran tetap */
  min-height: 400px;   /* Tinggi minimum agar tidak berubah */
  box-sizing: border-box;
}


h1 {
  font-size: 2.5rem;
  color: #00ffc3;
}

.timer {
  font-size: 4rem;
  margin: 20px 0;
  color: #ffffff;
  font-family: monospace;
  width: 160px;        /* Ukuran tetap */
  display: inline-block;
  text-align: center;
  letter-spacing: 2px;
}


.target-time {
  font-size: 1.2rem;
  margin-bottom: 10px;
  color: #cccccc;
}

.buttons button {
  font-size: 1rem;
  padding: 12px 30px;
  margin: 10px;
  border: none;
  border-radius: 8px;
  background-color: #00ffc3;
  color: #000;
  cursor: pointer;
  transition: 0.3s ease;
}

.buttons button:hover:not(:disabled) {
  background-color: #00e6b2;
}

.buttons button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

#result {
  font-size: 1.3rem;
  margin-top: 20px;
  color: #ffcc00;
}

Penjelasan:

  • Desain full dark mode (#121212 + #1f1f1f)
  • Tombol berwarna terang biar kontras dengan latar
  • .timer pakai font monospace dan lebar tetap supaya tampilannya stabil
  • .container dikunci ukuran minimumnya supaya tidak berubah-ubah saat konten dinamis

🔹 Kode JavaScript (script.js)

let timerDisplay = document.getElementById("timer");
let resultDisplay = document.getElementById("result");
let startBtn = document.getElementById("start");
let stopBtn = document.getElementById("stop");
let target = parseFloat(document.getElementById("target").innerText);

let interval;
let startTime;

startBtn.addEventListener("click", () => {
  startTime = Date.now();
  timerDisplay.textContent = "0.00";
  resultDisplay.textContent = "";
  stopBtn.disabled = false;
  startBtn.disabled = true;

  interval = setInterval(() => {
    let elapsed = (Date.now() - startTime) / 1000;
    timerDisplay.textContent = elapsed.toFixed(2);
  }, 10);
});

stopBtn.addEventListener("click", () => {
  clearInterval(interval);
  stopBtn.disabled = true;
  startBtn.disabled = false;

  let finalTime = (Date.now() - startTime) / 1000;
  let diff = Math.abs(finalTime - target).toFixed(2);
  resultDisplay.textContent = `Waktu kamu: ${finalTime.toFixed(2)} detik — Selisih: ${diff} detik`;
});

Penjelasan:

  • Saat "Start" ditekan, setInterval akan berjalan setiap 10ms (0.01 detik)
  • Date.now() dipakai untuk menghitung waktu yang berjalan sejak tombol Start ditekan
  • Saat "Stop", kita menghitung selisih waktu aktual dengan target (3.00 detik)
  • Selisih tersebut ditampilkan sebagai skor atau hasil

🎉 Penutup

Game ini sederhana, tapi bisa bikin penasaran dan cocok banget buat latihan JavaScript. Kamu bisa mengembangkan lebih lanjut dengan:

  • Tambah level kesulitan (target waktu berubah-ubah)
  • Tambah suara saat start/stop
  • Simpan skor terbaik dengan localStorage

Selamat mencoba dan semoga bermanfaat buat kamu yang sedang belajar!

Komentar

Posting Komentar