Game Snake adalah salah satu game retro yang paling ikonik dan dicintai, dan kini Anda dapat membuatnya sendiri menggunakan teknologi web modern. Artikel ini akan memandu Anda membuat game Snake yang fungsional menggunakan HTML5 untuk struktur dan kanvas, dan jQuery untuk logika permainan yang dinamis.
Persiapan: Struktur HTML Dasar
Pertama, Anda perlu menyiapkan struktur HTML dasar. Ini akan mencakup canvas yang merupakan area tempat game Anda akan ditampilkan, serta beberapa skrip untuk memuat pustaka jQuery dan kode game Anda sendiri.
<!DOCTYPE html>
<html>
<head>
<title>Game Snake Klasik</title>
<style>
body { text-align: center; font-family: Arial, sans-serif; }
canvas { border: 2px solid #000; background-color: #f0f0f0; }
</style>
</head>
<body>
<h1>Game Snake Klasik</h1>
<canvas id="gameCanvas" width="450" height="450"></canvas>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="snake.js"></script>
</body>
</html>
Dalam kode di atas, Anda telah membuat:
- Sebuah
canvasdengan IDgameCanvasyang akan menjadi “papan permainan” Anda. - Sebuah tag
<script>yang memuat pustaka jQuery dari CDN. - Sebuah tag
<script>yang menautkan ke filesnake.js, tempat seluruh logika game akan ditulis.
Logika Game dengan jQuery
Sekarang, mari kita beralih ke file snake.js. Di sini, kita akan menggunakan jQuery untuk memanipulasi elemen HTML dan mengelola logika game.
Inisialisasi Game
Langkah pertama adalah mendapatkan referensi ke elemen kanvas dan konteks 2D-nya. Konteks 2D ini adalah objek yang memungkinkan Anda menggambar bentuk, teks, dan gambar di kanvas. Anda juga perlu mendefinisikan beberapa variabel penting seperti ukuran sel (cell size), posisi awal ular, dan arah pergerakannya.
$(document).ready(function() {
const canvas = $("#gameCanvas")[0];
const ctx = canvas.getContext("2d");
const cellSize = 15;
let snake = [{x: 10, y: 10}];
let food = {};
let direction = "right";
let score = 0;
let gameLoop;
Fungsi Utama: Menggambar dan Memperbarui Game
Fungsi utama game adalah loop yang akan terus berjalan. Setiap kali loop berjalan, ia akan menghapus kanvas, menggambar ulang ular, menggambar makanan, dan memperbarui posisi ular berdasarkan arah saat ini.
function draw() {
// Hapus kanvas
ctx.fillStyle = "#f0f0f0";
ctx.fillRect(0, 0, canvas.width, canvas.height);
// Gambar makanan
drawCell(food.x, food.y, "red");
// Gambar ular
snake.forEach(segment => drawCell(segment.x, segment.y, "green"));
}
function update() {
// Logika pergerakan ular
const head = {x: snake[0].x, y: snake[0].y};
switch (direction) {
case "right": head.x++; break;
case "left": head.x--; break;
case "up": head.y--; break;
case "down": head.y++; break;
}
// Tambahkan kepala baru
snake.unshift(head);
// Cek tabrakan dengan makanan
if (head.x === food.x && head.y === food.y) {
score++;
generateFood();
} else {
// Hapus ekor
snake.pop();
}
}
Fungsi drawCell di atas adalah fungsi pembantu untuk menggambar kotak di kanvas. Anda dapat membuatnya sebagai berikut:
function drawCell(x, y, color) {
ctx.fillStyle = color;
ctx.fillRect(x * cellSize, y * cellSize, cellSize, cellSize);
ctx.strokeStyle = "white";
ctx.strokeRect(x * cellSize, y * cellSize, cellSize, cellSize);
}
Kontrol dan Interaksi Pengguna
Untuk mengontrol ular, Anda perlu mendengarkan tombol panah yang ditekan oleh pengguna. jQuery mempermudah ini dengan $(document).on("keydown", function(e) { ... });. Pastikan Anda tidak membiarkan ular berbalik arah secara langsung.
$(document).on("keydown", function(e) {
if (e.key === "ArrowUp" && direction !== "down") direction = "up";
if (e.key === "ArrowDown" && direction !== "up") direction = "down";
if (e.key === "ArrowLeft" && direction !== "right") direction = "left";
if (e.key === "ArrowRight" && direction !== "left") direction = "right";
});
Menjalankan Game
Terakhir, Anda perlu memulai loop game. Gunakan setInterval untuk memanggil fungsi gameLoop pada interval waktu tertentu (misalnya, setiap 100 milidetik). Dalam gameLoop ini, Anda akan memanggil fungsi update dan draw.
function gameLoop() {
// Cek kondisi game over (tabrakan dengan tembok atau diri sendiri)
// ... (Logika ini bisa dikembangkan lebih lanjut)
update();
draw();
}
// Panggil fungsi ini untuk memulai permainan
generateFood();
gameLoop = setInterval(gameLoop, 100);
});
Ini adalah kerangka dasar untuk membuat game Snake. Anda bisa mengembangkannya lebih jauh dengan menambahkan:
- Logika untuk mendeteksi game over (jika ular menabrak tembok atau tubuhnya sendiri).
- Menampilkan skor di layar.
- Mengubah kecepatan ular seiring bertambahnya skor.
- Menambahkan tombol “Mulai Ulang”.
Dengan HTML5 dan jQuery, Anda memiliki alat yang kuat untuk membuat game interaktif dan menarik langsung di peramban web! Selamat mencoba! 🎉
