Klikalna plansza w HTML5
Rysowanie na płótnie
Standard HTML5, a tak naprawdę już wcześniejsze, własne implementacje przeglądarek, posiadały znaczniki definiujące płótna (canvas). Na płótnach można rysować, ale zaawansowane rozwiązania idą dużo dalej. Takie płótno, z możliwością reprezentacji w zasadzie dowolnych kształtów, z odpowiednią obsługą myszki i klawiatury doprowadza nas bardzo szybko do interaktywnych wykresów, prostych programów graficznych, czy też do prostych gier. Napisałem proste, bo skomplikowane programy i gry mimo wszystko częściej, bo łatwiej, szybciej, pisze się w nieinternetowych językach programowania. Nieinternetowe wersje mogą też skorzystać z wszystkoch sprzętowych możliwości komputera, na którym są uruchmamiane. Aplikacje internetowe działaja w przeglądarce, w obszarze ograniczonym poprzez właśnie tę przeglądarkę. I słusznie, bo gdyby strony internetowe miały pełnię praw, jedno wejście na niewłaściwy portal mogłoby być tragiczne.
Tym razem pokażę, jak zrobić prostą planszę z klikalnymi kafelkami.
Plansza z kafelkami z obsługą myszy
Popatrzmy na pokazany poniżej listing i przekonajmy się, jakie to proste. Kod jest bardziej rozwlekły niż powinien być, ale postawiłem na czytelność i separację kilku ważnych elementów. Te kluczowe elementy będę potem wyjaśniał.
<head><title>Klikalna plansza w HTML5</title></head>
<body>
<h2>Klikalna plansza w HTML5</h2>
<canvas id="mapa" width="320" height="320" />
<script>
var cName = "mapa";
var tileWidth = 40;
var canvas = document.getElementById(cName);
var ctx = canvas.getContext("2d");
var height = document.getElementById(cName).clientHeight;
var width = document.getElementById(cName).clientWidth;
//Initialize grid
var grid = new Array(height/tileWidth);
for (var row = 0; row < height/tileWidth; row++) {
grid[row] = new Array(width/tileWidth);
for (var column = 0; column < width/tileWidth; column++)
{
grid[row][column] = (row+column)%2;
drawTile(row,column);
}
}
//Assign click event
canvas.addEventListener("click", handleClick, false);
function handleClick(e){
var x = Math.floor(e.offsetX/tileWidth);
var y = Math.floor(e.offsetY/tileWidth);
//Change value: 0=>1, 1=>0
grid[x][y] = (grid[x][y]+1)%2;
drawTile(x,y);
}
function drawTile(x, y){
if (grid[x][y] == 0)
ctx.fillStyle="#FFFFFF";
else
ctx.fillStyle="#444444";
ctx.fillRect(x*tileWidth,y*tileWidth,tileWidth,tileWidth);
}
</script>
</body>
</html>
Popatrzmy jeszcze na wynik powyższego skryptu:
Można oczywiście śmiało klikać i cieszyć się z efektu.
Objaśnienia
Kodu nie ma dużo, więc powinno pójść szybko. Skrypt rozpoczyna się od zdefiniowania kilku zmiennych globalnych dla całego skryptu i są to kolejno:
- cName - nazwa elementu canvas, na którym będziemy rysować.
- tileWidth - uznaniowa szerokość i wysokość jednego kafelka.
- canvas - element canvas, to ten element jest centrum uwagi.
- ctx - kontekst elementu canvas, udostępnia metody do rysowania na elemencie canvas.
- height - wysokość elementu canvas.
- width - szerokość elementu canvas.
Zupełnie oddzielnie opiszę zmienną grid. To ona definiuje stan poszczególnych kafelków i w konsekwencji ich barwę. To zwykła tablica dwuwymiarowa (a dokładniej tablica tablic). Wymiary tablicy wyliczane są na podstawie szerokości i wysokość całego obszaru płótna. Tyle będzie wierszy i kolumn, ile zmieści się kafelków. Zaskakujący może być sposób początkowego wypełniania - tam, gdzie suma indeksu wiersza i kolumny jest parzysta, tam będzie 0, tam gdzie suma jest nieparzysta, tam będzie 1. Otrzymamy w ten sposób prostą szachownicę. Każdy taki kafelek musi być narysowany - to realizowane jest przez funkcję drawTile.
Funkcja drawTile ustawia kolor wypełnienia na podstawie wartości w tablicy grid, a następnie wylicza, już w metodzie fillRect, obszar zajmowany przez reprezentujący ten kafelek prostokąt.
Rysowanie to nie wszystko, bo przecież zależało nam na klikalności. Ta część zadania składa się z dwóch etapów:
- Podpięcie zdarzenia click do elementu canvas - metoda addEventListener(nazwaZdarzenia, funkcjaObslugi, przechwytywanieMyszy).
- Napisanie funkcji obsługi zdarzenia, którą nazwałem sobie handleClick.
Funkcja obsługi zdarzenia otrzymuje parametr określający, oprócz wielu innych wartości, miejsce kliknięcia myszą. Teraz wystarczy tylko określić, na podstawie tych współrzędnych, który kafelek został kliknięty. Ja zrealizowałem to wykonując całkowitoliczbowe dzielenie współrzędnej względem elementu canvas przez rozmiar kafelka. Po uzyskaniu numeru wiersza i kolumny kafelka pozostaje już tylko zmienić kolor (wpis w tablicy grid) oraz odmalować zajmowany przez ten kafelek obszar.
Podsumowanie
Prosta technika kafelkowania jest podstawą wielu prostych gier. Przywołam tutaj legendarną grę Sokoban, niewiele młodszą, znaną głownie z konsoli Pegasus grę Tank, różne klony gry Bomberman, nie wspominając o wszelkiej maści układankach. W najbliższym czasie postaram się rozwinąć nieco ten projekt i uzyskać coś, w co będzie można grać. Pokażę, że proste gry w HTML5 i JavaScript (jQuery lub jakiejś innej biblioteki) to nie jest coś niezwykłego i nieosiągalnego dla przeciętnego programisty.
Kategoria:HTMLJavaScriptCanvas
Brak komentarzy - bądź pierwszy