TypeScript: piszemy prostą grę
Znając podstawy (link do artykułu) możemy napisać prostą grę przeglądarkową przy użyciu TypeScript i JavaScript. Poniżej przedstawiam przykładowy kod gry „Kliknij na kota”:
HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Kliknij na kota</title>
</head>
<body>
<div id="game">
<h1>Kliknij na kota!</h1>
<p id="score">Wynik: 0</p>
<img id="cat" src="cat.png">
</div>
<script src="game.js"></script>
</body>
</html>
TypeScript:
let score = 0;
const cat = document.getElementById("cat") as HTMLImageElement;
const scoreElement = document.getElementById("score") as HTMLParagraphElement;
cat.addEventListener("click", () => {
score++;
scoreElement.textContent = `Wynik: ${score}`;
});
function gameLoop() {
requestAnimationFrame(gameLoop);
}
gameLoop();
Ten kod tworzy bardzo prostą grę polegającą na klikaniu na obrazek kota. Gracz musi jak najszybciej kliknąć na kota, aby zdobyć jak najwięcej punktów.
Kod TypeScript tworzy trzy zmienne: score przechowującą wynik gracza, cat przechowującą obiekt obrazka kota i scoreElement przechowującą element HTML, który wyświetla wynik gracza.
Następnie kod dodaje nasłuchiwacz zdarzeń do obrazka kota, który zwiększa wynik gracza o jeden punkt za każdym razem, gdy gracz kliknie na kota. Wynik jest wyświetlany na stronie za pomocą elementu scoreElement.
Ostatnia funkcja gameLoop jest pustą pętlą gry, która wywołuje się w nieskończoność, aż do momentu, gdy gra zostanie zamknięta przez użytkownika. Ta pętla jest wywoływana w ten sposób, aby gra była „responsywna” i aktualizowała się w czasie rzeczywistym.
Jedyne co pozostało to skompilować kod TypeScriptu na kod JavaScript. Wpisujemy komendę w wierszu poleceń: tsc game.ts.
Oczywiście, możemy zmodyfikować naszą grę „Kliknij na kota” i dodać animację kotka, która zmienia jego położenie co sekundę. Do tego wykorzystamy zdarzenie setInterval() w TypeScript.
let score = 0;
const cat = document.getElementById("cat") as HTMLImageElement;
const scoreElement = document.getElementById("score") as HTMLParagraphElement;
let catLeft = 0;
let catTop = 0;
setInterval(() => {
catLeft = Math.floor(Math.random() * window.innerWidth);
catTop = Math.floor(Math.random() * window.innerHeight);
cat.style.left = `${catLeft}px`;
cat.style.top = `${catTop}px`;
}, 1000);
cat.addEventListener("click", () => {
score++;
scoreElement.textContent = `Wynik: ${score}`;
});
function gameLoop() {
requestAnimationFrame(gameLoop);
}
gameLoop();
W tym kodzie dodaliśmy dwie zmienne catLeft i catTop, które będą przechowywać pozycję kotka na ekranie. Należy pamiętać, żeby nie używać słów kluczowych takich jak top, ponieważ są one zarezerwowane w języku JavaScript. Top jest to zmienna globalna, która przechowuje pozycję górną okna przeglądarki. Następnie dodaliśmy funkcję setInterval, która wywołuje się co 1 sekundę. Wewnątrz tej funkcji, kod generuje nową pozycję kotka za pomocą funkcji Math.random() i ustawia ją jako wartość stylu CSS elementu cat. W ten sposób kot zmieni swoje położenie co sekundę.
Reszta kodu pozostaje taka sama jak w poprzednim przykładzie.
Musimy oczywiście dodać style CSS
body {
overflow: hidden;
}
.game {
width: 100vw;
height: 100vh;
position:relative;
}
.game img {
position: absolute;
}Powinniśmy jeszcze dodać warunki, żeby kot poruszał się tylko w obrębie okna przeglądarki.
const maxWidth = window.innerWidth - cat.clientWidth;
const maxHeight = window.innerHeight - cat.clientHeight;oraz
if (catLeft < 0) {
catLeft = 0;
}
if (catTop < 0) {
catTop = 0;
}Oczywiście ta gra jest bardzo prosta, ale pokazuje, jak można użyć TypeScriptu do tworzenia gier przeglądarkowych. Link do gry: https://zyrex.eu/przyklady/kliknij_kota/
