Belajar Membuat Game di Browser: UI/UX, Audio & Polish

Pada sebelumnya Kita sudah memiliki Score, Timer, dan sistem Game State. Tapi, apakah game yang sekadar “berfungsi”. Dua game dengan aturan yang sama persis bisa terasa sangat berbeda bagi pemainnya.

Mengapa UI/UX & Polish Itu Penting?

Sebelum masuk ke kode, mari kita pahami dulu tiga konsep penting yang akan membuat game kita “naik kelas”:

• UI (User Interface): Ini adalah semua tampilan yang dilihat oleh pemain di layar, seperti skor, waktu, menu, tombol, dan elemen visual lainnya.
• UX (User Experience): Ini adalah pengalaman pemain saat berinteraksi dengan game. UX yang baik berarti game mudah dipahami, nyaman, dan menyenangkan saat dimainkan.
• JUICE: Pernahkah kamu merasa puas saat mengumpulkan koin di game Mario? Itu yang dinamakan Juice! Ini adalah efek-efek kecil (suara, gerak, animasi, warna) yang membuat setiap aksi di dalam game terasa memuaskan.

Jika sebelumnya game kita tidak punya petunjuk bermain, skornya tidak jelas, sepi tanpa suara, dan tiba-tiba berhenti begitu saja, sekarang kita akan mengubahnya!

1. Membuat HUD & Start Screen

Langkah pertama adalah membuat HUD (Heads-Up Display) untuk menampilkan informasi penting langsung di atas area Canvas, serta Start Screen sebagai layar sambutan.

Dalam mendesain UI game, selalu ingat prinsip ini: Jelas (kontras dan mudah dibaca), Ringkas (hanya info penting), Konsisten (posisi tidak berubah-ubah), dan Informatif (jelas cara mainnya).

Berikut adalah contoh implementasinya:

Get G2P AKA Trigger’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

JavaScript

// Menampilkan HUD: Score dan Timer
function drawHUD() {
  ctx.fillStyle = "#ffffff";
  ctx.font = "20px Arial";
  ctx.fillText("Score: " + score, 20, 30);
  ctx.fillText("Time: " + timeLeft, canvas.width - 120, 30);
}

// Menampilkan Start Screen
function drawStartScreen() {
  ctx.fillStyle = "rgba(0,0,0,0.7)";
  ctx.fillRect(0, 0, W, H);
  ctx.fillStyle = "#ffffff";
  ctx.textAlign = "center";
  ctx.font = "36px Arial";
  ctx.fillText("CATCH THE COIN", W/2, H/2);
  ctx.font = "18px Arial";
  ctx.fillText("Tekan ENTER untuk mulai", W/2, H/2 + 40);
}

Catatan: Panggil fungsi ini di dalam draw() pada siklus game kamu.

2. Menghidupkan Game dengan Audio

Game tanpa suara ibarat sayur tanpa garam. Di browser, kita bisa menggunakan objek Audio bawaan JavaScript untuk menambahkan suara. Ada dua jenis audio yang umum digunakan:

• Sound Effect (SFX): Suara singkat saat terjadi aksi (misalnya, koin diambil atau menabrak rintangan).
• Background Music (BGM): Musik latar yang diputar terus-menerus (loop) selama bermain.

JavaScript

const bgm = new Audio("music.mp3");
const coinSound = new Audio("coin.mp3");
bgm.loop = true; // Musik akan berulang terus
bgm.volume = 0.4; // Atur volume dari 0 hingga 1
function startGame() {
  gameState = "PLAYING";
  bgm.play(); // Mulai BGM saat main
}
// Di dalam logic collision:
if (isColliding(player, coin)) {
  score += 10;
  coinSound.currentTime = 0; // Reset audio agar bisa diputar cepat berulang-ulang
  coinSound.play(); // Mainkan SFX
}

Penting: Browser modern biasanya memblokir audio yang diputar otomatis tanpa interaksi user. Pastikan memanggil .play() setelah user mengeklik tombol mulai atau menekan keyboard!

3. Visual Feedback: Bikin Aksi Makin “Juicy”

Agar permainan terasa interaktif, kita harus memberi pemain visual feedback. Misalnya, saat pemain mendapatkan koin, kita bisa memunculkan teks kecil berbunyi “+10” yang melayang ke atas lalu menghilang.

JavaScript

let popups = [];

function addPopup(x, y, text) {
  popups.push({ x, y, text, life: 40 }); // life adalah durasi popup di layar
}

function drawPopups() {
  popups.forEach(p => {
    ctx.fillStyle = "#F9E795"; 
    ctx.fillText(p.text, p.x, p.y); 
    p.y -= 1; // Teks naik perlahan ke atas
    p.life--;
  });
  // Hapus popup yang life-nya sudah habis
  popups = popups.filter(p => p.life > 0);
}

Trik: Kamu juga bisa bereksperimen dengan membuat koin berkedip atau layar menjadi merah sebentar jika pemain menabrak sesuatu yang berbahaya.

4. Polish Terakhir: Fitur Mute & High Score

Tahap akhir agar game kita terasa seperti produk jadi (polished) adalah dengan menambahkan kontrol untuk kenyamanan pemain.

High Score dengan localStorage Tidak ada yang lebih memuaskan selain memecahkan rekor sendiri! Kita bisa menyimpan skor tertinggi ke dalam memori browser menggunakan localStorage, sehingga rekor tidak akan hilang meski tab ditutup.

JavaScript

let highScore = Number(localStorage.getItem("highScore")) || 0;

// Saat Game Over, periksa apakah rekor baru tercipta
if (score > highScore) {
  highScore = score;
  localStorage.setItem("highScore", highScore);
}

Fitur Mute Beri pemain kendali penuh. Beberapa orang mungkin sedang bermain secara diam-diam!

JavaScript

let muted = false;

function toggleMute() {
  muted = !muted;
  bgm.muted = muted;
  coinSound.muted = muted;
}