Projekt z Technologii Internetowych

POLITECHNIKA ŚLĄSKA
WYDZIAŁ AUTOMATYKI, ELEKTRONIKI I INFORMATYKI
Projekt z Technologii Internetowych
Gra przeglądarkowa – The Game
Dawid Bąk, Marcin Zembski
Semestr V gr. 4
Gliwice, styczeń 2012
2
Gra przeglądarkowa – The Game
Spis treści
1.
Wstęp ......................................................................................................................................... 3
2.
Harmonogram............................................................................................................................. 3
3.
2.1.
Harmonogram zatwierdzony ............................................................................................ 3
2.2.
Harmonogram wykonany................................................................................................. 4
Aplikacja programowa i/lub sprzętowa........................................................................................ 4
3.1.
Określenie problemu ....................................................................................................... 4
3.2.
Analiza rozwiązao ............................................................................................................ 5
3.3.
Zaproponowane rozwiązanie ........................................................................................... 5
3.4.
Wykonanie .................................................................................................................... 10
3.5
Zaistniałe problemy………………………………………………………………………………………………………10
4. Podsumowanie ......................................................................................................................... 10
5.
Literatura .................................................................................................................................. 11
3
Gra przeglądarkowa – The Game
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
Gra przeglądarkowa – The Game
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
Gra przeglądarkowa – The Game
3.2. 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.
3.3. 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
Gra przeglądarkowa – The Game
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
Gra przeglądarkowa – The Game
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
Gra przeglądarkowa – The Game
$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
Gra przeglądarkowa – The Game
$man=($row['data']);
srand((double) microtime() * 1000000);
$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
Gra przeglądarkowa – The Game
}
?>
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.
3.5. 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
Gra przeglądarkowa – The Game
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”.