Cara Membuat Game Dino Run dengan JavaScript

Posted on

Cara Membuat Game Dino Run dengan JavaScript – Sobat Java, kali ini kita akan membahas tentang salah satu game yang disajikan oleh Google Chrome, yaitu game Dino Run. Siapa yang tak mengenal game ini? Pasti kalian semua sangat akrab dengan game ini karena seringkali muncul saat koneksi internet terputus atau lambat, bukan?

Game Dino Run dengan JavaScript adalah versi web dari permainan populer “T-Rex Run” yang biasanya dimainkan di peramban Chrome ketika pengguna tidak memiliki koneksi internet. Tujuan utama pemain adalah untuk bertahan sebanyak mungkin dengan menghindari berbagai rintangan seperti pohon dan kaktus yang muncul di depan dinosaurus.

Kali ini saya akan berbagi tentang script game ini di sini. Sebelum saya membagikan scriptnya, kalian bisa mencoba memainkannya terlebih dahulu di Google Chrome. Namun, jika kalian tidak memiliki akses ke browser tersebut, kalian bisa menggunakan script yang akan saya bagikan ini.

Cara penggunaannya pun cukup mudah, kalian hanya perlu menyalin script di bawah ini, kemudian buka aplikasi Sublime Text dan simpan dengan ekstensi .html. Setelah itu kalian bisa membuka script tersebut, untuk lebih lengkapnya akan kelasjava ulas dibawah ini.

Baca Juga:   Cara Membuat Array di JavaScript

Cara Membuat Game Dino Run Sederhana dengan JavaScript

1. Buat Folder dan File

Pertama-tama yang perlu kamu lakukan untuk membuat game Dino Run menggunakan JS, yaitu buatlah folder untuk proyek game Anda dan dalam folder tersebut, buatlah file HTML, CSS, dan JavaScript.

2. Kode HTML (index.html)

Buat kerangka dasar HTML untuk permainan Dino Run, untuk kodenya bisa kamu salin dibawah ini.

<!DOCTYPE html>
<html lang="en">
<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>
    <div id="gameContainer">
        <canvas id="gameCanvas" width="800" height="400"></canvas> <!-- Ganti ukuran kanvas sesuai keinginan -->
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Kode CSS (style.css)

Tambahkan kode pada style.css untuk tampilan permainan Dino Run agar lebih menarik, untuk kodenya bisa kamu salin dibawah ini.

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

#gameContainer {
    position: relative;
}

canvas {
    border: 1px solid #000;
}

4. Kode JavaScript (script.js)

Tulis kode JavaScript untuk logika permainan Dino Run, untuk kode JS bisa kamu salin dibawah ini.

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

const dino = {
    x: 50,
    y: canvas.height - 50,
    width: 50,
    height: 50,
    velocity: 0,
    gravity: 1,
    jumpPower: 15
};

let obstacles = [];
let isGameOver = false;
let score = 0;

function drawDino() {
    ctx.fillStyle = '#ff5733';
    ctx.fillRect(dino.x, dino.y, dino.width, dino.height);
}

function drawObstacles() {
    ctx.fillStyle = '#000';
    obstacles.forEach(function(obstacle) {
        ctx.fillRect(obstacle.x, obstacle.y, obstacle.width, obstacle.height);
    });
}

function drawScore() {
    ctx.fillStyle = '#000';
    ctx.font = '20px Arial';
    ctx.fillText('Score: ' + score, 10, 30);
}

function jump() {
    if (!isGameOver && dino.y === canvas.height - dino.height) {
        dino.velocity = -dino.jumpPower;
    }
}

function addObstacle() {
    const obstacle = {
        x: canvas.width,
        y: canvas.height - 50,
        width: 20,
        height: 50
    };
    obstacles.push(obstacle);
}

function checkCollision() {
    obstacles.forEach(function(obstacle) {
        if (dino.x < obstacle.x + obstacle.width &&
            dino.x + dino.width > obstacle.x &&
            dino.y < obstacle.y + obstacle.height &&
            dino.y + dino.height > obstacle.y) {
            gameOver();
        }
    });
}

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

function gameLoop() {
    if (isGameOver) return;

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

    drawDino();
    drawObstacles();
    drawScore();

    dino.velocity += dino.gravity;
    dino.y += dino.velocity;

    if (dino.y >= canvas.height - dino.height) {
        dino.y = canvas.height - dino.height;
        dino.velocity = 0;
    }

    if (Math.random() < 0.02) { // Probability to add obstacle
        addObstacle();
    }

    obstacles.forEach(function(obstacle) {
        obstacle.x -= 5; // Move obstacles towards left
    });

    checkCollision();

    score++;

    requestAnimationFrame(gameLoop);
}

document.addEventListener('keydown', function(event) {
    if (event.key === ' ') {
        jump();
    }
});

gameLoop();

5. Jalankan Kodenya

Setelah semua kode ditulis, jalankan kode tersebut dengan membuka file index.html pada folder yang kamu simpan tadi. Atau kamu juga bisa menjalankan kode html permainan Dino Run tersebut dengan klik kanan di mouse lalu klik “Open in Browser”.

Baca Juga:   Cara Membuat Program Cek Bilangan Ganjil Genap dengan JavaScript

6. Menampilkan Hasil

Selamat! Kamu telah berhasil membuat Game Dino Run dengan JavaScript dan mempercantik tampilannya menggunakan CSS, adapun tampilan apabila permainan Game Over seperti dibawah ini.

Penutup

Jadi begitulah cara membuat game Dino Run sederhana dengan JavaScript dengan mudah, semoga artikel ini dapat memberikan manfaat bagi kalian yang ingin memulai membuat game menggunakan JavaScript. Selamat mencoba Sobat Java!