Cara Membuat Game Flappy Bird dengan JavaScript

Posted on

Cara Membuat Game Flappy Bird dengan JavaScript – Siapa yang tidak kenal dengan game “Flappy Bird”? Game sederhana namun sangat seru! Flappy Bird memang terkenal dengan kesederhanaannya, namun ketertarikannya sulit untuk ditolak.

Banyak orang yang tertarik untuk belajar membuat game, dan salah satu pilihan yang populer adalah membuat game sederhana yang mirip dengan Flappy Bird. Apakah kamu salah satunya? Jika iya, maka artikel ini cocok untukmu!

Canvas HTML merupakan salah satu elemen HTML yang paling sering digunakan untuk membuat animasi atau game. Kemudahannya dalam penggunaan, terutama dengan bantuan JavaScript, membuatnya menjadi pilihan yang populer.

Jadi intinya, kita hanya perlu membuat struktur HTML dengan menambahkan elemen canvas, dan kemudian kita dapat mengontrolnya menggunakan JavaScript. Berikut kelasjava akan memberikan kamu panduan untuk membuat game fluppy bird sederhana menggunakan JS.

Cara Membuat Game Flappy Bird Sederhana dengan JavaScript

Berikut adalah langkah-langkah untuk membuat game Flappy Bird menggunakan JavaScript:

1. Persiapan Folder dan File

Sobat Java dapat menggunakan Sublime Text atau editor teks lainnya untuk memulai membuat game Flappy Bird. Buatlah folder khusus untuk proyek game Flappy Bird, lalu dalam folder proyek, buat tiga file: index.html, style.css, dan script.js.

Baca Juga:   Cara Membuat Kalkulator Sederhana dengan JavaScript

2. Coding HTML

Buka file index.html dan tambahkan struktur dasar HTML untuk permainan Flappy Bird, kamu bisa menyalin kode dibawah ini.

<!DOCTYPE html>
<html lang="id">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>https://kelasjava.com/</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <canvas id="gameCanvas" width="480" height="640"></canvas>
    <script src="script.js"></script>
</body>
</html>

3. Coding CSS

Buka file style.css dan tambahkan kode untuk mempercantik tampilan permainan, kamu bisa menyalin kode dibawah ini.

body {
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #4ec0ca;
}

canvas {
    border: 2px solid #000;
    background-color: #f7f7f7;
}

4. Coding JavaScript

Buka file script.js dan tambahkan kode untuk mengatur logika permainan Flappy Bird, kamu bisa menyalin kode dibawah ini.

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

const bird = {
    x: 50,
    y: canvas.height / 2,
    radius: 20,
    velocity: 0,
    gravity: 0.5
};

let gameSpeed = 3;
let pipes = [];
let score = 0;
let isGameOver = false;

function drawBird() {
    ctx.fillStyle = '#ff5733';
    ctx.beginPath();
    ctx.arc(bird.x, bird.y, bird.radius, 0, Math.PI * 2);
    ctx.fill();
}

function drawPipe(x, y, height, isTop) {
    ctx.fillStyle = '#008000';
    ctx.fillRect(x, isTop ? y - height : y, 40, height);
}

function generateRandomHeight() {
    return Math.random() * 200 + 50;
}

function draw() {
    if (isGameOver) return;

    ctx.clearRect(0, 0, canvas.width, canvas.height);

    bird.velocity += bird.gravity;
    bird.y += bird.velocity;

    if (bird.y + bird.radius >= canvas.height || bird.y - bird.radius <= 0) {
        gameOver();
    }

    if (pipes.length === 0 || pipes[pipes.length - 1].x < canvas.width - 200) {
        let heightTopPipe = generateRandomHeight();
        let heightBottomPipe = canvas.height - heightTopPipe - 150; 
        pipes.push({
            x: canvas.width,
            y: 0, 
            height: heightTopPipe
        });
        pipes.push({
            x: canvas.width,
            y: canvas.height - heightBottomPipe, 
            height: heightBottomPipe
        });
    }

    pipes.forEach(function(pipe, index) {
        pipe.x -= gameSpeed;
        if (bird.x + bird.radius > pipe.x && bird.x - bird.radius < pipe.x + 40 &&
            ((bird.y - bird.radius < pipe.y && pipe.y === 0) || (bird.y + bird.radius > pipe.y && pipe.y > 0))) {
            gameOver();
        }
        if (bird.x === pipe.x + 40 && pipe.y === 0 && pipe.x > bird.x) { // Menambahkan kondisi untuk menambahkan skor saat melewati pipa atas saja
            score += 10;
        }
        drawPipe(pipe.x, pipe.y, pipe.height, pipe.y === 0);
    });

    drawBird();

    ctx.fillStyle = '#000';
    ctx.font = '20px Verdana';
    ctx.fillText('Score: ' + score, 10, canvas.height - 20);

    requestAnimationFrame(draw);
}

function gameOver() {
    isGameOver = true;
    alert('Game Over! Score: ' + score);
    location.reload();
}

document.addEventListener('keydown', function(event) {
    if (event.key === ' ') {
        bird.velocity = -10;
    }
});

draw();

5. Menjalankan Kode

Jalankan kode permainan dengan membuka file index.html pada peramban web atau dengan melakukan klik kanan pada kode index.html lalu “Open in Browser”.

Baca Juga:   Cara Menampilkan Hasil Inputan Form HTML dengan JavaScript

6. Menampilkan Hasil

Selamat! Kamu telah berhasil membuat Game Flappy Bird dengan JavaScript dan mempercantik tampilannya menggunakan CSS. Untuk memainkannya, kamu bisa menekan spasi pada keyboard laptop atau komputermu dan lewati setiap pipa berwarna hijau.

Penutup

Itulah tutorial yang bisa kami sampaikan terkait cara membuat Game Flappy Bird dengan JavaScript. Dengan mengikuti langkah-langkah di atas, kamu dapat membuat permainan yang seru dan menarik untuk dimainkan. Selamat mencoba!