Jak zrobić planszę do gry?

Forum poświęcone technologiom Web 2.0, przeznaczone dla webmasterów i webdeveloperów.
Awatar użytkownika
BlondKate
Posty: 51
Rejestracja: 20 sie 2013, 19:14

Jak zrobić planszę do gry?

Post autor: BlondKate » 22 sie 2013, 18:34

Męczę się teraz i próbuję zrobić u siebie na stronie planszę do gry, układ podobny do Monopoly. Czytałam, że najlepiej to zrobić za pomocą div-ów ale nie do końca wiem jak to zrobić. Jak wrzucę divy po kolei to w linii nie ma tyle ile bym chciała i mam problem z kolorystyką. Czy jest jakieś rozwiązanie tego problemu czy też robi się to za pomocą innych technik?

Awatar użytkownika
Fanatyk
Posty: 88
Rejestracja: 21 sie 2013, 13:27

Re: Jak zrobić planszę do gry?

Post autor: Fanatyk » 22 sie 2013, 18:40

Wykorzystasz do tego divy skumulowane, tj. jeden div będzie zawierał inne. Jeżeli ma to przypominać monopoly to rozumiem, że pola będą dookoła a w środku jakaś plansza? Górnego diva robisz na szerokość X. Suma szerokości wewnętrznych divów równa się szerokości X.
Drugi rząd divów składa się z trzech divów, dwóch bocznych i jednego środkowego. Te boczne divy mają taką samą szerokość i obramowanie jak wewnętrzne divy z góry a środkowy ma pozostałą szerokość. Tak robisz tyle pól ile potrzebujesz a na samym dole powtarzasz górnego diva.
Mam nadzieję, że w miarę logicznie udało mi się to wytłumaczyć?

Awatar użytkownika
BlondKate
Posty: 51
Rejestracja: 20 sie 2013, 19:14

Re: Jak zrobić planszę do gry?

Post autor: BlondKate » 22 sie 2013, 18:59

Próbowałam zrobić jak jak mówisz, ale wszystko mi się totalnie porozjeżdżało i nic nie jest ze sobą spójne. Wygląda, jakby pola planszy było porozmieszczane wręcz losowo. Pominę kwestię, że nie o takie coś mi chodziło. Chciałam, by wyszło ładnie, przejrzyście i całkiem przyjemnie dla oka a w zamian otrzymałam jeden wielki niczym nie określony chaos! Czyżby nie dało rady nic z tym zrobić?

Awatar użytkownika
Fanatyk
Posty: 88
Rejestracja: 21 sie 2013, 13:27

Re: Jak zrobić planszę do gry?

Post autor: Fanatyk » 22 sie 2013, 19:06

Teraz zauważyłem, że zapomniałem Tobie jednej rzeczy napisać. Do każdego wewnętrznego diva musisz dodać:

Kod: Zaznacz cały

float:left;
.
Wszystkie pola planszy będą się ustawiały do lewej strony, dzięki czemu jeżeli nie pomyliłaś się z rozmiarami pól powinno to wyglądać w miarę równe. W razie czego zawsze możesz pozmieniać wartości dużych divów by się nie rozjeżdżało wszystko i powinno to grać tak jak należy.

Awatar użytkownika
BlondKate
Posty: 51
Rejestracja: 20 sie 2013, 19:14

Re: Jak zrobić planszę do gry?

Post autor: BlondKate » 22 sie 2013, 19:29

Teraz to wszystko zaczęło działać i wygląda tak jak trzeba. Naprawdę wielkie dzięki. A powiedz mi jeszcze taką rzecz, jak jeden obrazek wrzucić na środek planszy tak by to wyglądało przyzwoicie? Próbowałam wrzucić do górnego rzędu, ale tylko tam się to wyświetla, reszta pozostaje biała jak śnieg.

Awatar użytkownika
Fanatyk
Posty: 88
Rejestracja: 21 sie 2013, 13:27

Re: Jak zrobić planszę do gry?

Post autor: Fanatyk » 22 sie 2013, 19:40

Musisz cały obrazek pociąć w poziomie na takie wymiary by pasowały do poszczególnych głównych divód. Wtedy jako wypełnienie takiego diva dajesz obraz i będzie nim grafika odpowiednia do poziomu obrazka. Po uzupełnieniu wszystkich pustych divów powinno wszystko wyglądać jak należy. Pamiętaj tylko by nie stosować w tych wewnętrznych divach obramowania bo nie będzie to w żaden normalny sposób wyglądało.

Awatar użytkownika
Crystianos
Posty: 32
Rejestracja: 20 sie 2013, 19:06

Re: Jak zrobić planszę do gry?

Post autor: Crystianos » 24 sie 2013, 20:46

Chciałem zobaczyć czy takie rozwiązanie działa i u mnie daje niestety wynik negatywny. Ostatnia komórka jest jakoś tak dziwnie przycięta w połowie, mimo, że wszystkie mają ustalony taki sam rozmiar a rozmiar komórek planszy zgadza się z szerokością diva. Co więc mogło pójść nie tak, że nie działa to tak jak należy?

Awatar użytkownika
Fanatyk
Posty: 88
Rejestracja: 21 sie 2013, 13:27

Re: Jak zrobić planszę do gry?

Post autor: Fanatyk » 24 sie 2013, 21:20

Jak znam życie zrobiłeś ten sam błąd co większość osób w tej sytuacji. Zrobiłeś pewnie także obramowanie każdej komórki, którego nie uwzględniłeś w wymiarowaniu nadrzędnego diva i dlatego właśnie ostatnia komórka została przycięta. Innej możliwości w tej sytuacji nie ma i to jest jedyna opcja gdzie mogłeś zrobić błąd.

Awatar użytkownika
Crystianos
Posty: 32
Rejestracja: 20 sie 2013, 19:06

Re: Jak zrobić planszę do gry?

Post autor: Crystianos » 24 sie 2013, 21:39

No i zgadza się. W ogóle nie brałem tego obramowania pod uwagę. A co się stanie, jeżeli szerokość ustawię na większą niż wynika to z sumy szerokości komórek i obramowania? Czy będzie to miało jakiś negatywny wpływ na cały układ planszy? Spróbowałem dać większy margines i nic się złego tam nie stało więc to chyba nie jest takie istotne..

Awatar użytkownika
Fanatyk
Posty: 88
Rejestracja: 21 sie 2013, 13:27

Re: Jak zrobić planszę do gry?

Post autor: Fanatyk » 24 sie 2013, 21:50

Całą planszę musisz mieć idealnie zgraną, dlatego, że jak zmodyfikujesz gdzieś jakiś element, może nawet nieświadomie, to zacznie Ci się wszystko rozjeżdżać, a tak będziesz miał wszystko w sztywnych ramach dość jasno określone. Zachowasz dzięki temu także większą przejrzystość kodu i w razie potrzeby dostosujesz wszystko elegancko do nowych koncepcji.

ODPOWIEDZ