Front-end Front-end
Probíhá výprodej HTML, JavaScript a Bootstrap. Slevy až 80 %
Vyšlehej si extra vědomosti! Až 100% bodů na prémiový obsah zdarma! Více zde

Diskuze: Návrh hry jako přenositelný modul

Aktivity (2)
Avatar
BenQ Kopřiva:2. dubna 9:29

Ahoj.

Hraju si s myšlenkou udělat hru v JavaScriptu jako modul, takže bych ji mohl spustit na jakékoliv stránce, kam bych vložil skript s hrou.

Jsem v OOP začátečník, takže se omlouvám za mírné nechápání.

Představuji si to takhle:
Vím, že takto zapisovat třídy nemohu, jedná se jen a pouze o příklad.

class Mario {
    class Game {
        // Stará se o back-end, všechny věci potřebné pro hraní

        class Player {
            constructor (name) {
                this.name = name;
            }
        }
    }

    class Init {
        // Stará se o front-end, vykreslování atd.

        class Gui {
            build_gui() {
                // Vytvoří např. HTML elementy
            }
        }
    }

    start() {
        // Zavolá např. funkci build_gui() ze třídy Init a podtřídy Gui
}

Ve finále bych potom byl schopný na jakékoli stránce vložit např. tuhle řádku a hra by fungovala:

var mario = new Mario();
mario.start();

Moje otázka zní, jak by jste takové zadání řešili např. vy? Když máte udělat takovou přenositelnou hru, popř. jak by se taková hra správně navrhla čistě objektově?

Nebo se to dělá spíš tak, že každá třída je vlastní soubor a v sobouru mario.js, bych před třídou Mario vytvářel instance na všechny třídy a potom s nimi pracoval?

 
Odpovědět 2. dubna 9:29
Avatar
Odpovídá na BenQ Kopřiva
Vladislav Ladicky:2. dubna 9:59

Šlo by to ako modul. A pripol by si ten modul napríklad takto:

<script type="module">
import Mario from 'https://...'

const mario = new Mario()
mario.start()
</script>

Samozrejme, že vo vnútri importovanej triedy Mario môžeš mať importy iných vecí. Ale hlavne ... ako si to rozsekáš do súborov, akú tomu dáš štruktúru, to už je na tebe. JS nie je čistý OOP jazyk, nie sú tu zažité pravidlá ako napr. v Jave, že čo klasa, to samostatný súbor, a pod. Čiže, je to na tebe. Akurát ti rovno poradím ... predtým ako sa pustíš do modulárneho kódu, predtým ako tú štruktúru urobíš, vyhľadaj a naštuduj si čo je serial dependency fetching, aj ako sa mu vyhnúť.

 
Nahoru Odpovědět 2. dubna 9:59
Avatar
Odpovídá na Vladislav Ladicky
BenQ Kopřiva:2. dubna 10:09

Takže tohle vlastně nahrazuje vrstvení tříd ve třídě, ne? Tedy chápu to správně že:

import Mario from ...

bude teoreticky úplně stejný jako kdybych měl danou třídu tam kde jí importuji?

 
Nahoru Odpovědět 2. dubna 10:09
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2. dubna 10:46
function classMario()
    {
    var root = this;
    this.classGame = function() {};
    this.classPlayer = function(name)
        {
        this.name = name;
        }
    this.vars = {};
    this.Init = function()   {this.vars.players = []; this.vars.players[0] = new this.classPlayer('Jan')}
    this.Gui = function() {}
    this.start = function() {}
    }
var mario = new classMario();
mario.start();

---

var classMario = {};
classMario.classGame = {};
classMario.classPlayer = function(name)
  {
  this.name = name;
  }
classMario.Init = function()   {}
classMario.Gui = function() {}
classMario.start = function() {}

var mario = new classMario();
mario.start();

Stary zpusob zapisovani trid je takovyto. V. Ladicky zna par novejsich moznosti zapisu, ktere treba mne osobne nejsou vubec sympaticke :) Ale treba ti budou blizsi nez zapis pres funkce si asociativni pole nebo pres prototype.

Editováno 2. dubna 10:49
 
Nahoru Odpovědět 2. dubna 10:46
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2. dubna 10:56

Prijde mi ale lepsi oddelit data od class programu.
A 'vars' je dobre tez definovat na zacatku funkce. Abys mel lepsi prehled, ktera je a neni globalni. Je to sice pracnejsi udrzovat, ale mi se to tak vic libi.

var mario, db;
db = {};
db.players = [];
mario = new classMario();
mario.start();
//    this.Init = function()   {db.players = []; db.players[0] = new this.classPlayer('Jan')}
 
Nahoru Odpovědět 2. dubna 10:56
Avatar
Odpovídá na Peter Mlich
BenQ Kopřiva:2. dubna 11:44

Právě mám spíš v plánu mít data jako this.proměnné ve třídách a ty si v případě budu budu vracet přes getter. Máš blíž spíš k aktuálnímu zápisu tříd (resp. novýmu) a jestli modul funguje tak jak jsem psal, tak to bude super.

 
Nahoru Odpovědět 2. dubna 11:44
Avatar
Odpovídá na BenQ Kopřiva
Vladislav Ladicky:2. dubna 14:01

Vieš čo ... ani nad tým nematuruj a ponor sa do dokumentácie:

MDN Import

 
Nahoru Odpovědět 2. dubna 14:01
Avatar
Peter Mlich
Člen
Avatar
Peter Mlich:2. dubna 15:51

Delej, jak myslis. Ja mam dobre zkusenosti s tim drzet data venku. Postavit si treba dalsi classu na select, insert, update pro praci s daty. A cely ten system pak jde univerzalne pouzit.
Pokud to chces pouzit v class, pouzil bych to do construct casti

db = 456;
function classHra (db) {this.db = db;}
x = new classHra(db);
alert(x.db) // by melo vypsat 456, pokud tam nemam chybu
 
Nahoru Odpovědět 2. dubna 15:51
Děláme co je v našich silách, aby byly zdejší diskuze co nejkvalitnější. Proto do nich také mohou přispívat pouze registrovaní členové. Pro zapojení do diskuze se přihlas. Pokud ještě nemáš účet, zaregistruj se, je to zdarma.

Zobrazeno 8 zpráv z 8.