Phaser 3 və TypeScript istifadə edərək brauzerdə necə sadə bir oyun etmək olar

Phil Botha'nın Unsplash üzərindəki fotoşəkili

Mən bir inkişaf tərəfdarıyam və bir son inkişafçıyam və ön inkişaf təcrübəm nisbətən zəif olmuşdur. Bir müddət əvvəl biraz əylənib brauzerdə oyun oynamaq istəyirdim. Çerçeve olaraq Phaser 3'ü (bu günlərdə olduqca populyar görünür) və dil olaraq TypeScript'i seçdim (çünki statik yazmağı daha dinamikdən üstün tuturam). Hər şeyin işə yaraması üçün darıxdırıcı şeylər etməli olduğunuz ortaya çıxdı. Ona görə də bu təlimatı yazdım ki, mənim kimi digər insanlar daha sürətli işə başlaya bilsinlər.

Ətraf mühiti hazırlayın

IDE

İnkişaf mühitinizi seçin. Hər zaman normal köhnə redaktoru istifadə edə bilərsiniz, amma daha faydalı bir şey istifadə etməyinizi məsləhət görürəm. Emacs-da ev heyvanları layihələrini inkişaf etdirməyi üstün tuturam, buna görə gelgit qurdum və qurmaq üçün təlimatları izlədim.

düyün

JavaScript-də inkişaf etsəydik, kod hazırlamaq üçün bütün bu hazırlıq addımları olmadan çox yaxşı olardı. Lakin, TypeScript istifadə etmək istədiyimiz üçün gələcək inkişafı mümkün qədər sürətli etmək üçün infrastruktur qurmalıyıq. Buna görə node və npm quraşdırmalıyıq.

Bu yazıdan etibarən 10.13.0 və Npm 6.4.1 qovşaqlarından istifadə edirəm. Xahiş edirik unutmayın ki, ön dünyadakı versiyalar son dərəcə tez bir zamanda yenilənir, buna görə də son sabit versiyalardan istifadə edirsiniz. Əl ilə node və npm yükləmək əvəzinə nvm istifadə etməyi məsləhət görürəm. Bu sizə çox vaxt və əsəbdən qənaət edir.

Layihə qurun

Layihə quruluşu

Layihəni qurmaq üçün npm istifadə edəcəyik. Layihəni başlamaq üçün boş bir qovluğa keçin və npm init-i çalıştırın. npm layihə xüsusiyyətləri ilə bağlı bir neçə sual verir və sonra package.json faylı yaradır. Buna bənzər bir şey görünəcək:

{"name": "Starfall", Versiya: 0.1.0, "Təsvir": "Starfall oyunu (Phaser 3 + TypeScript)", "main": "index.js", "Scripts": {"test": "echo" Xəta: test göstərilməyib "&& çıxış 1"}, "müəllif": "Mariya Davydova", "Lisenziya": "MIT"}

Paketlər

Tələb olunan paketləri aşağıdakı əmrlə quraşdırın:

npm yüklə -D tipli webpack webpack-cli ts-loader phaser live-server

-D seçimi (aka --save-dev) npm-in bu paketləri avtomatik olaraq package.json-dakı asılılıqlar siyahısına əlavə etməsinə səbəb olur:

"devDependencies": {"live-server": "^ 1.2.1", "phaser": "^ 3.15.1", "ts-loader": "^ 5.3.0", "Typescript": "^ 3.1. 6 "," webpack ":" ^ 4.26.0 "," webpack-cli ":" ^ 3.1.2 "}

Veb paketi

Webpack, TypeScript kompilyatorunu işlədir və nəticədə ortaya çıxan JS sənədlərini və kitabxanaları minimuma endirilmiş bir JS-də toplayır ki, onları səhifəmizə daxil edə bilək.

Project.json yaxınlığında webpack.config.js əlavə edin:

const yolu = tələb ('yol');
module.exports = {Giriş: './src/app.ts', Modul: {Qaydalar: [{Test: /\.tsx?$/, istifadə: 'ts-loader', xaric et: / node_modules /}]} , Təyinat: {Extensions: ['.ts', '.tsx', '.js']}, Çıxış: {Faylın adı: 'app.js', yol: path.resolve (__ dirname, 'dist')}, Rejim: 'inkişaf'};

Burada veb paketin qaynaqları src / app.ts-dən əldə etməsi lazım olduğunu (bu sənədləri tezliklə əlavə edəcəyik) və hər şeyi dist / app.js faylında toplamalı olduğunu görürük.

yazı tipi

TypeScript kompilyatoru (tsconfig.json) üçün mənbələrin hansı JS versiyasına yığılmalı və bu mənbələrin harada tapılacağını izah etdiyimiz kiçik bir konfiqurasiya sənədinə ehtiyacımız var:

{"compilerOptions": {"target": "es5"}, "include": ["src / *"]}

TypeScript tərifləri

TypeScript statik olaraq yazılmış bir dildir. Buna görə tərtib üçün tip tərifləri tələb olunur. Bu yazı zamanı Phaser 3 tərifləri npm paketi olaraq hələ mövcud deyildi. Buna görə rəsmi anbardan yükləməlisiniz və faylı layihənizin src alt qovluğuna yerləşdirin.

Ssenarilər

Layihə ilə demək olar ki, bitmişik. Bu nöqtədə pack.json, webpack.config.js və tsconfig.json yaratmalı və src / phaser.d.ts əlavə etməlisiniz. Kod yazmağa başlamazdan əvvəl etməyimiz lazım olan son şey, npm-in layihə ilə tam olaraq nə əlaqəsi olduğunu izah etməkdir. Pack.json faylının skript hissəsini aşağıdakı kimi yeniləyirik:

"Scripts": {"build": "webpack", "start": "webpack --watch & live-server --port = 8085"}

Npm build çalıştırdığınız zaman, app.js faylı veb paket konfiqurasiyasına uyğun olaraq yaradılır. Və npm başlanğıcını işə saldığınız zaman yaradılış prosesi barədə narahat olmayın: bir qaynaq saxlayan kimi veb paketi tətbiqini yenidən qurur və canlı server onu standart brauzerinizdə yenidən yükləyir. Tətbiq http://127.0.0.1:8085/ ünvanında yerləşdirilir.

Başlayırıq

İnfrastrukturu qurduğumuzdan (bir layihəyə başladığımda şəxsən nifrət etdiyim hissə) nəhayət kodlamağa başlamışıq. Bu addımda bir sadə şey edirik: brauzerimizin pəncərəsində tünd mavi düzbucaqlı çəkin. Böyük bir oyun inkişaf çərçivəsindən istifadə etmək bir az ... hmmm ... həddindən artıqdır. Hələ növbəti addımlar üçün buna ehtiyacımız var.

Phaser 3-ün arxasındakı əsas anlayışları qısaca izah edim. Oyun Phaser.Game sinifinin (və ya onun nəslinin) bir nümunəsidir. Hər oyun Phaser.Scene nəsillərinin bir və ya daha çox nümunəsini ehtiva edir. Hər bir səhnə statik və ya dinamik bir neçə obyektdən ibarətdir və oyunun məntiqi hissəsini təmsil edir.Məsələn, sadə oyunumuzda üç səhnə olacaq: açılış ekranı, oyunun özü və skorlar ekranı.

Kodlamağa başlayaq.

Əvvəlcə oyun üçün minimalist bir HTML konteyner yaradın. Aşağıdakı kodu ehtiva edən bir index.html faylı yaradın:

Ulduz düşməsi </ title> <script src = "dist / app.js"> </ script> </ head> <body> <div id = "game"> </ div> </ body> </ html></pre><p>Burada yalnız iki əsas hissə var: birincisi, burada yaratdığımız fayldan istifadə edəcəyimizi söyləyən bir skript girişidir, ikincisi oyun qabını təmsil edən div girişidir.</p><p>İndi aşağıdakı kodla bir src / app.ts fayl yaradın:</p><pre>idxal "phaser";</pre><pre>const config: GameConfig = {Başlıq: "Starfall", Genişlik: 800, Boy: 600, Parent: "Game" backgroundColor: "# 18216D"};</pre><pre>StarfallGame ixrac sinfi Phaser.Game {constructor (configuration: GameConfig) {super (config); }}</pre><pre>window.onload = () => {var game = new StarfallGame (config); };</pre><p>Bu kod özünü izah edir. GameConfig, burada baxa biləcəyiniz bir çox fərqli xüsusiyyətə malikdir.</p><p>İndi nəhayət npm start-ı işə sala bilərsiniz. Bu və əvvəlki addımlarda hər şey düzgün bir şəkildə aparılıbsa, brauzerinizdə sadə bir şey görməlisiniz:</p><img alt="Bəli bu mavi ekran." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569967675050.png" /><h3>Ulduzları buraxın</h3><p>İbtidai bir tətbiqetmə yaratdıq. İndi bir şeyin baş verdiyi bir mənzərə əlavə etmə vaxtı gəldi. Oyunumuz sadə olacaq: ulduzlar yerə yıxılacaq və məqsəd mümkün qədər çoxunu tutmaq olacaq.</p><p>Bu məqsədə çatmaq üçün yeni bir oyun, gameScene.ts yaradın və ona aşağıdakı kodu əlavə edin:</p><pre>idxal "phaser";</pre><pre>GameScene ixracat sinifi Phaser.Scene-ni genişləndirir {</pre><pre>Constructor () {Super ({Açar: "GameScene"}); }</pre><pre>init (parametrlər): etibarsız {// MAKE}</pre><pre>Yanlışlıq (): boşluq {// MAKE} yaratmaq (): boşluq {// MAKE}</pre><pre>Yeniləmə (vaxt): etibarsız {// MAKE}};</pre><p>Konstruktor burada digər səhnələrin bu mənzərəni axtara biləcəyi bir düyməni ehtiva edir.</p><p>Burada dörd metod üçün nümunələrə baxa bilərsiniz. O vaxtdakı fərqi qısaca izah edim:</p><ul><li>səhnə başlayanda init ([params]) deyilir; Bu funksiya scene.start (key, [params]) çağıraraq digər səhnələrdən və ya oyunlardan ötürülən parametrləri qəbul edə bilər.</li><li>preload () səhnə obyektləri yaradılmadan əvvəl çağırılır və yük elementlərini ehtiva edir. Bu varlıqlar önbelleğe alınır, buna görə səhnə yenidən başlandıqda yenidən yüklənmir</li><li>create () varlıqlar yükləndikdə adlanır və ümumiyyətlə əsas oyun obyektlərinin (fon, oyunçular, maneələr, düşmənlər və s.) Yaratılmasını ehtiva edir.</li><li>yeniləmə ([vaxt]) hər bir gənənin adıdır və səhnənin dinamik hissəsini ehtiva edir - hərəkət edən, yanıb sönən hər şey.</li></ul><p>Bunu sonradan unutmamağımız üçün tez bir zamanda aşağıdakı sətirləri game.ts-ə əlavə edək:</p><pre>idxal "phaser"; "./GameScene" -dən {GameScene} idxal edin;</pre><pre>const config: GameConfig = {title: "Starfall", eni: 800, boy: 600, parent: "game", səhnə: [GameScene], fizika: {standard: "arcade", arcade, passage: {debug: false} }, backgroundColor: "# 000033"}; ...</pre><p>Oyunumuz artıq oyun səhnəsini bilir. Oyun konfiqurasiyasında səhnələrin siyahısı varsa, ilk oyun başlayanda başlayacaq və digərləri yaradılacaq, ancaq açıq şəkildə çağırılana qədər başlamaz.</p><p>Buraya arcade fizikasını da əlavə etdik. Ulduzlarımızın düşməsi tələb olunur.</p><p>İndi oyun səhnəmizin sümüklərinə ət qoya bilərik.</p><p>Əvvəlcə ehtiyac duyduğumuz bəzi xüsusiyyətlər və obyektləri elan edirik:</p><pre>GameScene ixracat sinifi Phaser.Scene {Delta: sayı; lastStarTime: say; ulduzlar tutuldu: say; ulduz düşməsi: sayı; qum: Phaser.Fizika.Arcade.StaticGroup; məlumat: Phaser.GameObjects.Text; ...</pre><p>Sonra nömrələri başlatırıq:</p><pre>init (/ * params: any * /): void {this.delta = 1000; this.lastStarTime = 0; this.starsCaught = 0; this.starsFallen = 0; }</pre><p>İndi bir neçə şəkil yükləyək:</p><pre>Önyargı (): void {this.load.setBaseURL ("https://raw.githubusercontent.com/mariyadavydova/" + "starfall-phaser3-typescript / master /"); this.load.image ("ulduz", "aktivlər / star.png"); this.load.image ("qum", "aktivlər / sand.jpg"); }</pre><p>Bundan sonra statik komponentlərimizi hazırlaya bilərik. Ulduzların düşəcəyi zəmini və cari hesabı bizə bildirəcək mətni yaradacağıq:</p><pre>create (): void {this.sand = this.physics.add.staticGroup ({key: 'Sand', FrameMenge: 20}); Phaser.Actions.PlaceOnLine (this.sand.getChildren (), yeni Phaser.Geom.Line (20, 580, 820, 580)); this.sand.refresh ();</pre><pre>this.info = this.add.text (10, 10, '', {font: '24px Arial Bold', doldurun: '#FBFBAC'}); }</pre><p>Phaser 3-dəki bir qrupla birlikdə nəzarət etmək istədiyiniz bir sıra obyektlər yarada bilərsiniz. İki növ obyekt var: statik və dinamik. Tahmin etdiyiniz kimi, dinamik obyektlər işi yerinə yetirərkən (Mario, gəmilər, raketlər) statik obyektlər hərəkət etmir (döşəmə, divarlar, müxtəlif maneələr).</p><p>Statik bir qrup qururuq. Bu hissələr xətt boyunca yerləşdirilir. Xəttin 20 bərabər hissəyə (gözlədiyiniz kimi 19 deyil) bölündüyünü və hər hissədəki döşəmə plitələrinin həmin nöqtədəki kafel mərkəzi ilə sol tərəfə yerləşdirildiyini unutmayın (inşallah bu rəqəmləri izah edir). Qrup sərhəd sahəsini yeniləmək üçün də refresh () çağırmalıyıq (əks halda toqquşmalar səhnənin sol üst küncündə olan standart yerlə müqayisə ediləcək).</p><p>İndi brauzerdə tətbiqinizi yoxladıqda görməlisiniz:</p><img alt="Mavi ekran inkişafı" src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569967676394.png" /><p>Nəhayət bu səhnənin ən dinamik hissəsinə - ulduzların düşdüyü yeniləmə () funksiyasına çatdıq. Bu funksiya təxminən 60 ms-də bir dəfə çağırılır. Hər saniyədə yeni bir ulduz çıxarmaq istəyirik. Bunun üçün dinamik bir qrup istifadə etmirik, çünki hər ulduzun ömrü qısadır: ya istifadəçinin tıklamasıyla, ya da yerə dəyərək məhv olur. Buna görə emitStar () funksiyasında yeni bir ulduz yaradırıq və iki hadisənin işlənməsini əlavə edirik: onClick () və onCollision ().</p><pre>Yeniləmə (vaxt: nömrə): void {var diff: sayı = vaxt - this.lastStarTime; əgər (diff> this.delta) {this.lastStarTime = vaxt; əgər (this.delta> 500) {this.delta - = 20; } this.emitStar (); } this.info.text = this.starsCaught + "tutuldu -" + this.starsFallen + "düşdü (max 3)"; }</pre><pre>private onClick (ulduz: Phaser.Physics.Arcade.Image): () => void {return function () {star.setTint (0x00ff00); star.setVelocity (0, 0); this.starsCaught + = 1; this.time.delayedCall (100, function (star) {star.destroy ();}, [star], this); }}</pre><pre>private onFall (ulduz: Phaser.Physics.Arcade.Image): () => void {return function () {star.setTint (0xff0000); this.starsFallen + = 1; this.time.delayedCall (100, function (star) {star.destroy ();}, [star], this); }}</pre><pre>private emitStar (): void {var star: Phaser.Physics.Arcade.Image; var x = Phaser.Math.Between (25, 775); var y = 26; star = this.physics.add.image (x, y, "star");</pre><pre>star.setDisplaySize (50, 50); star.setVelocity (0, 200); star.setInteractive ();</pre><pre>star.on ('pointerdown', this.onClick (star), this); bu.fizika.add.collider (ulduz, bu.qum, bu.onfall (ulduz), boş, bu); }</pre><p>Nəhayət bir oyunumuz var! Hələ qazanma şərtləri yoxdur. Dərsliyimizin son hissəsində əlavə edəcəyik.</p><img alt="Ulduz tutmağı pis bilirəm ..." src="https://imgstore.nyc3.cdn.digitaloceanspaces.com/ceadesc/1569967677698.png" /><h3>Hər şeyi qablaşdırın</h3><p>Oyun ümumiyyətlə bir neçə səhnədən ibarətdir. Oyun sadə olsa da, bir açılış səhnəsinə (ən azı "Oynat!" Düyməsinə sahib olmaqla) və bir bağlanış səhnəsinə (oyun seansınızın nəticəsi ilə, məsələn, hesab və ya əldə olunan ən yüksək hesabla) ehtiyacınız olacaq. Bu səhnələri tətbiqetməyimizə əlavə edək.</p><p>Bizim vəziyyətimizdə, onlar olduqca oxşar olacaqlar, çünki oyunun qrafik dizaynına çox diqqət yetirmək istəmirəm. Axı bu bir proqramlaşdırma təlimidir.</p><p>WelcomeScene.ts-dəki xoş səhnə aşağıdakı kodu ehtiva edir. Bir istifadəçi bu səhnəni tıkladıqda bir oyun səhnəsi görünəcəyini unutmayın.</p><pre>idxal "phaser";</pre><pre>WelcomeScene ixracat sinifi Phaser.Scene {title: Phaser.GameObjects.Text; Qeyd: Phaser.GameObjects.Text;</pre><pre>Constructor () {Super ({key: "WelcomeScene"}); }</pre><pre>yaratmaq (): void {var titleText: string = "Ulduz düşməsi"; this.title = this.add.text (150, 200, titleText, {font: '128px Arial Bold', fill: '#FBFBAC'});</pre><pre>var hintText: string = "Başlamaq üçün vurun"; this.hint = this.add.text (300, 350, hintText, {font: '24px Arial Bold', fill: '#FBFBAC'});</pre><pre>this.input.on ('pointerdown', function (/ * pointer * /) {this.scene.start ("GameScene");}, this); }};</pre><p>Qiymətləndirmə səhnəsi demək olar ki, eynidir və tıklandıqda qarşılama səhnəsinə aparılır (scoreScene.ts).</p><pre>idxal "phaser";</pre><pre>İxracat ScoreScene sinifi Phaser.Scene {hesab: sayı; Nəticə: Phaser.GameObjects.Text; Qeyd: Phaser.GameObjects.Text;</pre><pre>Constructor () {Super ({key: "ScoreScene"}); }</pre><pre>init (params: any): void {this.score = params.starsCaught; }</pre><pre>create (): void {var resultText: string = 'Hesabınız' + this.score + '!'; this.result = this.add.text (200, 250, resultText, {font: '48px Arial Bold', fill: '#FBFBAC'});</pre><pre>var hintText: string = "Yenidən başlamaq üçün vurun"; this.hint = this.add.text (300, 350, hintText, {font: '24px Arial Bold', fill: '#FBFBAC'});</pre><pre>this.input.on ('pointerdown', function (/ * pointer * /) {this.scene.start ("WelcomeScene");}, this); }};</pre><p>İndi əsas tətbiqetmə sənədimizi yeniləməyimiz lazımdır: bu səhnələri əlavə edin və WelcomeScene-ni siyahıda birinci edin:</p><pre>idxal "phaser"; {WelcomeScene} -i "./welcomeScene" -dən import edin; "./GameScene" -dən {GameScene} idxal edin; {. ScoreScene "-dən {ScoreScene} idxal edin;</pre><pre>const config: GameConfig = {... Səhnə: [WelcomeScene, GameScene, ScoreScene], ...</pre><p>Nə əskik olduğunu fərq etdiniz? Düzdür, ScoreScene-ə hələ heç bir yerə zəng etmirik! Oyunçu üçüncü ulduzu qaçırdıqda buna zəng edək:</p><pre>private onFall (ulduz: Phaser.Physics.Arcade.Image): () => void {return function () {star.setTint (0xff0000); this.starsFallen + = 1; this.time.delayedCall (100, function (star) {star.destroy (); if (this.starsFallen> 2) {this.scene.start ("ScoreScene", {starsCaught: this.starsCaught});}}, [ulduz], bu); }}</pre><p>Nə də olsa, Starfall oyunumuz həqiqi bir oyuna bənzəyir - başlayır, bitir və hətta arxivləşdirmək məqsədi daşıyır (neçə ulduz tuta bilərsiniz?).</p><p>Ümid edirəm ki, bu təlimat yazarkən mənim üçün olduğu qədər sizin üçün də faydalıdır.</p><p>Bu təlimatın mənbə kodunu burada tapa bilərsiniz.</p></div><div class="neighbor-articles"><h4 class="ui header">Həmçinin bax</h4><a href="/question/how-to-connect-samsung-note-5-to-computer/" title="samsung note 5-i kompüterə necə bağlamaq olar">samsung note 5-i kompüterə necə bağlamaq olar</a><a href="/question/how-to-turn-on-epson-projector-without-remote/" title="epson projektorunu pult olmadan necə açmaq olar">epson projektorunu pult olmadan necə açmaq olar</a><a href="/question/how-to-determine-if-a-matrix-is-singular/" title="bir matrisin tək olub olmadığını necə təyin etmək olar">bir matrisin tək olub olmadığını necə təyin etmək olar</a><a href="/question/how-to-paralyze-yourself/" title="özünüzü necə iflic etmək">özünüzü necə iflic etmək</a><a href="/question/how-to-say-wet-paint-in-spanish/" title="ispan dilində nəm boya necə deyilir">ispan dilində nəm boya necə deyilir</a><a href="/question/how-to-install-avada/" title="avada necə qurulacaq">avada necə qurulacaq</a><a href="/question/how-to-test-for-endogeneity/" title="endogenliyi necə yoxlamaq olar">endogenliyi necə yoxlamaq olar</a><a href="/question/how-to-open-a-stapler-all-the-way/" title="necə bir zımbalı bütün yolla açmaq olar">necə bir zımbalı bütün yolla açmaq olar</a></div></div><div class="article-sidebar"><div class="neighbor-articles"><h4 class="ui header">Həmçinin bax</h4><a href="/article/the-burden-of-making-decisions-and-how-to-break-the-toxic-cycle-of-procrastination-51b2e8/" title="Qərar qəbul etmək və zəhərli süründürmə dövrünü qırmaq.">Qərar qəbul etmək və zəhərli süründürmə dövrünü qırmaq.</a><a href="/article/how-to-make-work-better-bcc75a/" title="İşinizi necə yaxşılaşdırmaq olar">İşinizi necə yaxşılaşdırmaq olar</a><a href="/article/a-practical-guide-on-how-to-stop-people-pleasing-and-start-being-yourself-50e709/" title="İnsanların razı qalmalarını dayandırmaq və özünüz olmağa necə başlamaq üçün lazımlı bir bələdçi">İnsanların razı qalmalarını dayandırmaq və özünüz olmağa necə başlamaq üçün lazımlı bir bələdçi</a><a href="/article/how-to-update-the-apollo-client-s-cache-after-a-mutation-929230/" title="Bir mutasiyadan sonra Apollo müştəri önbelleğini necə yeniləmək olar">Bir mutasiyadan sonra Apollo müştəri önbelleğini necə yeniləmək olar</a><a href="/article/how-to-put-the-reader-in-the-story-with-description-aabaab/" title="Hekayəyə təsviri ilə oxucunu necə əlavə etmək olar">Hekayəyə təsviri ilə oxucunu necə əlavə etmək olar</a><a href="/article/how-to-start-a-successful-side-hustle-and-make-1000-mo-or-more-98634d/" title="Uğurlu bir tərəf təlaşına necə başlamaq və ayda 1000 dollar və ya daha çox qazanmaq olar">Uğurlu bir tərəf təlaşına necə başlamaq və ayda 1000 dollar və ya daha çox qazanmaq olar</a><a href="/article/how-to-optimize-your-writing-toolbox-and-determine-what-type-of-writer-you-want-to-be-d2d588/" title="Yazı alətlər qutunuzu necə optimallaşdırmaq və hansı yazıçı olmaq istədiyinizi necə müəyyənləşdirmək olar">Yazı alətlər qutunuzu necə optimallaşdırmaq və hansı yazıçı olmaq istədiyinizi necə müəyyənləşdirmək olar</a><a href="/article/how-to-handle-adult-temper-tantrums-982625/" title="Yetkinlərdə tantrums ilə mübarizə">Yetkinlərdə tantrums ilə mübarizə</a></div></div></div></main><div class="push"></div></div><footer><div class="flags-footer"><a href="https://uz.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="uz flag"></i></a><a href="https://bg.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="bg flag"></i></a><a href="https://et.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ee flag"></i></a><a href="https://lt.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="lt flag"></i></a><a href="https://lv.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="lv flag"></i></a><a href="https://sr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="rs flag"></i></a><a href="https://sl.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="si flag"></i></a><a href="https://sk.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="sk flag"></i></a><a href="https://uk.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ua flag"></i></a><a href="https://sq.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="al flag"></i></a><a href="https://hy.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="am flag"></i></a><a href="https://is.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="is flag"></i></a><a href="https://kk.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="kz flag"></i></a><a href="https://fa.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ir flag"></i></a><a href="https://tg.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="tj flag"></i></a><a href="https://ga.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ie flag"></i></a><a href="https://be.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="by flag"></i></a><a href="https://ka.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ge flag"></i></a><a href="https://ky.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="kg flag"></i></a><a href="https://lb.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="lu flag"></i></a><a href="https://lo.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="la flag"></i></a><a href="https://ar.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="sa flag"></i></a><a href="https://bn.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="in flag"></i></a><a href="https://ca.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="es flag"></i></a><a href="https://zh.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="cn flag"></i></a><a href="https://hr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="hr flag"></i></a><a href="https://cs.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="cz flag"></i></a><a href="https://da.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="dk flag"></i></a><a href="https://nl.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="nl flag"></i></a><a href="https://tl.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ph flag"></i></a><a href="https://fi.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="fi flag"></i></a><a href="https://fr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="fr flag"></i></a><a href="https://de.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="de flag"></i></a><a href="https://el.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="gr flag"></i></a><a href="https://iw.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="il flag"></i></a><a href="https://hi.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="in flag"></i></a><a href="https://hu.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="hu flag"></i></a><a href="https://id.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="id flag"></i></a><a href="https://it.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="it flag"></i></a><a href="https://ja.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="jp flag"></i></a><a href="https://ko.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="kr flag"></i></a><a href="https://ms.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="my flag"></i></a><a href="https://mr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="io flag"></i></a><a href="https://no.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="no flag"></i></a><a href="https://pl.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="pl flag"></i></a><a href="https://pt.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="pt flag"></i></a><a href="https://ro.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ro flag"></i></a><a href="https://ru.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ru flag"></i></a><a href="https://internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="es flag"></i></a><a href="https://sv.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="ch flag"></i></a><a href="https://ta.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="sg flag"></i></a><a href="https://te.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="in flag"></i></a><a href="https://th.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="th flag"></i></a><a href="https://tr.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="tr flag"></i></a><a href="https://ur.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="pk flag"></i></a><a href="https://vi.internautasporlapaz.org/article/how-to-build-a-simple-game-in-the-browser-with-phaser-3-and-typescript-dede14/"><i class="vn flag"></i></a></div>internautasporlapaz.org<!-- --> © <!-- -->2021<!-- --> </footer></div></div></div></body></html>