Kreiranje igre „Zmija“ pomoću čistog JavaScript-a i HTML5
Zmija je klasična igra koju znamo još iz davnih vremena. U ovom članku, pokazaćemo vam kako da kreirate kompletnu igru „Zmija“ koristeći čisti JavaScript i HTML5.
Za kreiranje web igara na JavaScriptu koristi se Canvas tehnologija, koja omogućava izvršavanje JavaScript koda unutar HTML5 dokumenta. HTML stranica može sadržati klasičnu strukturu u koju je potrebno ubaciti canvas za prikaz igre. Evo primer koda:
<!DOCTYPE html>
<html lang="sr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Igra na JavaScriptu</title>
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<canvas id="game" width="608" height="608"></canvas>
<script src="js/game.js"></script>
</body>
</html>Unutar ovog fajla povezujemo skriptu „game.js“ koja će opisati sve funkcionalnosti naše igre.
JavaScript datoteka
Unutar JavaScript datoteke dodajte odabir canvasa, kao i kontekst igre:
var cvs = document.getElementById("canvas");
var ctx = cvs.getContext("2d");Dodavanje slika i zvuka
Zatim je potrebno učitati sve osnovne slike koje će biti korišćene u igri. Koristite klasu Image za ovo. Kod za dodavanje slika i zvuka u igru:
const ground = new Image();
ground.src = "img/ground.png";
const foodImg = new Image();
foodImg.src = "img/food.png";
Crtanje objekata
Da biste nacrtali objekte i dodali funkcionalnost igri, potrebno je napisati funkciju koja će se stalno pozivati. Tu funkciju možete nazvati kako god želite. Da bi funkcija neprestano radila, možete pokrenuti njeno izvršavanje pomoću setInterval().
function draw() {
// Neki kod
}
let game = setInterval(draw, 100); // Pozivanje funkcije spoljaSav kod igre treba staviti u ovaj metod, jer će se u njemu stalno obrađivati i igra će izgledati živa i animirana.
Da biste pratili pritisak igrača na bilo koje dugme, potrebno je koristiti praćenje događaja – addEventListener. Na primer, da biste pratili pritisak na bilo koje dugme na tastaturi, treba napisati sledeći kod:
// Prilikom pritiska na neko dugme
document.addEventListener("keydown", someMethod);
// Poziva se metoda someMethod
function someMethod() {
// Menjamo nešto u kodu
}To su bili samo osnovni uvodi pre kreiranja same igre. Predlažemo vam da se upoznate sa našim kursom, tokom kojeg ćete naučiti kako da kreirate slične igre i mnogo više.
Kompletan JavaScript kod igre
Na kraju, pogledajte ceo JavaScript kod koji je kreiran tokom video lekcije.
const canvas = document.getElementById("game");
const ctx = canvas.getContext("2d");
const ground = new Image();
ground.src = "img/ground.png";
const foodImg = new Image();
foodImg.src = "img/food.png";
let box = 32;
let score = 0;
let food = {
x: Math.floor((Math.random() * 17 + 1)) * box,
y: Math.floor((Math.random() * 15 + 3)) * box,
};
let snake = [];
snake[0] = {
x: 9 * box,
y: 10 * box
};
document.addEventListener("keydown", direction);
let dir;
function direction(event) {
if(event.keyCode == 37 && dir != "right")
dir = "left";
else if(event.keyCode == 38 && dir != "down")
dir = "up";
else if(event.keyCode == 39 && dir != "left")
dir = "right";
else if(event.keyCode == 40 && dir != "up")
dir = "down";
}
function eatTail(head, arr) {
for(let i = 0; i < arr.length; i++) {
if(head.x == arr[i].x && head.y == arr[i].y)
clearInterval(game);
}
}
function drawGame() {
ctx.drawImage(ground, 0, 0);
ctx.drawImage(foodImg, food.x, food.y);
for(let i = 0; i < snake.length; i++) {
ctx.fillStyle = i == 0 ? "green" : "red";
ctx.fillRect(snake[i].x, snake[i].y, box, box);
}
ctx.fillStyle = "white";
ctx.font = "50px Arial";
ctx.fillText(score, box * 2.5, box * 1.7);
let snakeX = snake[0].x;
let snakeY = snake[0].y;
if(snakeX == food.x && snakeY == food.y) {
score++;
food = {
x: Math.floor((Math.random() * 17 + 1)) * box,
y: Math.floor((Math.random() * 15 + 3)) * box,
};
} else
snake.pop();
if(snakeX < box || snakeX > box * 17
|| snakeY < 3 * box || snakeY > box * 17)
clearInterval(game);
if(dir == "left") snakeX -= box;
if(dir == "right") snakeX += box;
if(dir == "up") snakeY -= box;
if(dir == "down") snakeY += box;
let newHead = {
x: snakeX,
y: snakeY
};
eatTail(newHead, snake);
snake.unshift(newHead);
}
let game = setInterval(drawGame, 100);Naučite JavaScript i HTML na našem kursu „Front-End Junior Developer“ i otkrijte kako tehnologija može oživeti vaše web projekte. Pridružite se sada i proširite svoje veštine kroz raznovrsne module i praktične aktivnosti koje nudimo.
