Cara Membuat Game Sederhana Snake Menggunakan JavaScript - Game "Snake" adalah salah satu game klasik yang sangat populer dan menyenangkan. Dalam game ini, pemain mengendalikan ular untuk memakan makanan dan tumbuh lebih panjang, sambil menghindari bertabrakan dengan batas layar atau tubuh ular sendiri. Berikut adalah langkah-langkah untuk membuat versi sederhana dari game "Snake" menggunakan JavaScript:
Langkah 1: Persiapan Awal
Buatlah file HTML baru dengan nama index.html dan file JavaScript baru dengan nama game.js. Pastikan Anda memiliki elemen canvas dalam file HTML yang akan digunakan untuk menggambar permainan, jika belum paham kunjungi KelasJAVA.COM.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Snake Game</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<canvas id="gameCanvas" width="400" height="400"></canvas>
<script src="game.js"></script>
</body>
</html>
Langkah 2: Mengatur Game dengan JavaScript
const canvas = document.getElementById("gameCanvas");
const ctx = canvas.getContext("2d");
const tileSize = 20;
const gridWidth = canvas.width / tileSize;
const gridHeight = canvas.height / tileSize;
let snake = [{x: 10, y: 10}];
let food = {x: Math.floor(Math.random() * gridWidth), y: Math.floor(Math.random() * gridHeight)};
let dx = 0;
let dy = 0;
function drawSnake() {
ctx.fillStyle = "#00f"; // Warna biru
snake.forEach(segment => {
ctx.fillRect(segment.x * tileSize, segment.y * tileSize, tileSize, tileSize);
});
}
function drawFood() {
ctx.fillStyle = "#f00"; // Warna merah
ctx.fillRect(food.x * tileSize, food.y * tileSize, tileSize, tileSize);
}
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) {
food = {x: Math.floor(Math.random() * gridWidth), y: Math.floor(Math.random() * gridHeight)};
} else {
snake.pop();
}
}
function checkCollision() {
if (snake[0].x < 0 || snake[0].x >= gridWidth || snake[0].y < 0 || snake[0].y >= gridHeight) {
return true; // Tabrakan dengan batas layar
}
for (let i = 1; i < snake.length; i++) {
if (snake[i].x === snake[0].x && snake[i].y === snake[0].y) {
return true; // Tabrakan dengan tubuh ular sendiri
}
}
return false;
}
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawSnake();
drawFood();
moveSnake();
if (checkCollision()) {
clearInterval(gameLoop);
alert("Game Over!");
}
}
document.addEventListener("keydown", event => {
const keyPressed = event.key;
if (keyPressed === "ArrowUp" && dy === 0) {
dx = 0;
dy = -1;
} else if (keyPressed === "ArrowDown" && dy === 0) {
dx = 0;
dy = 1;
} else if (keyPressed === "ArrowLeft" && dx === 0) {
dx = -1;
dy = 0;
} else if (keyPressed === "ArrowRight" && dx === 0) {
dx = 1;
dy = 0;
}
});
const gameLoop = setInterval(draw, 100);
Langkah 3: Menambahkan Gaya dengan CSS (Opsional)
canvas {border: 1px solid #000;background-color: #fff;}