Tworzenie gry przeglądarkowej – #1 Przygotowanie

Cześć. W tej serii wpisów pokaże Ci jak napisać tekstową grę przeglądarkową. Aby rozumieć co robię, warto znać chociaż podstawy PHP. Jeśli ich nie znasz – nie martw się 🙂 Jeśli coś pojawi się po raz pierwszy – będę to tłumaczył. 🙂

Z jakich technologii będziemy korzystać?

• PHP
• AJAX
• Javascript/jQuery
• mySQL
• HTML
• CSS

Na czym będzie polegała gra?

Każdy gracz będzie miał jedną postać. Będzie mógł zdobywać doświadczenie/poziomy, kupować/sprzedawać przedmioty i ich używać, walczyć z innymi graczami, pracować, wysyłać wiadomości do innych graczy itd. Coś jak dobrze znany Gladiatus czy Bitefight lecz pewnie mniej rozbudowany 🙂

Jak będzie wyglądała ta seria wpisów?

Wpis będę dodawał raz na kilka dni i w każdym będę przedstawiał proces tworzenia jakiejś jednej konkretnej rzeczy, od początku do końca np. systemu wiadomości czy walki. Przewiduje około 10 wpisów, ale ta liczba może się zmienić 🙂

Zaczynajmy!

W celu stworzenia podstawowej struktury folderów i plików skorzystamy z Instantblueprint. Jest to proste w użyciu narzędzie, dzięki któremu w kilka sekund stworzymy wszystkie potrzebne pliki i foldery oraz podłączymy bibliotekę jQuery. Wejdż na stronę  Instantblueprint i wprowadź dane jak na obrazku poniżej. Project Name może być dowolny, nie ma to znaczenia. Możesz też pobrać gotowy folder, który stworzyłem tutaj.

Gdy już wszystko wypełnimy, wystarczy kliknąć na przycisk ...All done? ..then lets create your blueprint! i następnie pobrać paczkę. Pobrane archiwum musimy wypakować do dowolnego folderu.

Teraz zainstalujemy serwer lokalny z PHP, mySQL i phpmyadmin. Nie chce żeby ten wpis bardzo długi, dlatego posłużymy się automatyczną instalacją wymienionych rzeczy przy pomocy WampServer. 

Wchodzimy na tą stronę i klikamy zakładkę Download. Teraz wybieramy odpowiednią dla swojego systemu wersję 32 bit lub 64 bit. Proces instalacji jest bardzo prosty i opiera się głównie o klikanie Dalej. 

Po instalacji włącz serwer klikając start WampServer w menu start lub na pulpicie. Na pasku bocznym powinna pojawić się zielona ikonka WampServer wyglądająca tak:

Jeśli się pojawi – nasz serwer jest gotowy 🙂

Przejdź teraz do folderu o tej ścieżce: C:\wamp\www. Jest to folder, do którego wrzucamy projekty, które chcemy uruchomić na serwerze. Wrzućmy do niego teraz nasz folder z grą.

Tak to wygląda w moim przypadku. Wewnątrz folderu gra znajdują się pliki utworzone przy pomocy instantblueprint. Przetestujemy teraz nasz serwer 🙂

Otwórz plik index.php i wewnątrz tagu body wklej ten kod:

<?php
	echo "Wszystko działa!";
?>

Jeśli nasz serwer faktycznie działa to po uruchomieniu pliku index.php zostanie wyświetlony tekst Wszystko działa!. Aby uruchomić plik na serwerze musisz w przeglądarce wpisać poniższy adres:

localhost/nazwa_folderu/nazwa_pliku 

nazwa_folderu to po prostu nazwa folderu w folderze www zatem w moim przypadku link będzie wyglądał tak:

localhost/gra – nie muszę tutaj podawać nazwy pliku ponieważ chce uruchomić główny plik (index.php).

Jeśli przeglądarka wyświetliła napis Wszystko działa! to wszystko działa jak należy 🙂

To już wszystko w tym wpisie. W kolejnym rozpoczniemy już tworzenie gry przeglądarkowej – napiszemy klasę, która obsłuży zapytania bazodanowe 🙂

Pobierz paczkę!