Cara Membuat Game Snake dengan JavaScript

Posted on

Cara Membuat Game Snake dengan JavaScript – Game Snake JavaScript merupakan adaptasi dari permainan klasik yang dibuat menggunakan bahasa pemrograman JavaScript di lingkungan web. Dalam permainan ini, pemain mengendalikan seekor ular di dalam area permainan dengan tujuan utama untuk memakan makanan dan memperpanjang panjang ular tersebut.

Namun, setiap kali ular memakan makanan, ular akan tumbuh lebih panjang dan membuat permainan semakin menantang karena ruang gerak yang semakin sempit. Dengan mengendalikan ular melalui keyboard, pemain harus menghindari tabrakan dengan batas area permainan atau tubuh ular sendiri.

Semakin lama pemain bertahan dan semakin banyak makanan yang dimakan, semakin tinggi pula skornya. Jika kamu tertarik untuk membuat game ular dengan JavaScript, berikut dibawah ini kelasjava akan memandu kamu untuk membuat game tersebut.

Alat yang Dibutuhkan untuk Membuat Game Snake dengan JavaScript

Untuk memulai pembuatan Game Snake menggunakan JavaScript, ada beberapa alat yang perlu disiapkan:

  • Perangkat laptop atau komputer.
  • Editor kode teks seperti Sublime Text atau Visual Studio Code.
  • Peramban web seperti Google Chrome atau Mozilla Firefox.
  • Niat yang kuat untuk belajar dan berkreasi.
Baca Juga:   Cara Membuat Game Dino Run dengan JavaScript

Langkah-Langkah Membuat Game Snake dengan JavaScript

1. Siapkan Folder dan File

Buka editor teks pilihanmu dan buat folder khusus untuk proyek Game Snake, di dalam folder proyek tersebut buat tiga file: index.html, style.css, dan script.js.

2. Coding HTML (index.html)

Buatlah file index.html dan tambahkan struktur dasar HTML untuk permainan, 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>
    <div class="container">
        <canvas id="gameCanvas" width="400" height="400"></canvas>
    </div>
    <script src="script.js"></script>
</body>
</html>

3. Coding CSS (style.css)

Buatlah file style.css untuk menambahkan tampilan yang menarik pada permainan, kamu bisa menyalin kode dibawah ini.

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

.container {
    display: flex;
    justify-content: center;
    align-items: center;
}

canvas {
    border: 2px solid #000;
}

4. Coding JavaScript (script.js)

Buatlah file script.js dan tambahkan kode JavaScript untuk mengatur logika permainan, kamu bisa menyalin kode dibawah ini.

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

const box = 20;
const width = canvas.width;
const height = canvas.height;

let snake = [{x: 160, y: 160}];
let food = {x: 200, y: 200};
let dx = 0;
let dy = 0;

function drawSnake() {
    snake.forEach(segment => {
        ctx.fillStyle = '#000';
        ctx.fillRect(segment.x, segment.y, box, box);
    });
}

function drawFood() {
    ctx.fillStyle = 'red';
    ctx.fillRect(food.x, food.y, box, box);
}

function moveSnake() {
    const head = {x: snake[0].x + dx, y: snake[0].y + dy};
    snake.unshift(head);
    if (head.x === food.x && head.y === food.y) {
        createFood();
    } else {
        snake.pop();
    }
}

function createFood() {
    food.x = Math.floor(Math.random() * 20) * box;
    food.y = Math.floor(Math.random() * 20) * box;
}

function gameLoop() {
    ctx.clearRect(0, 0, width, height);
    drawSnake();
    drawFood();
    moveSnake();
    checkCollision();
}

function checkCollision() {
    if (snake[0].x < 0 || snake[0].x >= width || snake[0].y < 0 || snake[0].y >= height) {
        clearInterval(game);
        alert('Game Over! Tekan OK untuk bermain lagi.');
        location.reload();
    }
    for (let i = 1; i < snake.length; i++) {
        if (snake[0].x === snake[i].x && snake[0].y === snake[i].y) {
            clearInterval(game);
            alert('Game Over! Tekan OK untuk bermain lagi.');
            location.reload();
        }
    }
}

document.addEventListener('keydown', (event) => {
    if (event.key === 'ArrowLeft' && dx !== box) {
        dx = -box;
        dy = 0;
    } else if (event.key === 'ArrowRight' && dx !== -box) {
        dx = box;
        dy = 0;
    } else if (event.key === 'ArrowUp' && dy !== box) {
        dx = 0;
        dy = -box;
    } else if (event.key === 'ArrowDown' && dy !== -box) {
        dx = 0;
        dy = box;
    }
});

let game = setInterval(gameLoop, 100);

5. Menjalankan Kode

Jalankan kode permainan dengan membuka file index.html pada peramban web, atau bisa juga dengan klik kanan pada file tersebut dan pilih “Open in Browser”.

Baca Juga:   Cara Membuat Game Tebak Gambar dengan JavaScript

6. Menampilkan Hasil

Sekarang kamu telah berhasil membuat Game Snake dengan JavaScript dan telah mempercantik tampilannya menggunakan CSS. Untuk memainkannya, kamu bisa langsung menekan salah satu tombol arah pada keyboard laptop atau komputermu, apabila ularmu menabrak pembatas maka akan muncul notifikasi Game Over seperti dibawah ini.

Kesimpulan

Cukup sekian yang bisa kami sampaikan mengenai cara membuat Game Snake dengan JavaScript menggunakan Sublime text. Dengan mengikuti langkah-langkah di atas, kamu dapat membuat permainan yang menyenangkan dan menantang untuk dimainkan. Terima kasih sudah mengunjungi artikel kali ini, selamat mencoba!