Mengembangkan Game Sederhana dengan HTML5 Canvas

Persiapan Awal

  • Pastikan Anda memiliki teks editor seperti Visual Studio Code atau Sublime Text.
  • Buat folder proyek dan beri nama "game-sederhana".
  • Di dalam folder tersebut, buatlah file index.html, style.css, dan script.js.

Struktur HTML Dasar

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Sederhana</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="gameCanvas" width="800" height="600"></canvas>
    <script src="script.js"></script>
</body>
</html>

Menyiapkan Canvas

  • Dalam script.js, kita akan memulai dengan memanggil elemen canvas dan konteksnya.
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

Membuat Karakter Utama

  • Buat objek karakter utama pada canvas.
const character = {
    x: canvas.width / 2,
    y: canvas.height - 30,
    width: 30,
    height: 30,
    speed: 5
};

Menggambar Karakter Utama

  • Buat fungsi untuk menggambar karakter utama.
function drawCharacter() {
    ctx.fillStyle = "blue";
    ctx.fillRect(character.x, character.y, character.width, character.height);
}

Menggerakkan Karakter

  • Tambahkan event listener untuk menggerakkan karakter.
document.addEventListener("keydown", moveCharacter);

function moveCharacter(event) {
    switch (event.key) {
        case "ArrowLeft":
            character.x -= character.speed;
            break;
        case "ArrowRight":
            character.x += character.speed;
            break;
    }
}

Looping Game

  • Buat loop game yang akan memanggil fungsi-fungsi yang diperlukan.
function gameLoop() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawCharacter();
    requestAnimationFrame(gameLoop);
}

gameLoop();

Menjalankan Game

  • Buka index.html di browser untuk melihat game Anda.

Dengan ini, Anda telah membuat game sederhana dengan HTML5 Canvas. Anda dapat mengembangkan lebih lanjut dengan menambahkan fitur-fitur seperti musuh, skor, atau animasi. Selamat mencoba!

PREVIOUS
NEXT