Múlt héten azt ígértem, hogy játékot írunk csak HTML5 és Javascript segítségével. Legyen így: megírjuk a játékok "Hello Világát" a kígyót, vagy más néven snaket. Lássuk hogyan lehet lefejleszteni plugin és varázslás nélkül!
A forráskód bemutatásánál nem a szép javascript megoldásokat, hanem az általánosan érthető kódot tartottam fontosnak. A játék grafikáját teljes egészében a HTML5 canvas API-ra alapozom. A kígyót a JOBB és BAL nyilakkal lehet majd irányítani (kanyarodásra bírni). A szabályok a szokásosak: ha a kígyó kimegy a játéktérből, vagy magába harap, akkor meghal; ha egy ételt talál, akkor nő a hossza.
A kígyó játék alapvető felépítése
A kígyó testét egy body nevű tömbben tartom nyilván. A kígyó feje a tömb első elemében van, a farka az utolsóban. A tömb elejébe a az unshift() javascript parancssal teszem a kukac fejének új pozicíóját, a végéről a pop() függvénnyel törlök. Javascriptes timerből rendszeresen hívom a moveSnake() függvényt, melyben a kígyó fejének új pozícióját számolom ki. A felhasználó kanayarodási paramcsait a document.onkeydown eseménykezelőben figyelem, és a kígyó haladási irányát a direction változóban tartom nyilván.
Rajzolás a canvasra
HTML5-ben lehetőség van ún. canvas (vászon) használatára. Erre különböző alakzatokat rajzolhatunk. Az alakzatokat nem jegyzi meg, és nem is skálázza át szépen őket (szóval nem vektorgrafikus). Canvasra rajzolhatunk deklaratívan csak HTML5 felhasználásával, vagy imperatívan Javascriptből is. Ebben a játékban én az utóbbit választottam.
Rajzolni a canvas 2D környezetére fogunk, ezt a canvas getContext függvényével tehetjük, valahogy így:
context = canvas.getContext('2d')
A kukacot négyzetekből építjük fel, ezeket a fillRect( topX, topY, width, height ) függvénnyel rajzoltatjuk ki. A rajzolás stílusa (például színe) a fillStyle()-lal adható meg. Valahogy így:
context.fillStyle = 'rgb( 128, 128, 255 )'
context.fillRect( topX, topY, blockSize, blockSize )
A kígyó farkát a clearRect() függvénnyel trörölhetjük.
Ehhez magát a canvast így lehet megadni HTML5-ben:
<canvas id="canvas" width="400" height="300"></canvas>
Lássuk a programot
A játék bármilyen canvas kompatibilis böngészőből játszható, így IE9-ből is. A teljes forráskód letölthető innen, illetve a játék kipróbálható itt.