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 html, sekcję head, oraz otwierający body. Podpinam dwa style CSS: ten, który już mieliśmy – style.css, bootstrap.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. jQuery, Bootstrap 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, praca, sklep, walka, 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.
Tworzenie gry przeglądarkowej – #10 – Ranking i zakończenie projektu
Przeczytaj artykuł
Tworzenie gry przeglądarkowej – #2 Konfiguracja, podział strony, mod rewrite
Przeczytaj artykuł