Membuat Game Sederhana Bounce dengan HTML dan JavaScript

3 min read

Super User

10 Oktober 2024

Membuat game sederhana adalah cara yang menyenangkan untuk belajar pemrograman web. Dalam artikel ini, kita akan membuat game “Bounce” menggunakan HTML dan JavaScript. Game ini melibatkan bola yang memantul di dalam area permainan, dan pemain dapat menggerakkan paddle untuk menghalau bola. Mari kita mulai!

Langkah 1: Struktur HTML

Pertama, kita perlu membuat struktur HTML untuk game kita. Buatlah file HTML baru dengan nama index.html dan tambahkan kode berikut:

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Bounce Sederhana</title>
    <style>
        body {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100vh;
            background-color: #f0f0f0;
            margin: 0;
        }
        canvas {
            background: #fff;
            border: 1px solid #000;
        }
    </style>
</head>
<body>
    <canvas id="gameCanvas" width="480" height="320"></canvas>
    <script src="script.js"></script>
</body>
</html>

Langkah 2: Mengatur JavaScript

Selanjutnya, kita akan menambahkan logika game menggunakan JavaScript. Buatlah file baru bernama script.js dan tambahkan kode berikut:

const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");

let ballRadius = 10;
let x = canvas.width / 2;
let y = canvas.height - 30;
let dx = 2;
let dy = -2;

let paddleHeight = 10;
let paddleWidth = 75;
let paddleX = (canvas.width - paddleWidth) / 2;

let rightPressed = false;
let leftPressed = false;

document.addEventListener("keydown", keyDownHandler, false);
document.addEventListener("keyup", keyUpHandler, false);

function keyDownHandler(event) {
    if (event.key === "Right" || event.key === "ArrowRight") {
        rightPressed = true;
    } else if (event.key === "Left" || event.key === "ArrowLeft") {
        leftPressed = true;
    }
}

function keyUpHandler(event) {
    if (event.key === "Right" || event.key === "ArrowRight") {
        rightPressed = false;
    } else if (event.key === "Left" || event.key === "ArrowLeft") {
        leftPressed = false;
    }
}

function drawBall() {
    ctx.beginPath();
    ctx.arc(x, y, ballRadius, 0, Math.PI * 2);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function drawPaddle() {
    ctx.beginPath();
    ctx.rect(paddleX, canvas.height - paddleHeight, paddleWidth, paddleHeight);
    ctx.fillStyle = "#0095DD";
    ctx.fill();
    ctx.closePath();
}

function draw() {
    ctx.clearRect(0, 0, canvas.width, canvas.height);
    drawBall();
    drawPaddle();

    if (x + dx > canvas.width - ballRadius || x + dx < ballRadius) {
        dx = -dx;
    }
    if (y + dy < ballRadius) {
        dy = -dy;
    } else if (y + dy > canvas.height - ballRadius) {
        if (x > paddleX && x < paddleX + paddleWidth) {
            dy = -dy;
        } else {
            document.location.reload(); // restart game
        }
    }

    x += dx;
    y += dy;

    if (rightPressed && paddleX < canvas.width - paddleWidth) {
        paddleX += 7;
    } else if (leftPressed && paddleX > 0) {
        paddleX -= 7;
    }

    requestAnimationFrame(draw);
}

draw();

Di bagian HTML, kita membuat elemen <canvas> untuk menggambar game. Gaya CSS digunakan untuk menata tampilan agar game berada di tengah halaman.

JavaScript

Inisialisasi Variabel: Kita menginisialisasi variabel untuk bola, paddle, dan status tombol yang ditekan.
Event Listeners: keyDownHandler dan keyUpHandler digunakan untuk mendeteksi input dari pengguna.
Menggambar Elemen: Fungsi drawBall dan drawPaddle menggambar bola dan paddle di canvas.
Logika Game: Fungsi draw mengupdate posisi bola dan paddle, menangani benturan, dan merender ulang game.

Dengan mengikuti langkah-langkah di atas, kamu telah berhasil membuat game sederhana “Bounce” menggunakan HTML dan JavaScript. Kamu bisa menambahkan fitur lain seperti skor, level, atau variasi bola untuk meningkatkan pengalaman bermain. Selamat mencoba!