2022. szeptember 26., hétfő

Gyorskeresés

Építsünk Tetris játékot JavaScript alapokon II - Dobáljunk random tetrominokat!

Írta: | Kulcsszavak: JavaScript . HTML . Webfejlesztés . Játék . Tetrisz

[ ÚJ BEJEGYZÉS ]

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.

Hozzászólások

(#1) Victoryus


Victoryus
addikt
LOGOUT blog

Jó kis leírás, hasznos!
Telefonon próbáltam, Chrome-on nem indul el, de a gyári Xiaomi böngészőn szépen fut.

A facebook profilnak a valósággal való bármilyen hasonlósága csak véletlen egybeesés. --> Huawei band 6 aprón

(#2) Fecogame


Fecogame
veterán
LOGOUT blog

Tetszik! :) Asztali gépen, Chrome-ból próbáltam, tökéletesen fut.

Annyi megjegyzés, hogy bele lehetne tenni, hogyha folyamatosan nyomom a lefelé nyilat, akkor induljon el lefelé, ne kelljen folyamatosan nyomogatni a gombot :)

Lassú a mobilinterneted? 4G/LTE antennák, közvetlenül raktárról ---> http://bit.ly/LTE_Antennak

(#3) Bzozoo válasza Victoryus (#1) üzenetére


Bzozoo
kezdő

Ha van valamilyen console hibaüzenet Chrome esetén, azt megírhatnád. Nekem működik Chrome-n és Firefox alatt is.

[ Szerkesztve ]

(#4) Bzozoo válasza Fecogame (#2) üzenetére


Bzozoo
kezdő

Next time feature vagy a kódot ismerve te is leprogramozhatod, ha van időd. 🙂

(#5) Fecogame válasza Bzozoo (#4) üzenetére


Fecogame
veterán
LOGOUT blog

Nem beszélem ezt a nyelvet :B Többnyire csak kagylóval írok scripteket, de az sokat :DDD

Lassú a mobilinterneted? 4G/LTE antennák, közvetlenül raktárról ---> http://bit.ly/LTE_Antennak

(#6) cinemazealot


cinemazealot
addikt

Tecc. :) Bár a "reward" számomra inkább zavaró tényező volt, mint reward. A hosszan nyomva tartott gombok nekem is hiányoztak, de az invert funkciót meglepő újdonságként fogadtam. :D

(#4) Bzozoo
Mobil böngészőben egy kicsit macerásabb a console figyelése egy F12-nél. :)

(#5) Fecogame
Yet another shell'tris? ;)

(#7) Fecogame válasza cinemazealot (#6) üzenetére


Fecogame
veterán
LOGOUT blog

:DDD

Lassú a mobilinterneted? 4G/LTE antennák, közvetlenül raktárról ---> http://bit.ly/LTE_Antennak

További hozzászólások megtekintése...
Copyright © 2000-2022 PROHARDVER Informatikai Kft.