JavaScript, yang dulunya hanya dikenal sebagai bahasa untuk interaksi web sisi klien, kini telah berevolusi menjadi kekuatan yang tangguh dalam pengembangan game. Dengan dukungan penuh dari browser modern, Anda dapat membuat game 2D (dan bahkan beberapa game 3D menggunakan WebGL) langsung di browser tanpa memerlukan instalasi tambahan oleh pengguna. Ini adalah titik masuk yang luar biasa bagi para pemula karena Anda hanya perlu editor teks dan browser untuk memulai.
Kunci utama dalam membuat game sederhana dengan JavaScript adalah pemanfaatan elemen HTML <canvas>. Canvas menyediakan area gambar (drawing surface) yang dapat dimanipulasi secara dinamis menggunakan API grafis JavaScript. Game loop, yang mengatur pembaruan posisi objek dan penggambaran ulang layar, menjadi inti dari setiap proyek game Anda.
Langkah pertama adalah mendeklarasikan elemen canvas di HTML Anda. Ini adalah "papan tulis" tempat semua visualisasi game akan terjadi.
<canvas id="gameCanvas" width="400" height="300" style="border: 1px solid #000;">
Browser Anda tidak mendukung elemen canvas.
</canvas>
Selanjutnya, di JavaScript, kita perlu mendapatkan konteks rendering dari kanvas tersebut. Untuk game 2D, kita akan menggunakan konteks '2d'.
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
Setiap game memerlukan objek. Mari kita buat representasi sederhana dari sebuah kotak yang akan kita gerakkan. Kita bisa mendefinisikan properti dasar seperti posisi (x, y), lebar, tinggi, dan warna.
let player = {
x: 50,
y: 150,
width: 30,
height: 30,
color: '#dc3545'
};
Kita memerlukan fungsi yang bertanggung jawab untuk membersihkan layar dan menggambar ulang semua elemen game pada posisi terbarunya.
function draw() {
// 1. Bersihkan seluruh kanvas
ctx.clearRect(0, 0, canvas.width, canvas.height);
// 2. Gambar Pemain (Kotak Merah)
ctx.fillStyle = player.color;
ctx.fillRect(player.x, player.y, player.width, player.height);
}
Game loop adalah jantung dari setiap game. Ia memastikan bahwa proses pembaruan logika game dan penggambaran ulang visual terjadi secara berulang dan konsisten. Fungsi requestAnimationFrame adalah cara modern dan efisien untuk menjalankan loop ini, karena ia menyesuaikan laju pembaruan dengan kemampuan refresh monitor pengguna.
Dalam contoh sederhana ini, kita akan menggambar ulang objek tanpa mengubah posisinya (untuk sementara).
let gameLoop = function() {
// Panggil fungsi gambar
draw();
// Minta browser untuk memanggil gameLoop lagi pada frame berikutnya
requestAnimationFrame(gameLoop);
};
// Mulai game loop
gameLoop();
Jika Anda menjalankan kode ini sekarang, Anda akan melihat kotak merah muncul di kanvas dan tetap di tempatnya. Untuk membuat game bergerak, Anda perlu menambahkan fungsi update() di dalam gameLoop untuk mengubah properti seperti player.x berdasarkan input atau logika game, lalu memanggil draw().
Setelah Anda menguasai dasar-dasar canvas dan game loop, tantangan berikutnya adalah menangani input pengguna. Anda dapat mendengarkan event keyboard seperti keydown dan keyup. Simpan status tombol mana yang sedang ditekan dalam sebuah objek boolean (misalnya: keys.ArrowRight = true). Kemudian, di dalam fungsi update(), Anda memeriksa status tersebut dan memodifikasi posisi objek.
Membuat game sederhana dengan JavaScript mengajarkan konsep penting: pemisahan antara logika pembaruan (apa yang terjadi pada objek) dan presentasi visual (bagaimana objek digambar). Dengan fondasi ini, Anda siap untuk menjelajahi topik lanjutan seperti deteksi tabrakan (collision detection), manajemen aset (gambar), dan fisika dasar. JavaScript adalah alat yang kuat, dan canvas membuatnya sangat mudah diakses.