Cara Membuat Game Ular Sederhana dengan HTML, CSS, dan JavaScript

Game ular adalah salah satu permainan klasik yang mudah dibuat menggunakan HTML, CSS, dan JavaScript. Dalam artikel ini, kita akan membahas bagaimana cara membuat game ular sederhana yang bisa dimainkan di browser.

1. Persiapan Awal

Sebelum memulai, pastikan Anda memiliki editor kode seperti Visual Studio Code dan browser untuk menjalankan game ini. Kode berikut akan digunakan untuk membuat permainan ular.

2. Struktur HTML

Kita akan menggunakan elemen <canvas> untuk menggambar ular dan makanan di dalam permainan. Selain itu, ada elemen untuk menampilkan skor dan tombol restart saat game berakhir.

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Game Ular Upgrade</title>
</head>
<body>
    <div class="score">Skor: <span id="score">0</span></div>
    <div class="game-over">Game Over!</div>
    <canvas id="gameCanvas" width="400" height="400"></canvas>
    <button class="restart-btn" onclick="restartGame()">Restart</button>
</body>
</html>

3. Desain Tampilan dengan CSS

Kita menggunakan CSS untuk memberikan tampilan yang lebih menarik. Background dibuat dengan efek gradient dan elemen lainnya diatur agar nyaman dimainkan.

body {
    margin: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background: linear-gradient(45deg, #1e3c72, #2a5298);
    color: white;
    font-family: Arial, sans-serif;
}
canvas {
    border: 3px solid white;
    background: #000;
}

4. Logika Game dengan JavaScript

Kode JavaScript berikut mengatur pergerakan ular, deteksi tabrakan, skor, dan tombol restart.

const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
const scoreText = document.getElementById('score');
const gameOverText = document.querySelector('.game-over');
const restartBtn = document.querySelector('.restart-btn');

const gridSize = 20;
const tileCount = canvas.width / gridSize;

let snake, direction, food, score, gameInterval;

function initGame() {
    snake = [{ x: 9, y: 9 }];
    direction = { x: 0, y: 0 };
    spawnFood();
    score = 0;
    scoreText.innerText = score;
    restartBtn.style.display = 'none';
    gameOverText.style.display = 'none';
    clearInterval(gameInterval);
    gameInterval = setInterval(gameLoop, 100);
}

Kode ini mengatur fungsi pergerakan ular, deteksi tabrakan, dan penghitungan skor. Jika ular menabrak dinding atau tubuhnya sendiri, permainan berakhir.

5. Menjalankan Game

Simpan kode di dalam file HTML dan buka di browser. Gunakan tombol panah untuk mengontrol ular. Jika ingin memulai ulang, klik tombol "Restart".

Kesimpulan

Game ular ini merupakan proyek sederhana yang cocok bagi pemula yang ingin belajar JavaScript. Anda bisa mengembangkan lebih lanjut dengan menambahkan suara, level kecepatan, atau bahkan mode multiplayer!

Selamat mencoba dan ambil scriptnya di bawah ini.

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Game Ular Upgrade</title> <style> body { margin: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; height: 100vh; background: linear-gradient(45deg, #1e3c72, #2a5298); color: white; font-family: Arial, sans-serif; } canvas { border: 3px solid white; background: #000; } .score { font-size: 20px; margin-bottom: 10px; } .game-over { font-size: 24px; font-weight: bold; display: none; color: red; } .restart-btn { margin-top: 10px; padding: 10px 20px; font-size: 16px; background-color: #ff5722; color: white; border: none; cursor: pointer; display: none; border-radius: 5px; } .restart-btn:hover { background-color: #e64a19; } </style> </head> <body> <div class="score">Skor: <span id="score">0</span></div> <div class="game-over">Game Over!</div> <canvas id="gameCanvas" width="400" height="400"></canvas> <button class="restart-btn" onclick="restartGame()">Restart</button> <script> const canvas = document.getElementById('gameCanvas'); const ctx = canvas.getContext('2d'); const scoreText = document.getElementById('score'); const gameOverText = document.querySelector('.game-over'); const restartBtn = document.querySelector('.restart-btn'); const gridSize = 20; const tileCount = canvas.width / gridSize; let snake, direction, food, score, gameInterval; function initGame() { snake = [{ x: 9, y: 9 }]; direction = { x: 0, y: 0 }; spawnFood(); score = 0; scoreText.innerText = score; restartBtn.style.display = 'none'; gameOverText.style.display = 'none'; clearInterval(gameInterval); gameInterval = setInterval(gameLoop, 100); } function spawnFood() { do { food = { x: Math.floor(Math.random() * tileCount), y: Math.floor(Math.random() * tileCount) }; } while (snake.some(segment => segment.x === food.x && segment.y === food.y)); } document.addEventListener('keydown', (e) => { if (e.key === 'ArrowUp' && direction.y === 0) direction = { x: 0, y: -1 }; else if (e.key === 'ArrowDown' && direction.y === 0) direction = { x: 0, y: 1 }; else if (e.key === 'ArrowLeft' && direction.x === 0) direction = { x: -1, y: 0 }; else if (e.key === 'ArrowRight' && direction.x === 0) direction = { x: 1, y: 0 }; }); function draw() { ctx.clearRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = 'red'; ctx.fillRect(food.x * gridSize, food.y * gridSize, gridSize, gridSize); ctx.fillStyle = 'lime'; snake.forEach(segment => { ctx.fillRect(segment.x * gridSize, segment.y * gridSize, gridSize, gridSize); }); } function update() { const head = { x: snake[0].x + direction.x, y: snake[0].y + direction.y }; snake.unshift(head); if (head.x === food.x && head.y === food.y) { score += 10; scoreText.innerText = score; spawnFood(); } else { snake.pop(); } if (head.x < 0 || head.x >= tileCount || head.y < 0 || head.y >= tileCount || snake.slice(1).some(segment => segment.x === head.x && segment.y === head.y)) { clearInterval(gameInterval); gameOverText.style.display = 'block'; restartBtn.style.display = 'block'; } } function gameLoop() { update(); draw(); } function restartGame() { initGame(); } initGame(); </script> </body> </html>

Origin Download