Aby stworzyć grę w HTML, potrzebne są trzy kluczowe elementy: HTML do struktury strony, CSS do nadania stylów oraz JavaScript do logiki gry i interaktywności. Poniżej znajdziesz rozbudowany poradnik krok po kroku – od najprostszej gry, aż po bardziej rozbudowane przykłady i inspiracje do dalszych prac.
Podstawy – szablon pliku gry
Na początek załóż trzy pliki w jednym folderze:
index.html– struktura gry,style.css– wygląd gry,script.js– cała logika i mechanika.
Przykładowy szablon HTML
<!DOCTYPE html>
<html lang="pl">
<head>
<meta charset="UTF-8">
<title>Moja pierwsza gra w HTML</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<h1>Gra: Przesuń kwadrat</h1>
<canvas id="gameCanvas" width="480" height="320"></canvas>
<script src="script.js"></script>
</body>
</html>
<canvas>– to obszar do rysowania gry przez JavaScript;style.cssiscript.js– są dołączone do strony.
Wygląd gry (CSS)
Nadajemy styl planszy gry oraz ogólny wygląd:
body {
background-color: #262626;
color: #fff;
font-family: sans-serif;
text-align: center;
}
canvas {
margin: 30px auto;
border: 2px solid #fff;
background: #111;
display: block;
}Logika gry (JavaScript) – przykład gry „Przesuwany kwadrat”
W pliku script.js:
const canvas = document.getElementById('gameCanvas');
const ctx = canvas.getContext('2d');
let square = { x: 50, y: 50, size: 30, color: 'red' };
function drawSquare() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.fillStyle = square.color;
ctx.fillRect(square.x, square.y, square.size, square.size);
}
document.addEventListener('keydown', function (e) {
switch(e.key) {
case 'ArrowUp': square.y -= 10; break;
case 'ArrowDown': square.y += 10; break;
case 'ArrowLeft': square.x -= 10; break;
case 'ArrowRight': square.x += 10; break;
}
drawSquare();
});
drawSquare();Efekt – czerwony kwadrat można przesuwać strzałkami na klawiaturze.
Zastosowanie – gra wyścigowa
Chcąc stworzyć bardziej zaawansowaną grę, np. prostą grę wyścigową, nadal wykorzystuje się HTML, CSS i JavaScript. Kluczowe elementy:
- Animacja – za pomocą
requestAnimationFrame(); - Obsługa kolizji – przeszkód lub punktów;
- Zliczanie wyniku.
Skondensowany przykład (JavaScript)
let car = { x: 240, y: 280, w: 40, h: 60, color: 'lime' };
let obstacles = [
{ x: 120, y: -40, w: 40, h: 40, color: 'orange' },
{ x: 300, y: -80, w: 40, h: 40, color: 'yellow' }
];
function drawCar() {
ctx.fillStyle = car.color;
ctx.fillRect(car.x, car.y, car.w, car.h);
}
function drawObstacles() {
obstacles.forEach(o => {
ctx.fillStyle = o.color;
ctx.fillRect(o.x, o.y, o.w, o.h);
o.y += 5;
if (o.y > canvas.height) o.y = -40;
});
}
function checkCollision() {
return obstacles.some(o =>
car.x < o.x + o.w &&
car.x + car.w > o.x &&
car.y < o.y + o.h &&
car.y + car.h > o.y
);
}
function gameLoop() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
drawCar();
drawObstacles();
if (checkCollision()) {
ctx.font = "30px Arial";
ctx.fillStyle = "red";
ctx.fillText("Kolizja! Koniec gry.", 70, 160);
return;
}
requestAnimationFrame(gameLoop);
}
document.addEventListener('keydown', function(e) {
if (e.key === "ArrowLeft" && car.x > 0) car.x -= 15;
if (e.key === "ArrowRight" && car.x < canvas.width - car.w) car.x += 15;
});
gameLoop();Opis – steruj samochodem strzałkami lewo/prawo, aby unikać przeszkód przesuwających się w dół planszy.
Możliwości rozwoju i rozszerzenia gry
Możesz rozwijać grę przez:
- Dodanie punktacji – liczba ominiętych przeszkód;
- Zwiększanie trudności – przeszkody pojawiają się częściej lub szybciej;
- Efekty dźwiękowe – korzystając z HTML5 Audio;
- Menu startowe i game over – napisane w HTML i stylizowane CSS;
- Animacje i przejścia z użyciem CSS, np. efekty trafienia lub startu gry.
Gdzie dalej?
Tworzenie gier w HTML pozwala rozwijać zarówno proste gry logiczne, quizy, platformówki, jak i rozbudowane symulacje 2D, a nawet 3D (z bibliotekami typu Three.js). Zanim sięgniesz po frameworki (np. Phaser, PixiJS), warto dobrze poznać podstawy pracy z HTML, CSS i JavaScript.
Podsumowanie – do stworzenia gry w HTML wystarczy własna przeglądarka i edytor tekstu. HTML buduje strukturę, CSS nadaje jej styl, a JavaScript ożywia całość, umożliwiając stworzenie od prostego minigame po bardziej złożone projekty – zarówno dla nauki, jak i rozrywki.
