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':
            echo '
                <!DOCTYPE html>
                <html>
                      <head>
                        <title>Gra</title>
                        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>  
                        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
                    
                        <link href="css/bootstrap.css" rel="stylesheet" media="screen">
                        <link href="css/style.css" rel="stylesheet" media="screen">
                      </head>
                  <body>
            ';
            break;
            
            
            
            case 'navbar':
            echo '
            
              <header id="menu" class="navbar-fixed-top">
                    <div class="container">
                        <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                            <nav class="navbar navbar-inverse" role="navigation" id="pasek_nawi">
                                <div class="container-fluid">
                                    <div class="navbar-header">
                                        <button type="button" class="navbar-toggle button_nav" data-toggle="collapse" data-target="#moje-menu">
                                            <span class="sr-only">Nawigacja</span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                            <span class="icon-bar"></span>
                                        </button>
                                        <div id="logo">
                                            <h1>Gra</h1>
                                        </div>
                                        
                                    </div>
                                    <div class="collapse navbar-collapse" id="moje-menu">
                                        <ul class="nav navbar-nav navbar-right" id="ul_nawigacja">
                                            <li class="active"><a href="statystyki">Statystyki</a></li>
                                            <li><a href="praca">Praca</a></li>
                                            <li><a href="sklep">Sklep</a></li>
                                            <li><a href="walka">Walka</a></li>
                                            <li><a href="ranking">Ranking</a></li>
                                        </ul>
                                    </div>
                                </div>
                            </nav>
                        </div>
                    </div>
                </header>
            
            ';
            break;
            
            case 'footer':
            echo '
                <footer>
    	<p>Devcorner.pl</p>
                </footer>
            ';
            break;
            
            case 'js':
                echo '
                     <script src="js/jquery-2.0.3.min.js"></script>
                    <script src="js/bootstrap.min.js"></script>
                    <script src="js/wlasny.js"></script>
                ';
            break;

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:

            case 'home':
            require_once $this->active_page.".library.php";
            break;   
            
            case 'statystyki':
            require_once $this->active_page.".library.php";
            break;   
            
            case 'praca':
            require_once $this->active_page.".library.php";
            break;
            
            case 'sklep':
            require_once $this->active_page.".library.php";
            break;
            
            case 'walka':
            require_once $this->active_page.".library.php";
            break;
            
            case 'ranking':
            require_once $this->active_page.".library.php";
            break;

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:

case 'statystyki':
            echo '
                <section class="content statystyki">  	
                    <div class="container">        
                    	 <h2>Statystyki:</h2>         
                         
                         <div class="row">
                            
            				Tu będzie treść
            
                    	 </div>
                  
                    </div>   
                </section>
            ';
            break;  
            
            case 'praca':
            echo '
                <section class="content praca">  	
                    <div class="container">        
                    	 <h2>Praca:</h2>         
                         
                         <div class="row">
                            
            				Tu będzie treść
            
                    	 </div>
                  
                    </div>   
                </section>
            ';
            break;  
            
            case 'sklep':
            echo '
                <section class="content sklep">  	
                    <div class="container">        
                    	 <h2>Sklep:</h2>         
                         
                         <div class="row">
                            
            				Tu będzie treść
            
                    	 </div>
                  
                    </div>   
                </section>
            ';
            break; 
            
            case 'walka':
            echo '
                <section class="content walka">  	
                    <div class="container">        
                    	 <h2>Walka:</h2>         
                         
                         <div class="row">
                            
            				Tu będzie treść
            
                    	 </div>
                  
                    </div>   
                </section>
            ';
            break; 
            
            
            case 'ranking':
            echo '
                <section class="content ranking">  	
                    <div class="container">        
                    	 <h2>Ranking:</h2>         
                         
                         <div class="row">
                            
            				Tu będzie treść
            
                    	 </div>
                  
                    </div>   
                </section>
            ';
            break;

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:

<?php

ModuleLoader::load('open');

echo '<div id="wrapper">';

ModuleLoader::load('navbar');

ModuleLoader::load('statystyki');

ModuleLoader::load('footer');

echo '</div>';

ModuleLoader::load('js');

echo '</body></html>';
?>

Plik praca.library.php:

<?php

ModuleLoader::load('open');

echo '<div id="wrapper">';

ModuleLoader::load('navbar');

ModuleLoader::load('praca');

ModuleLoader::load('footer');

echo '</div>';

ModuleLoader::load('js');

echo '</body></html>';

?>

Plik sklep.library.php:

<?php

ModuleLoader::load('open');

echo '<div id="wrapper">';

ModuleLoader::load('navbar');

ModuleLoader::load('sklep');

ModuleLoader::load('footer');

echo '</div>';

ModuleLoader::load('js');

echo '</body></html>';

?>

Plik walka.library.php:

<?php

ModuleLoader::load('open');

echo '<div id="wrapper">';

ModuleLoader::load('navbar');

ModuleLoader::load('walka');

ModuleLoader::load('footer');

echo '</div>';

ModuleLoader::load('js');

echo '</body></html>';

?>

Plik ranking.library.php:

<?php

ModuleLoader::load('open');

echo '<div id="wrapper">';

ModuleLoader::load('navbar');

ModuleLoader::load('ranking');

ModuleLoader::load('footer');

echo '</div>';

ModuleLoader::load('js');

echo '</body></html>';

?>

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:

html,
body {
	margin:0;
	padding:0;
	height:100%;
	background: rgba(204,204,204,1);
}

a {
	text-decoration: none;	
}

.hide {
	text-indent: -998em;
	height: 0px;
}

h1 {
	margin-top: 0px;
	margin-bottom: 0px;	
	font-size: 44px;
	color: #edecec;
        line-height: 80px;
}

#wrapper {
	min-height: 100%;
	position: relative;
}

#menu {
	height: 80px;	
	background: rgba(153,0,51,1);
}

#pasek_nawi { 
	height: 80px;	
	background: rgba(153,0,51,1);
	border: none;
}


#ul_nawigacja a {
	display: inline;
	height: 80px;	
	font-size: 13px;
	margin-left: 10px;
	line-height: 80px;
	padding-top: 0px;
	padding-bottom: 0px;
	background: none;	
	color: #fff;
	font-size: 18px;
}

.navbar-toggle {
        margin-top: 25px;
}

.content > div {	
	text-align: center;
}

.content {
	padding-bottom:50px;
	padding-top: 80px;
}

footer {
	background: rgba(51,51,51,1);
	width:100%;
	height: 50px;
	position:absolute;
	bottom:0;
	left:0;
	line-height: 50px;
	text-align: center;
	color: #fff;
}

footer p {
        margin-bottom: 0px;
        margin-top: 0px;
}

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:

@media(max-width: 767px){	

#ul_nawigacja a {
	display: block;
	height: 50px;	
	margin-left: 10px;
	line-height: 50px;
	color: #fff;
	font-size: 24px;
	text-align: center;
        background: rgba(153,0,51,1);
}

}

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.

Bądź pierwszą osobą, która skomentuje ten wpis.