| Obsah |
|
| Vytvoření herní smyčky | Rozšíření HTML |
Reagovat rozložení
Tento kurz ukazuje, jak vytvořit reagovat rozložení pomocí JavaScriptu. Přidejte dvě pole do knihovny. Přesvědčte se, jedna červená a zelená. Tato pole jsou jen příklady. Lze použít jakékoliv tvary nebo objekty.
Přidání polí do editoru.
Uspořádejte boxy, tak jim vyplnit levé a pravé straně. Nechte okraj kolem nich.
To je teď příklad webové stránky s obsahem na levé a pravé straně. To bude vypadat dobře na ploše webového prohlížeče nebo telefonu v režimu na šířku. Bohužel toto rozvržení nebude dobře v režimu portrét. Buď, dvě krabice, musí se zmenšit, malá, nebo rozšířené na celou obrazovku a stěny krabice odříznout.
Tato situace je, kde je zapotřebí reagovat rozložení. V režimu na výšku jedna krabice by měla pohybovat nad sebou. Chcete-li to, musíme přesunout pole pomocí JavaScriptu. To znamená, že vypnete 'Použití časové osy' nastavení a pole 'ID skriptu'.
Chcete-li přesunout do polí mimo hranice filmu, musíme vypnout klip ve vlastnostech filmu.
Nejlepším místem, kde uspořádat do polí je v 'Na změnu velikosti' filmová událost.
Funkce potřebujeme jsou GetLeft, GetTop, GetWidth a GetHeight. Tyto funkce poskytují hranice webového prohlížeče nebo zařízení, pomocí souřadnic filmu. Když klip zapnuta, tyto hodnoty vrátí hranice filmu. Pokud použijete 'Žádný' film měřítku, GetLeft a GetTop vždy vrátí 0 a může být ignorována.
Za prvé umožňuje uspořádat dvě krabice, tak jeden vyplní levou stranu a druhá vyplňuje na pravé straně.
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
Dále přidáme hranici velikosti 10. Tato hodnota 10 není nutně v pixelech, je to ve stejném rozsahu filmu. Využití filmu 'Žádný' měřítko pro vše, co se v pixelech.
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
Konečně budeme testovat, zda šířka webového prohlížeče nebo zařízení je menší než výška. Když se to stane, změňte uspořádání polí svisle.
if(GetWidth()<GetHeight()){
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth())-Border-Border,(GetHeight()/2)-Border-(Border/2));
BoxB.SetBounds(GetLeft()+Border,GetTop()+(GetHeight()/2)+(Border/2),GetWidth()-Border-Border,(GetHeight()/2)-Border-(Border/2));
}else{
BoxA.SetBounds(GetLeft()+Border,GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
BoxB.SetBounds(GetLeft()+(GetWidth()/2)+(Border/2),GetTop()+Border,(GetWidth()/2)-Border-(Border/2),GetHeight()-Border-Border);
}
Nyní můžete vidět, pokud jste velikosti okna, dvě políčka samy automaticky uspořádat. Tyto dvě krabice lze snadno nahradit jinými tvary a objekty. V tomto příkladu lze rozšířit zpracovat složitější rozložení.
| Vytvoření herní smyčky | Rozšíření HTML |