Készítsük el a Dig Dug játékot a MelonJS segítségével

Nemrég volt alkalmam megnézni a Stranger Things 2. évadot. Miután megnéztem, nagyon izgatottan vártam, hogy gyermekkorom egyik kedvenc játékát, a „Dig Dug” -ot láthattam a sorozatban. Ugyanakkor kerestem egy játékot, amelyet építhettem a játékfejlesztési képességeim gyakorlásához. Tehát ma úgy döntöttem, hogy a Dig Dug a játék.

Ez a Dig Dug verzió nem teljes verzió. Ez csak a játék alapvető mechanizmusa, amely később kibővíthető egy teljesen működő Dig Dug verzióra.

A MelonJS a választott keret, nem különösebb ok miatt. Csak véletlenszerűen választottam ki a sokféle keretrendszer közül.

Az alábbiakban bemutatom a játék fejlesztésének lépéseit:

  1. A keret beállítása
  2. A talaj megteremtése
  3. Az ásó létrehozása
  4. A szörny létrehozása
  5. Az ütközési logika létrehozása
  6. Fejegység kijelző hozzáadása
  7. Hangeffektusok és háttérzene hozzáadása
  8. Az Intro képernyő hozzáadása
  9. Végső kiigazítás
  10. Mi a következő lépés

1. lépés - A keret beállítása

A MelonJS javasolja az általuk biztosított kazán használatát a játékfejlesztés megkezdéséhez. Először le kell töltenem a kazánt a GitHubról.

A kazánt klónozom a választott helyi könyvtáramba:

#terminalgit clone //github.com/melonjs/boilerplate.git mylocalfolder

Ezután az útmutató segítségével be kell állítanom a játék saját távoli adattárát. Azt is tanácsos átnézni az oktatóanyagon, hogy megismerkedjen a keretrendszer használatával.

Ezután le kell töltenem a MelonJS által biztosított játékeszközöket az oktatóoldalukra. Ez hasznos lehet, ha néhány képre vagy csempére van szüksége, és nincs ideje tervezni és létrehozni őket. Ezek az eszközök a MelonJS oktatóoldalainak bármelyikéről letölthetők itt és itt.

Most szeretnék egy kicsit megbeszélni néhány fontos csontvázfájlt a kazánlapon. A MelonJS a Jay Extend öröklési könyvtárat használja. Tehát meg kell ismerkednem a fájlokkal is.

js/game.js:

Itt van a játékom globális névtere, amelyet történetesen úgy definiálnak game(ami bármi lehet, ami tetszik).

Az 1-től 8-ig terjedő sorokig megadhatok minden olyan információt, amelyre szükségem van objektumként.

Ezután a 12-től 25-ig terjedő sorokból állíthatom be a játék felbontását, a képernyő viselkedését, és betölthetem az összes játékforrást, például képet és hangot.

Meg kell változtatnom néhány részletet, például a képernyő felbontását és méretarányos módszerét a játék teljesítményéhez a 14. vonalon.

Végül a 28–37. Sorok a játék mindent lefuttatnak.

js/screen/play.js:

Ez a fájl betöltődik, game.jsamely kezeli a lejátszási képernyőt.

Az 5. és 13. sorok között az összes végrehajtás a játék kezdetekor történik. Itt fogom megadni, hogy a későbbiekben megjelenítsem az összes játékelemet.

De a 18–21. Sor az összes entitás eltávolítása. Sokat fogom szerkeszteni ezt a két fájlt.

Tehát bármilyen más objektum létrehozása előtt telepítenem kell az összes szükséges npm könyvtárat az alábbi parancs futtatásával:

#terminalnpm install

és telepítenem kell, grunt-cliami szükséges:

npm install -g grunt-cli

Végül a játék futtatásához végrehajthatom az alábbi parancsot, és eljuthatok a helyi szerverre, hogy lássam a játék futását:

grunt serve

Egyelőre csak akkor látok fekete üres képernyőt, amikor a játék fut.

2. lépés - A talaj megteremtése

Miután tudtam egy kicsit a biztosított kazánról, itt az ideje létrehozni az első entitásomat, a földet. Többféle objektum létezik, amelyeket ebből a keretből fel tudnék építeni.

Tehát mivel ez a talaj ütközni fog az ásóval és a szörnyeteggel a játékban, létre kell hoznom egy Entitytárgyat a föld számára. A talaj az a tárgy, ahol a játék zajlik, és amelyet az ásónak ki kell ásnia, hogy áthaladjon.

Eredetileg a talaj egy kicsi, 15 x 15 pixel méretű négyzetrajz, amelyet azután ismételten megjeleníthet a képernyőn, hogy nagyobb terület legyen. Használhatnám a Tile Map Editor nevű szoftvert erre a célra, de ehhez a játékhoz kézzel fogom csinálni.

Tehát én így csinálom. Először hozzon létre egy fájlt az jsúgynevezett mappában ground.js. Ezután létrehozok egy új objektum entitást az alábbiak szerint:

A 2. vonalon egy új objektumot game.Groundfogok lerakni, amely a MelonJS által biztosított Entity objektumból indul.

A következő sorban inicializálom az objektumot a szülőobjektumon keresztül, az összes szükséges argumentummal együtt. Ez az objektum lesz szüksége x, és yértékek, mint a helyét az objektum.

A szélességet és a magasságot a 37. és a 38. vonal határozza meg.

Valaminek rendereléséhez használhatok erre alkalmas képet. De ebben az esetben drawa HTML5 Canvas függvényét fogom használni . Ez a 9–28. Sorokban történt. Itt programozom egy téglalap rajzolását, amelyben pöttyösek vannak. A négyzet és a pontok színét az 5., illetve a 6. vonalon deklarált változók határozzák meg.

A 30-35. Vonalon található az objektum updatefunkciója. Itt be kell állítanom az entitást, hogy frissítse magát a 32. vonalon, minden alkalommal, amikor a updatefüggvény meghívásra kerül. És végül adjon vissza egy valós értéket, hogy megbizonyosodjon arról, hogy az entitás minden egyes játékfrissítéskor újrarajzolódik.

A következő lépésben hivatkoznom kell erre a index.htmlfájlra a 40. sor fájlján, és:

regisztrálja az entitást a poolba a game.js33. sorban. Nem lesz szükségem arra a kódra, game.jsamelyen korábban regisztráltam, game.PlayerEntitymert később manuálisan hozom létre a játékos entitást.

Mivel a talajt elég sokszor le kell húzni, jó, ha létrehozok egy konténert az összes talajhoz, amely az összes munkát elvégzi. Tároló létrehozásához létre kell hoznom egy új objektumot, és ki kell terjesztenem a MelonJS által biztosított tároló objektumot.

Megnevezem ezt a konténert game.LevelManager.

Mint korábban, most is inicializálnom kell az érveket. Határozza meg ennek az objektumnak a nevét, és határozza meg azokat az adatokat, amelyekkel az összes négyzetet a képernyőn a 2–21.

Ezután létrehozok egy egyedi függvényt, amely végrehajtja a renderelési munkát a 24-37. Sorok adatai alapján. A 30. sorban adom hozzá a négyzetet ehhez a konténerhez, és miután az összes négyzet megjelenik, frissítenem kell a konténer határterületét a 36. sor.

Végül meg kell jelenítenem a tárolót a lejátszási képernyőn, így minden, ami ezen tároló alatt található, szintén megjelenik.

Mielőtt ezt megtenném, létre kell hoznom az levelManagerobjektum példányát az alábbi 9–11. Soron:

Arra is emlékeznem kell, hogy mindig utaljak a index.htmlfájlban létrehozott új objektumra .

Most, ha futtatom a szervert, kapnom kell egy ilyen nézetet:

3. lépés - Az ásó létrehozása

Először szükségem lesz egy ásványi képemre. Eleinte a MelonJS által biztosított játékeszközöket használtam, de szerencsére a fiam készített egy pixel képet, amelyet az ásó számára használhatnék:

Ezután be kell helyeznem ezt a képet data/imga kazán mappájába. Amikor most futtatom a szervert, a Grunt automatikusan felépíti és csatolja az erőforrás fájlt a build/jsfenti képadatokkal rendelkező mappába.

Az Diggerobjektum létrehozásához ismét ki kell terjesztenem az Entityobjektumot.

Létrehozok egy új fájlt, amelyet digger.js a js mappában hívnak , és a hivatkozást belefoglalomindex.html.

A 3. sorban betöltöm a képet a korábban készített erőforrás fájlból, és hozzárendelem egy változóhoz. Az 5. vonalon inicializálom az objektumot a szükséges argumentumokkal és beállításokkal. Az ásóhoz hozzárendelem a képet a korábban definiált képhez.

Ezután a 12. vonalon megfordítom a sprite-et, amikor az első alkalommal megjelenik.

Szükségem lesz a 13. sorban a gravity to-ra is 0, mert ez nem egy olyan platformjáték, amely gravitációt igényel a karakter megfelelő működéséhez. Ebben az esetben az ásó lebeg.

A 14. sorban az ásó sebessége inicializálódik, így később mozgatható. Később meghatározom az ütközés típusát ehhez az entitáshoz az ütközési logika használatához.

A 17. és 22. sorok között definiálom és kezelem a sprite animációt. A addAnimationfüggvény tömbjének számai határozzák meg, hogy a kép melyik keretét kell használni az animációhoz. A mellette lévő szám meghatározza a sebességet. Végül beállítottam a kezdeti animációt, amelyet a lejátszási képernyő indulásakor kell használni.

Most meg kell határoznom az ásó mozgását. Az eredeti Dig Dug játékban azt vettem észre, hogy valahányszor az ásó felfelé vagy lefelé fordul, mindig megfelelően forgatja karakterét a földön. Ezt tudomásul kell vennem, hogy megfelelően megvalósítsam az ásómban. Ez elég hosszú szakasz lesz a kódból.

Rájöttem, hogy ahhoz, hogy az ásó megfelelően működjön, amikor a sprite-et elforgatom, be kell állítanom az entitás határait és az ütközési doboz alakját.

Kezdetben az ásó sprite mérete 48 x 24. Ennek oka az a kép, amelyen az ásó lő a fegyverével. Normális mozgás közben azonban csak 24 x 24 méretű ásóra lesz szükségem.

Ezt úgy kezeljük, hogy az ütközési alakot kezdetben 24 x 24-re változtatjuk, és 48 x 24-re alakítjuk át, amikor az ásó lő a fegyverével, az alábbi 17–19 vonalon:

A 28–33. Sorok közül több logikai zászlót definiálok, amelyeket a mozgásfüggvényben fogok használni.

A 36. sorból indul ki az ásó updatefüggvény, amely tartalmazza az ásó mozgási logikáját is, a 40–134.

Ebben a logikában sok dolgot kell figyelembe vennem, például azt, hogy mi történik a mozgás gomb megnyomásakor vagy felengedésén, az ásó utolsó helyzetét egy irány vagy tűz gomb megnyomása és elengedése előtt, valamint a különböző animációs állapotokat. Ez nem összetett függvény, de a logika kissé hosszadalmas (bár alapvetően egyszerű).

A 143-tól 283- movementig terjedő sorok a fel, le, balra és jobbra funkciók.

Ahhoz, hogy az ásó megjelenjen a képernyőn, és lehetővé tegye a mozgást, hozzá kell adnom az ásóobjektumot a game.worldkonténerhez a 12. sorban, és regisztrálnom kell a billentyűzetet a 19. és 23. sorok között az play.jsalábbi mozgáshoz . Akkor is le kell oldanom, amikor a játék elhagyja a játék képernyőt más célokra, ha szükséges a 30–34.

Ha most futtatom a szervert, láthatom, hogy az ásó munkában van, és mozgathatja fel, le, balra és jobbra.

Látok azonban egy záró képet, amikor az ásó mozog, valamint a MelonJS indítási kép vonalát.

A záró kép annak a rajznak köszönhető, amelyet a játékhurok minden egyes frissítésekor végrehajtanak. Ez úgy oldható meg, hogy hozzáad egy rajzréteget minden egyes alkalommal, mielőtt az ásót újrarajzolják az alábbi 12. sorban:

4. lépés - A szörny létrehozása

Most kész az ásóval, én hozom létre a szörnyeket. Alapvetően ugyanaz a folyamat lesz a szörnyek esetében. Létre kell hoznom egy tárgyat Entitya szörnyek számára, hozzá kell adnom a szörnyeket a levelManagerkonténerhez, és végül vissza kell adnom a képernyőre.

Az alábbiakban látható Entitya szörny tárgya :

Először inicializálom az objektumot az 5-től 9-ig. Ezúttal csak egy Sprite-t fogok használni, amelyet a MelonJS adott a platform játék bemutatójából, amelyet módosítottam, hogy további képkockákat adjak hozzá alább.

Ennek a sprite-nek ugyanabban a mappában kell lennie, mint az ásó sprite:

Ezután megnevezem az objektumot a 11. vonalon, definiálom az ütközés típusát a 12. vonalon, alaphelyzetbe állítom az ütközési négyzetet és kicsinyítem a 14-15-ös vonalon, valamint beállítom a szörny sebességét és gravitációját a 17-18-as vonalakon. Meghatározom az animációt is csoport, amelyet a 20–22. vonalon használandó kezdeti animáció beállítása előtt kell használni.

Ezután meghatározok egy funkciót a szörny mozgására. Ez egy nagyon alapvető mozgásalgoritmus, amely az objektum sebességértékét manipulálja a X vízszintes mozgáshoz és Ya függőleges mozgáshoz a 26–43. Vonalon. Végül létrehozom az objektum updatefunkcióját, amely egyelőre csak a testfrissítést tartalmazza a 45–52.

Mielőtt tovább folytatnám, ismét emlékeztetnem kell magam, hogy minden létrehozott új entitás objektumra hivatkozást index.html és regisztrációt kell megadnom game.js.

Az objektum létrehozása után frissítenem kell a LevelManagertárolót, hogy tartalmazza a szörny adatait és a creationfunkciót is.

Az alábbiakban a frissített kód található:

A 21-től 28-ig a szörny helyének adatai. A szörnyeteg létrehozásának vagy hozzáadásának funkciója hozzáadódik a 48–56. Sorokhoz. Végül, hogy megjelenjen a képernyőn, néhány sort be kell illeszteni play.js.

Az alábbiakban látható a 11. sor kiegészítése, amely meghívja a függvényt az összes szörny létrehozására:

Most, ha futtatom a szervert, látom, hogy két kis aranyos szörnyeteg jelenik meg a képernyőn az adott helyen. Jelenleg nem mozdulnak.

5. rész - Az ütközési logika létrehozása

Kezdem az ásó ütközési logikájával a talajjal és a szörnnyel. Annak érdekében, hogy a keretrendszer ellenőrizze az entitásobjektum esetleges ütközését, be kell építenem az ütközésellenőrzési módszert a updatefüggvénybe. Ezt követően most beilleszthetem azt a onCollisionfunkciót, amely információt nyújt az egyes összeütköző objektumokról.

Az alábbiakban a frissített kotró objektum kódok találhatók:

A 138. sorban az objektum esetleges ütközésének kódellenőrzése történik.

A 144–166. Sorokban egy funkció választ ad, amikor az objektumok ütköznek. Amikor az ásó ütközik a talajjal a 147–150-es vonalakon, a konkrét földi entitás eltávolításra kerül a levelManagertartályból.

Nem akarom azonban, hogy a talaj eltűnjön, amikor az ásó lő a fegyverével, ezért kivételt tettem a 148. sorra.

A következő a szörnyekkel való ütközés logikája. Ha az ásó egy szörnnyel ütközik, miközben lő a fegyverével, a szörny villódzik és eltávolítják. Ettől eltekintve az ásó villog, eltávolításra kerül, és a játék visszaáll a 151–163. Sorra. Ha a collisionfüggvényben igazra tér vissza, akkor az ásóval ütköző egyéb objektumok szilárdvá válnak . Más szavakkal, az ásó ütközés közben nem fog áthaladni egy másik tárgyon. Ebben az esetben azt akarom, hogy hamis értéket adjon vissza.

Ennek befejezéséhez majd létrehozom a határok logikáját. Jelenleg az ásó elhagyhatja a képernyőt. Ehhez meghatározom azt a maximális távolságot, amelyet az ásó az objektum init függvényében az xés ytengelyen haladhat az alábbi 16–17. Vonalon.

Ezután a updatefüggvényben a beépített clampmódszerrel állítom be a határokat a 105–106. Vonalon.

Most a szörnyekről. Miután elvégeztem az ütközést a szörnyen, meg kell határoznom az ütközési logikát a talajjal és a határt is. Ennek a logikának tartalmaznia kell valamiféle mesterséges intelligenciát (AI) is ahhoz, hogy a szörny üldözze az ásót.

A szörny nem lesz képes ásni a talajt, ezért ugrál abba az irányba, ahol az ásó van, amikor a talajhoz vagy a határhoz ér. Ahhoz, hogy a határütközés működhessen, meg kell határoznom a szörny maximális távolsági mozgását és be kell állítanom. Nem kell meghatároznom az ütközési logikát az ásóval, mert azt már az Diggerobjektum kezeli . A szörnyet is jobbra mozdítottam, amikor a játék elkezdődött.

Az alábbiakban látható a legújabb Monsterobjektum:

A 138-tól 159-ig egy olyan funkció, amelyet definiáltam, amelyet akkor hajtunk végre, amikor a szörny a onCollisionfüggvényben a földdel ütközik . A logika az, hogy a szörnyeteget az ásó felé kell mozgatni, amikor a földre ér.

A 76-tól 136-ig terjedő sorokból meghatároztam egy olyan funkciót, amely a szörny ütközési logikáját képviseli a határral, amelyet az update57-es vonal függvényében hívunk meg .

Amikor a szörny nem éri el a határt, mindig ellenőrzi az ásó helyét és felé halad. Aztán ha a szörny eléri a határt, akkor az ásó felé fordul, és tovább üldözi. Magam nem találtam ki az AI algoritmust - ez egy olyan szkript kombinációja, amelyet az interneten találtam a sajátommal. Ebben a funkcióban is hozzáférnem kell az ásó objektumtulajdonságaihoz, például a Xés a Ypozícióhoz. A hozzáférés megszerzéséhez módosítanom kell az ásót a képernyőn.

A 13. vonalon kijelölök egy gametulajdonságot, amely a regisztrált ásót képviseli a készletből, mielőtt hozzáadnám a lejátszási képernyőhöz. Ez a tulajdonság a monster objektumon belüli ásó tulajdonságok elérésére szolgál.

Végül felveszem a kódot, amely visszaállítja a játékot, ha az összes szörny lövöldözési módban ütközik az ásóval. Más szóval, ha az ásónak sikerül megölnie az összes szörnyet. Ezt az ellenőrzést a levelManagertárolóban kell elvégezni .

Ellenőrizni fogom az összes szörnyet tartalmazó tömböt a 60-tól 62-ig. Ha a tömb üres, akkor visszaállítom a játékot.

De előtte létre kell hoznom egy logikai zászlót az 56. sorban, amely megerősíti, hogy a szörny már létrejön, amikor elindítom a játékot. Ha nem, akkor a játék újra visszaáll, mielőtt létre lehet hozni a szörnyeket.

6. lépés - Fejegység kijelző hozzáadása

Először létre kell hoznom egy betűtípus mappát az adatkönyvtárban:

data/fnt

majd használja a MelonJS által biztosított betűtípust a korábban letöltött játékeszközökben:

PressStart2P.pngPressStart2P.fnt

és tedd az új mappába.

Ezután hozzá kell adnom néhány szkriptet gruntfileahhoz, hogy létrehozhassa az alábbi betűtípus erőforrás adatait a 22–28. Soron:

A kiszolgáló futtatásakor a betűtípus az erőforrás adataiban lesz:

Alapértelmezés szerint a Head Unit Display (HUD) objektum már létrehozásra került a kazántáblán. A fájlban elérhetem js/entities/HUD.js. Csak meg kell határoznom a korábban hozzáadott betűtípust, és létre kell hoznom egy drawfüggvényt hozzá.

Az alábbiakban a frissített kód található:

Meghatározom és inicializálom a betűtípust a 42–48. Sorokon, majd létrehozom azt a drawfüggvényt, amely a játék pontszámát megjeleníti a 71. sorban meghatározott helyen.

Végül hozzáadok egy magas pontszámú kijelzőt és annak logikáját. A logika csak menti és összeadja az aktuális pontszámot az highScoreingatlanhoz minden alkalommal, amikor a játék visszaáll. Vagy az ásó megöli az összes szörnyet, vagy pedig az ásót megölik.

Először a highScore9. sorban hoztam létre az ingatlant:

Ezután onCollisionaz diggerI függvényében növelem a pontot minden alkalommal, amikor egy szörnyet megölnek a 14. sorban, és összeadom az aktuális pontokat a magas pontszámhoz, ha az ásót megölik a 26. sorban.

Kicsit igazítom azt is, hogy mi fog történni, amikor a szörny tüzet ér. Megkönnyítem a szörnyeteg mozgását, közvetlenül a tűzbe kerülés után, hogy elkerüljem a felesleges ütközéseket a 11. sornál.

7. lépés - Hangeffektusok és háttérzene hozzáadása

Ennek beállítása egyszerű. Az összes szükséges kód már ott van a kazánlapon. Amit meg kell tennem, az az, hogy a szükséges zenét vagy hangfájlt a megfelelő mappába helyezem, és csinálok valamit a zenével.

Az eredeti játék alapján, amikor az ásó mozog, a háttérzene szól. Egyszerű logikát kell megvalósítani, így a háttérzene nem próbál többször elindulni, ha egy iránygombot megnyomnak.

Az alábbiakban látható a kotrógép frissített objektuma:

A 37. vonalon létrehozok egy logikai zászlót, amelyet a mozgás és a háttérzene logikájában használhatok.

A 45–47. Sorok logikája, hogy a háttérzene ne induljon el ismételten, ha egy iránygombot folyamatosan megnyomnak.

Ennek megfelelően a 114., 200., 224., 249. és 288. vonalon a jelző be van állítva annak érdekében, hogy a logika megfelelően működjön.

A háttérzene leállt, amikor az ásó megáll a 115-ös vonalon.

Ami a többi hangot illeti, hozzáadok egy hangot az ásóhoz tüzelés módban, és egy pop hangot, amikor a szörny meghal. A 69-es sorban aktiválom a hangot, amikor a tűzgombot megnyomom, és leállítom, amikor a tűzgombot elengedjük a 140-es sorban. A pophang akkor aktiválódik, amikor a szörny ütközik az ásóval az égési üzemmódban, közvetlenül miután eltávolították a képernyő a 174. sorban.

8. lépés - Az Intro képernyő hozzáadása

Először megnyitok game.jsés módosítok egy darab kódot. Ahelyett, hogy a játék állapotát PLAY-re változtatnám, az állapotot MENU-re változtatom a 40. sorban.

Ez betölti a title.jsfájlt, amikor a játék betöltődik:

Ezután szerkesztem a fájlt title.jsa js/screensmappában:

Itt, onResetEventa háttérzenét játszom, amikor a képernyő megjelenik a 8. sorban.

Ezután barna színű réteggel borítom a nézetablakot a 10. vonalon.

Ezután létrehozok egy Renderableobjektumot, amely tartalmazza a címet és néhány szöveget a 13. és 43. sorok között.

Ezt az Renderable objektumot felfelé, a képernyő közepéig kell görgetni Tweena 22–23. Sorokban.

Végül meg kell kötnem az ENTER billentyűt egy esemény elindításához, amely a játékot a 47–57. Soron kezdi.

9. lépés - Végső beállítás

Nem sokat fogok tenni a végső kiigazításért. Csak egy újabb háttérhangot adok a szörnyeteghez, és az ásót az eredeti játékhoz hasonlóan helyezem el. Először hozzáadok egy újabbat Tweenaz ásóhoz, hogy a játék kezdetekor a képernyő közepére léphessen.

Helyezem az új hangfájlt a megfelelő mappába, majd frissítem a diggerfájlt.

Kihirdetek még néhány logikai jelzőt a 38–40. Sorokban, a játék elején játszom a háttérzenét a 30. sorban, és végrehajtom a kezdeti ásómozgást a 29. sorban megadott függvény meghívásával.

Az alábbiakban látható az új funkció:

A 4. sorból meghatározom az Tweenanimációt egy visszahívási funkcióval, amely leállítja a háttérzenét, beállít néhány zászlót a logikához és áthelyezi ide az összerendelési kulcs regisztrálását a -ból, play.jshogy elkerülje a gomb megnyomásával járó további mozgást a tweening során.

Végül az alábbiakban látható a szörnyhang 5 másodpercenként történő létrehozásának funkciója. Ez a updatefüggvény az diggerobjektum függvényében lesz meghívva .

10. lépés - Mi következik

Az alábbiakban bemutatom azokat a tételeket, amelyeket tovább tudtam fejleszteni ehhez a játékhoz:

  1. Készítse el a szörny szellem verzióját, amely átmegy a földön.
  2. Hozzon létre egy második és egy következő szintet a játékhoz.
  3. Hozzon létre további elemeket, ahol az ásó több pontot szerezhet.
  4. Hozzon létre egy helyi adatbázist sütikkel, ahol a játék emlékezni fog a játékos magas pontszámára.
  5. Refaktor, refaktor és refaktor.
  6. Javítsa a játék teljesítményét.

Köszönjük, hogy e végéig elolvastad. Ha további javaslata van a fenti listán, nyugodtan kommentálja ezt a bejegyzést alább.

A teljes kód lekérhető a GitHubról.

Próbálja ki nyugodtan a játék bemutatóját.

Megjegyzések : Valószínűleg sokféleképpen lehet ezt a funkciót megvalósítani, de nekem ez volt a legkönnyebb. Bárki szabadon véleményezheti az esetleges hibákat vagy fejlesztéseket, amelyeket alkalmazhatok. Ez az útmutató kezdetben nekem szól, hogy megtanuljam és emlékezzem a tettemre. Ennek ellenére bárki szívesen követi ezt az útmutatót, ha hasznosnak találja.