| Zawartość |
|
| Tworzenie pętli gry | Rozszerzenia HTML |
Elastyczne układy
Ten samouczek pokazuje, jak stworzyć elastyczne układy za pomocą JavaScript. Dodać dwa pola do biblioteki. Zrobić jeden czerwony i jeden zielony. Te pola są tylko przykłady. Wszelkie kształty lub obiekty mogą być wykorzystane.
Dodaj pola do redakcji.
Rozmieść pola, więc oni wypełnić strony lewej i prawej. Pozostawić obramowanie wokół nich.
To teraz przykład strony sieci web z zawartością na lewej i prawej stronie. To będzie wyglądać dobrze na przeglądarce sieci web lub telefon w trybie poziomym. Niestety ten układ nie będzie działać dobrze w trybie portretowym. Albo, dwa pola musi być skurczył się małe, aby zmieścić, lub rozszerzony na cały ekran, i odciąć boki pola.
Sytuacja jest, gdy potrzebne są elastyczne układy. W trybie portretowym jedno pole powinno przejść nad drugim. Aby to zrobić, musimy przenieść pola za pomocą JavaScript. To oznacza wyłączenie 'Za pomocą osi czasu' pola i ustawienie 'Identyfikator skryptu'.
Aby przenieoć pola poza granice filmu, musimy wyłączyć klip we właściwościach filmu.
Najlepsze miejsce, aby zorganizować pola jest w 'Na rozmiar' filmu zdarzenie.
Funkcje potrzebne są GetLeft, GetTop, GetWidth i GetHeight. Funkcje te dają granice przeglądarki sieci web lub urządzenia za pomocą współrzędnych filmu. Gdy klip jest włączone, te wartości powrotu granice filmu. Jeśli używasz 'None' film skali, GetLeft i GetTop zawsze zwraca 0 i może być ignorowane.
Po pierwsze pozwala zorganizować dwa pola, więc wypełnia po lewej stronie i innych wypełnia po prawej stronie.
BoxB.SetBounds(GetLeft()+(GetWidth()/2),GetTop(),GetWidth()/2,GetHeight());
Następnie dodajemy granicy rozmiar 10. Ta wartość 10 nie jest koniecznie w pikselach, to jest w tej samej skali filmu. Wykorzystanie filmu skali "Brak" wszystko jest w pikselach.
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);
Wreszcie będziemy testować czy szerokość przeglądarki sieci web lub urządzenie jest mniejsza niż wysokość. Kiedy tak się dzieje, ponowne rozmieszczanie pól pionowo.
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);
}
Teraz możesz zobaczyć, jeśli przeskalujesz gracz, dwa pola będzie układać się automatycznie. Te dwa pola można łatwo zastąpić innych kształtów i obiektów. W tym przykładzie może być rozszerzona do obsługi bardziej skomplikowanych układach.
| Tworzenie pętli gry | Rozszerzenia HTML |