Projekt z Technologii Internetowych

Transkrypt

1 POLITECHNIKA ŚLĄSKA WYDZIAŁ AUTOMATYKI, ELEKTRONIKI I INFORMATYKI Projekt z Technologii Internetowych Dawid Bąk, Marcin Zembski Semestr V gr. 4 Gliwice, styczeń 2012

2 2 Spis treści 1. Wstęp Harmonogram Harmonogram zatwierdzony Harmonogram wykonany Aplikacja programowa i/lub sprzętowa Określenie problemu Analiza rozwiązao Zaproponowane rozwiązanie Wykonanie Zaistniałe problemy Podsumowanie Literatura... 11

3 3 1. Wstęp Niektórzy z naszych kolegów długo zastanawiali się co mogą zrobid na projekt z Technologii Internetowych, brali pod uwagę swoje zainteresowania, niektórzy mieli ciekawe pomysły, ale w koocu w większości wypadków i tak duże ambicje szybko malały i skupiali się na stworzeniu czegoś prostego. My od początku wiedzieliśmy co chcemy zrobid. Mimo, że nie do kooca wiedzieliśmy jak to zrobid A szczerze, nie mieliśmy zielonego pojęcia. Postanowiliśmy wykonad grę przeglądarkową o charakterze RPG. Celem, który postawiliśmy sobie w ramach naszego projektu było przede wszystkim poznanie technik związanych z dynamicznym (bez odświeżania strony i wielkiego obciążenia serwera) komunikowaniem się różnych użytkowników, wykorzystywanym np. podczas walki w czasie rzeczywistym między dwoma graczami oraz przy chcacie. Oprócz tego poznanie technik bez, których nowoczesna strona internetowa się nie obejdzie takich jak: php, CSS czy w koocu Java Script. Sama gra miała umożliwiad oczywiście takie podstawowe opcję jak stworzenie nowego konta, logowanie, a oprócz tego utworzenie nowego bohatera ( wybranie klasy umiejętności, które będą miały wpływ na rozgrywkę, nadanie mu imienia itd.), podróżowanie po wirtualnym świecie, toczenie walki z serwerem oraz toczenie walki z innym bohaterem, możliwośd awansowania na następny level postaci i upgrade owanie jego umiejętności, kupowanie i korzystanie z przedmiotów i w koocu rozmowa z innymi graczami na chacie. Przed rozpoczęciem planowania przeglądaliśmy dużo podobnych gier i zastanawialiśmy się czego im brakuje. To tutaj zrodził się pomysł podróży po wirtualnym świecie. Inne gry ograniczały się raczej do tego, że użytkownik był w mieście i gdy chciał walczyd wchodził w odpowiednią stronę i wybierał sobie jednego spośród tysiąca dostępnych użytkowników. Wpadliśmy na pomysł by rozwiązad to inaczej. Chcieliśmy stworzyd kilka lokacji (w projekcie ograniczyliśmy do 4 ze względu na czas) między, którymi gracze mogę podróżowad. 2. Harmonogram 2.1. Harmonogram zatwierdzony 1. Prace wstępne, poznawanie technologii, projekt bazy danych 2. System rejestracji/logowania

4 4 3. Tworzenie postaci 4. Tworzenie miasta, oprogramowanie postaci niezależnych 5. System przeliczania akcji 6. Tworzenie mechaniki rozgrywki 7. System komunikacji między graczami 2.2. Harmonogram wykonany 1. Prace wstępne, poznawanie technologii, projekt bazy danych 2. System rejestracji/logowania 3. Tworzenie postaci 4. Utworzenie lokacji las. Stworzenie części mechaniki gry (sprawdzanie czy nasz bohater został zaatakowany przez innego gracza lub przez bota). 5. Walka z botem (serwerem). 6. Walka z innymi graczami 7. System komunikacji między graczami. 8. Mini sklep oraz rozwój postaci. Jak widad harmonogram zatwierdzony różni się dośd znacznie od harmonogramu wykonanego. Jest to spowodowane tym, że obraz gry w naszej głowie ciągle ewoluował podczas pisania kodu. Zrezygnowaliśmy z systemu przeliczania akcji i zastąpiliśmy go walką oraz podróżami w czasie rzeczywistym. Gracz nie musi czekad 3 godzin, aż coś się wydarzy, tylko każdy zmiana jest w pewien sposób od niego zależna i wykonuje się w czasie rzeczywistym. Dodatkowo stworzyliśmy miejsca między, którymi się podróżuje, oraz lokacje przejściowe, do których wprowadziliśmy innowacyjny system zdarzeo. Niestety z braku czasu nie mogliśmy wybudowad całego miasta (chodziło o sklepy czy warsztaty, jak kuźnia, płatnerz itd.), ale udostępniliśmy mini sklepik w każdej lokacji, w której można zakupid eliksiry życia. Nie mamy także postaci niezależnych co wynika oprócz ze wspomnianego braku czasu także z tego, że nie chcieliśmy tworzyd czegoś czego do kooca nie będziemy wykorzystywad. A nie bylibyśmy w stanie zaprogramowad postaci niezależnych w tak krótkim czasie do tego stopnia by były naprawdę znaczące i użyteczne. 3. Aplikacja programowa i/lub sprzętowa 3.1. Określenie problemu Naszym głównym celem było zapewnienie dynamicznej oraz przejżystej rozgrywki między graczami w czasie rzeczywistym.

5 Analiza rozwiązań Rozgrywkę w czasie rzeczywistym można było osiągnąd na wiele sposobów, ale niestety te prostsze są bardzo mało efektywne i bardzo obciążają serwer. Rozwiązaniem, które braliśmy pod uwagę na początku, było proste odświeżanie strony. W celu zapewnienia stałej kontroli zmian można było napisad kod, który zmusza klienta do ponownego wczytywania strony np. co sekundę. Dzięki temu moglibyśmy obserwowad czy coś się zmieniło w konkretnej bazie danych. Jednakże jak łatwo się domyślid rozwiązanie to się kompletnie nie sprawdza przy prawdziwej rozgrywce gdzie jest więcej graczy, jako, że przy każdym odświeżeniu serwer musi osobie wysład wszystkie dane od nowa. Przy większej liczbie osób obciążałoby to bardzo serwer. Szukaliśmy dalej Zaproponowane rozwiązanie W koocu wybraliśmy najlepszą opcję. Long Polling. Jest to połączenie trzech różnych technologii, PHP, Java Scriptu, a dokładnie jquery oraz AJAXa. Działa on w sposób następujący: W Java Scripcie tworzymy funkcję, która zawiera fragment AJAX a odpowiedzialny za połączenie JS z częścią PHP. AJAX postuje wybrane przez nas zmienne do części PHP i czeka na odpowiedź, która zostanie wykonana albo po upływie czasu, na który ustawiliśmy pętlę albo gdy pojawi się odpowiedź na serwerze. AJAX ma wspólną zmienną globalną z PHP, która nazywa się Json. Więd PHP zwraca wszystkie zmienne jako Json, odbiera je AJAX i jesteśmy w stanie dzięki temu odczytad w Java Scripcie. Tu decydujemy czy chcemy jeszcze raz uruchomid funkcję czy zadany wynik nas zadowala. Pętla Long Pollingu odpowiadająca za podróżowania i sprawdzanie czy zostaliśmy zaatakowani wygląda tak: Częśd Java Script/AJAX: function getmsg(){ var obr = document.getelementbyid('obr'); var akapit = document.getelementbyid('nic'); var miej2 = document.getelementbyid('opa'); var miej11=miej2.innerhtml; if(rodzajj==3){ exit(); $.ajax({ type: "GET", url: "pool1.php?timestamp=" + timestamp,

6 6 async: true, cache: false, success: function(data){ var json=eval('(' + data + ')'); if(json['msg']!=""){ if(rodzajj==3){ exit(); if(json['rodzaj']==0){ alert("zostałeś zaatakowany przez " + json*'msg'++"a"); akapit.innerhtml="toczysz walkę z "+ json*'msg'++"em."; $("#tab2").toggle("slow"); $("#ruch").toggle("slow"); //$("#akcja").toggle("slow"); //$("#disp").toggle("slow"); $("#obbr1").hide("slow"); bot(); exit(); else{ if(json['rodzaj']==1){ enemy=json['msg']; var przeciw1 = document.getelementbyid('bottek'); przeciw1.innerhtml=enemy; alert("zostałeś zaatakowany przez gracza: " + json*'msg'+); $("#tab2").toggle("slow"); akapit.innerhtml="toczysz walkę z graczem: "+ json*'msg'++"!"; $("#tab3").toggle("slow"); $("#disp").toggle("slow"); $("#ruch").toggle("slow"); $("#akcja").toggle("slow"); $("#obbr1").hide("slow"); var op=0; $("#chat").toggle("slow");

7 7 pvp(); exit(); obr.src=miej11+tablica[x]; x++; if(x==24){ koniec(); exit(); ); timestamp=json['timestamp']; settimeout('getmsg()',1000);, error: function(xmlhttprequest, textstatus, errorthrown){ //alert("error: " + textstatus + "(" + errorthrown + ")"); settimeout('getmsg()',15000); Częśd PHP: <?php session_start(); include "logconn.inc.php"; $aut=$_session['player_logged']; $czas=isset($_get['timestamp'])? $_GET['timestamp'] : 0; if($_get['timestamp']==0){ $czas=time();

8 8 $czas1=time(); $spr=0; $query = "SELECT tresc, autor, data, id ". "FROM wiadomosci ". "WHERE autor!= '$aut' AND tresc = '$aut' ". "ORDER BY data DESC LIMIT 0,1 "; $results= mysql_query($query) or die(mysql_error()); $row=mysql_fetch_array($results); $row['data']=strtotime($row['data']); while($czas>=$row['data']){ usleep(10000); clearstatcache(); $query = "SELECT tresc, autor, data, id ". "FROM wiadomosci ". "WHERE autor!= '$aut' AND tresc = '$aut' ". "ORDER BY data DESC LIMIT 0,1 "; $results= mysql_query($query) or die(mysql_error()); $row=mysql_fetch_array($results); $row['data']=strtotime($row['data']); if((time()-$czas1)>0){ $spr=1; break;

9 9 $man=($row['data']); srand((double) microtime() * ); $bocik=rand(0,99); if($bocik<=3 && $spr==1){ $spr=1; else{ if($spr==1){ $spr=2; if($spr==0){ $response = array(); $response['rodzaj']=1; $response['timestamp']=$man; $response['msg']=$row['autor']; $response['timerr']=$row['id']; $query = "INSERT INTO wiadomosci (tresc, autor) VALUES ('". $row['id']. "', '". $row['id']. "');"; $result = mysql_query($query) or die(mysql_error()); echo json_encode($response); else{ if($spr==1){ $response = array(); $response['rodzaj']=0; $response['timestamp']=$man; $response['msg']="bot"; echo json_encode($response); else{ $response = array(); $response['rodzaj']=2; $response['timestamp']=$czas; $response['msg']=""; echo json_encode($response);

10 10?> 3.4. Wykonanie Oprócz Long Pollingu wykorzystaliśmy też inne elementy różnych technologi. Tutaj w kolejności powstania: - Logowanie ( PHP, HTML ) - Rejestracja ( PHP, HTML ) - Grafika strony ( Grafika powstała głównie przy pomocy Google i Photoshopa ) - Podróżowanie między lokacjami ( Long Polling ) - Walka z Botem ( Long Polling ) - Elementy ruchome strony (HTML, CSS i Java Script ) - Walka z graczem ( Long Polling ) - Chat ( CSS i Long Polling ) - Sklep ( Java Script ) Cała strona została zbudowana przy użyciu technologii CSS Zaistniałe Problemy Jednym z największych problemów było, to że nikt nie chciał trzymad naszej gry na serwerze. Niestety w parę godziny po wgraniu na jakiś darmowy serwer strona zazwyczaj zostawała usunięta. Przypuszczamy, że ma na to wpływ charakter strony. Administratorzy boją się umieszczad gry na serwerach gdyż grozi to dużymi obciążeniami. Niestety przez to, że musieliśmy pracowad tylko i wyłącznie na jednym komputerze pojawiło się wiele problemów. Jako przykład mogę tu postawid Long Polling. Gdy dwóch graczy wchodziło do tej samej funkcji następował wyścig co często skutkowało złym przypisaniem zmiennych. Rozwiązaliśmy ten problem przez podzielenie funkcji na 2 części. W taki sposób 2 graczy walczących ze sobą nigdy nie jest w jeden funkcji. Inne problemy jakie napotkaliśmy były zazwyczaj spowodowane naszym brakiem wiedzy. Jako, że wszystkiego uczyliśmy się od zera i nie były to jedyne nasze zajęcia, niektórych rzeczy musieliśmy się uczyd przez wielokrotne próby. To powoduje, że nasz kod nie jest optymalny i jest dośd chaotyczny. Często jakaś rzecz nie działała i musieliśmy dodad jakaś dodatkową zmienną. Gdybyśmy lepiej znali technologie to niemośd, że moglibyśmy całą grę napisad w krótszym czasie, to jeszcze całośd by był bardziej przejrzysta. 4. Podsumowanie Udało nam się wykonad dużą częśd tego co zaplanowaliśmy na początku. Co więcej projekt ewoluował w trakcie i pojawiło się wiele ciekawych rozwiązao. W przyszłości chcielibyśmy się skupid na naprawieniu rzeczy, które nie działają tak jak powinny czego

11 11 przykładem jest sklepik, a raczej spożywanie zakupionych eliksirów. Leczy nas tylko mały eliksir. Jest to spowodowane najprawdopodobniej tylko drobnym błędem w kodzie. Dalej chcielibyśmy się skupid na udoskonaleniu napisanego kodu oraz na poprawieniu jego przejrzystości. Chcielibyśmy dodad kolejną pętle Long Pollingu, która by aktualnie sprawdzała kto jest w danej lokacji. Oprócz tego chcielibyśmy poszerzyd teren gry, rozbudowad lokacje, tworząc zróżnicowane sklepy. Każda lokacja powinna byd inna. Dodamy również więcej lokacji przejściowych i zróżnicujemy przeciwników serwerowych ( aktualnie mamy dostępną tylko walkę z jednym botem ). Do rozwoju postaci chcielibyśmy dodad wreszcie jakieś konkretne czary oraz rozwój posługiwania się konkretnymi broniami, rozwój umiejętności specjalnych itd. W części kodowej walki gdy powstanie sklep z bronią, czy jakieś czary będziemy musieli dodad tylko pętle ściągającą z serwera co dany gracz ma do dyspozycji ponieważ reszta kodu jest już dostosowana tak by można było tego używad ( podczas ataku możemy wybrad czy chcemy atakowad bronią, czy magią czy może rozbroid przeciwnika, a potem potem pojawia się pusta ramka do wybrania jaką bronią czy czarem chcemy atakowad ). Chcielibyśmy tez wprowadzid w koocu misję i postacie niezależne. Można by powiedzied, że żeby gra była w 100% skooczona to jeszcze dużo przed nami Ale wystarczy spojrzed ile już wykonaliśmy. Mamy wszystkie podstawowe aspekty wymagane by gra została nazwana grą RPG. Mamy też dynamiczną interakcję z innymi graczami więc wszystkie podstawowe i te najważniejsze założenia mamy już spełnione. Pozostaje teraz tylko skupid się na dopracowaniu szczegółów oraz na dalszym nieprzerwanym rozwijaniu gry. 5. Literatura 1. Michael Glass, Jeremy Stolz, Yann Le Scouarnec, Jason Gerner, Elizabeth Naramore Beginning PHP5, Apache, MySql Web Development.