close
Stitched Panorama
Kontynuujemy tworzenie gry przeglądarkowej.

W tym odcinku wprowadzimy do gry szablon. Będzie on bardzo prosty, ale zawsze możesz go zmienić według swojego upodobania. Zaczynajmy.

W pierwszej części tego wpisu będziemy pracowali z plikiem ModuleLoader.class.php. Dodamy kolejne case do klasy a następnie stworzymy kilka kolejnych stron i dodamy do nich szablon.

Dodajmy najpierw case, które będę występowały w każdej z podstron. Zaraz pod switch($MODULE) dodaj kod:

Case open dodaje otwierający znacznik htmlsekcję head, oraz otwierający body. Podpinam dwa style CSS: ten, który już mieliśmy – style.cssbootstrap.css oraz responsive.css. W tym projekcie posłużymy się frameworkiem Bootstrap. Możesz go pobrać z tej strony lub pobrać całą paczkę na końcu wpisu. Na końcu podłączymy jeszcze plik javascript tego frameworka. Plik responsive.css będzie zawierał media queries (pozwalają one na zmianę styli css w zależności od rozdzielczości).

Case navbar zawiera menu korzystające z funkcjonalności bootstrapa. Jest ono w pełni responsywne i przy niższych rozdzielczościach zmienia swój układ. Zawiera też znacznik h1 z nazwą naszej gry.

Case footer odpowiada za dodanie stopki z informacjami o autorze i ewentualnymi prawami autorskimi.

Case js podpina trzy pliki javascript. jQueryBootstrap w wersji skompresowanej oraz plik wlasny.js – na razie pusty plik na nasz kod JS.

 

W sekcji nawigacji możesz zobaczyć jakie podstrony chcemy zrobić: Statystyki, pracasklepwalka, oraz ranking. Stwórzmy teraz w folderze LIBRARY pliki:

  • statystyki.library.php
  • praca.library.php
  • sklep.library.php
  • walka.library.php
  • ranking.library.php

I dodajmy do klasy MainPage.class.php następujące potrzebne case:

Wcześniej stworzony plik home.library.php zostanie użyty w kolejnej lekcji. Zajmijmy się zawartością pozostałych. Dodajmy teraz case do ModuleLoader odpowiadające za te podstrony. Pod blokiem kodu odpowiadającym za wyświetlenia footera dodaj następujący kod:

Kolejne case różnią się na razie tylko nagłówkiem i klasą. Ich zawartość będziemy dodawać wraz z kolejnymi lekcjami. Zajmijmy się teraz plikami, do których załadujemy stworzone moduły.

Plik statystyki.library.php:

Plik praca.library.php:

Plik sklep.library.php:

Plik walka.library.php:

Plik ranking.library.php:

W każdym z tych plików dodajemy podstawową strukturę html oraz unikalny dla danej podstrony moduł. Przejdźmy teraz do pliku style.css i dodajmy pierwsze style:

Jest to podstawowe ostylowanie całej strony. Jest bardzo proste, jeśli chcesz go jakoś zmodyfikować – nie ma problemu 🙂

Zauważ że gdy zmniejszysz szerokość okna przeglądarki to w pewnym momencie zniknie zwykłe menu a pojawi się menu rozsuwane. Nie wygląda ono teraz zbyt atrakcyjnie, ponieważ przypisane są do niego te same style, które przypisaliśmy do zwykłego menu. Czas to zmienić. W pliku responsive.css dodajmy następującą regułę media queries:

Sprawi ona że menu w wersji mobilnej będzie wyglądało o wiele lepiej.

Na tym kończymy pracę. Mamy działającą stronę – gotową na dodanie do niej funkcjonalności naszej gry 🙂

Paczkę możesz pobrać tutaj.

Przykład możesz zobaczyć tutaj.

Tags : kursphpporadniktworzenie gry przeglądarkowejtworzenie gry w phpwprowadzenie szablonu