Az előző bejegyzésben bemutattam a Teris játék alapját a Grid játékteret és azt, hogyan tudunk erre különböző Tetris alakzatokat kirajzolni, különböző színekkel egy adott pozícióban. Ebben a bejegyzésben pedig random tetrominok-kal fogunk dobálózni és ide-oda forgatni.
Továbbra is azokkal a tömbökkel dolgozunk, mint az előző bejegyzésben. A tetrominoNames tárolja a tetromin-ók elnevezését az oTeromino, lTetromino, zTetromino stb... a tetrominok mátrixát a squeren (a squares tömb tárolja magát a játékteret), a theTetrominoes pedig az összes tetrominot gyűjti egy tömbbe. A colors tömb a színeket tárolja.
Ezt azt egészet amúgy célszerű lenne egy objektumban tárolni, de ez majd csak a következő verziók feature-e lesz.
A random változóval továbbra is egy véletlen számot lehet generálni a tetromino tömb hosszának függvényében.
A current változó tartalmazza az aktuális tetrominot, amit épp irányítunk, forgatunk stb.
A nextRotatedCurrent pedig a current tetromino következő forgatott változatát jelenti az aktuális tetrominonak.
Ahhoz, hogy kapjunk egy random tetrominot, generálni kell egy random számot a fenti random változóval.
Itt a példában most a 6-ost kaptuk.
A tetrominoNames[random] által, megkapjuk, hogy mi a neve a kapott tetrominonknak.
A colors[random] segítségével pedig egy színt kapunk.
A példában ez a hatos randommal ez azt jelenti, hogy egy türkiz színű invertált z tetrominot dobott a gép.
Látható, hogy a játék betöltődésekor a current is felvette a random tetrominonkat. Tehát most a türkiz színű inverz z tetromino az, amit ki tudunk rajzolni egy pozícióba a squares-en, azaz a játéktéren.
Az aktuális rotáció 0, azaz a tetromino kezdeti mátrixa, mondhatnánk azt is, hogy nincs elforgatva. A nextRotation mindig a currentRotation + 1, azaz 0+1 = 1 ha a currentRotation = 1, akkor a next kettő lesz.
A currentPosition 4. Ezt most a példában 44-re állítom, hogy jobban látható legyen, amikor kirajzolódik. A squares[44] belső szövegének felvettem a 44-et, hogy az is látható legyen, hogy pontosan hol is van.
A kirajzolást egy forEach ciklussal lehet kivitelezni, ami úgy történik, hogy a current tömbben lévő 4 mátrix adat segítségével a squares adott négyzetét hozzáadjuk a tetromino osztályhoz, majd ugyanennek a háttérszínét beállítjuk arra a színre, amit a randommal kaptunk.
Nem részletezem, az előző bejegyzésben már leírtam, hogy pontosan hogyan is történik a kirajzolás.
Dobjunk egy másik tetrominot egy másik pozícióba.
Ehhez egy új random generálásra van szükség, amihez hozzá kell igazítani a current változót és a nextRotatedCurrent változót is, mivel, ha ezt nem tesszük, az értéke az oldal betöltődése idején kapott érték marad.
A példában az új randomunk a 4-es. Írjuk ki, hogy ez melyik tetrominot jelenti a tetrominoNames[random] változóval. Jelen esetben a 4-es randomhoz az "l" tetromino tartozik, ami kék (colors[random] azaz most colors[4])
A pozíciót 84-re állítom (és emellett bele is írom a 84-es számot az adott square-be), ez azt jelenti, hogy a kék tetrominonk most valamelyest az előzőleg a 44-es pozíciótól kirajzolt türkiz z alatt fog kirajzolódni a current.forEach iterációval a square-n.
Dobjunk még egyet. Most a 124-es square-re.
A current.forEach iteráció bedobható egy függvénybe is. Én most a draw nevet adtam neki. A draw() paranccsal meghívható.
Ugyanígy az új random tetromino dobó rész is lefüggvényezhető, így egyetlen paranccsal lehet kérni új randomot és ehhez hozzáigazítani a currentet és a nextRotatedCurrentet is.
A következő képen azt láthatjuk, hogy újratöltöttem az oldalt, hogy tiszta lappal indulhassak.
Most nem egy random tetrominot kérek, hanem a randomot beállítom egyre, hogy a piros Z tetromino-t kapjam, aminek jól látható a forgása, mivel ezt fogjuk majd forgatni különböző pozíciókba. Apéldában most az elsőt az 54-esbe.
Ha már van draw függvényünk, akkor használjuk azt.
Rajzoljuk ki most a 94-es pozícióba a Z tetromino egy forgatott azaz rotált verzióját. Ehhez a currentRotationt egyenlővé kell tenni a nextRotationnal. Így most a currentRotation 1 lesz, ami annyit tesz, hogy egyel elforgatott tetrominot tudunk kirajzolni.
Ha minden megvan, nyomjunk egy draw() parancsot, ami ugye tudjuk, hogy a függvényünket futtatja le. És láss csodát, kirajzolódott a tetromino elforgatva a 94-es pozíción. (Az előző az 54-es volt)
Most forgassunk még tovább, legyen a currentRotation 2, a nextRotation 3, a currentPosition a 134-es.
Draw függvény és tádámmm...
A pozíciókat és a rotációkat megfelelően beállítva az előző állapotokra az undraw() függvénnyel törölhető a játéktér.
Az undraw kb ugyan azt teszi mint a draw, csak ez kiveszi a tetromino classból a square-t illetve eltávolítja a színt.
Köszönöm, ha végig olvastad. Remélem tudod hasznosítani a leírtakat például egy saját JavaScript game összedobásához.
A következőkben majd bemutatom azt, hogy a játék, hogyan ütemezi a lehulló tetromino-kat, hogyan mozdul jobbra ill. balra a tetromino és még sok egyéb más érdekest.
A teljes forráskódot itt éred el. A játszható demót pedig itt.
Ha érdekel a webfejlesztés világa, akkor csatlakozz a Webfejlesztés Tanulószoba csoportomhoz a Facebookon.