Przede wszystkim przebudujmy kilka linijek odpowiedzialnych za wykrywanie zdarzeń klawiatury. O ile kod ten wciąż nie jest doskonały i wymaga dalszego doszlifowania, o tyle aktualnie musi nam wystarczać.

if(keyHandler.isHolded(37)) // LEFT
{
	GameTank.changeDirection(0);
	if(GameTank.x>0)
		GameTank.changePosition(-1,0);
}
else if(keyHandler.isHolded(38)) // UP
{
	GameTank.changeDirection(1);
	if(GameTank.y>1)
		GameTank.changePosition(0,-1);
}
else if(keyHandler.isHolded(39)) // RIGHT
{
	GameTank.changeDirection(2);
	if(GameTank.x<480)
		GameTank.changePosition(1,0);
}
else if(keyHandler.isHolded(40)) // DOWN
{
	GameTank.changeDirection(3);
	if(GameTank.y<480)
		GameTank.changePosition(0,1);
}

Co się zmieniło? Wszelkie polecenia zmiany położenia czołgu są teraz przekazywane do metody GameTank.changePosition(). To ona zabezpiecza grę przed przecinaniem się obiektów.

changePosition: function(x,y)
{
	var newPosition = [this.x+x, this.y+y];
	var newField = [Math.ceil((newPosition[0])/32)-1, Math.ceil((newPosition[1]/32))-1];
 
	if(x)
	{
		var offset = newPosition[1]%32;
		if(x>0)
			var fields = [[1,0],[1,1]];
		else
			var fields = [[0,0],[0,1]];
	}
	else
	{
		var offset = newPosition[0]%32;
		if(y>0)
			var fields = [[0,1],[1,1]];
		else
			var fields = [[0,0],[1,0]];
	}
 
	var checkField = GameBoard.board[newField[1]+fields[0][1]][newField[0]+fields[0][0]];
	if(checkField==0 || checkField==1 || offset==0 || offset>29)
	{
		if(offset>0 && offset<6)
		{
			this.x+=x;
			this.y+=y;
		}
		else
		{
			var checkField = GameBoard.board[newField[1]+fields[1][1]][newField[0]+fields[1][0]];
			if(checkField==0 || checkField==1)
			{
				this.x+=x;
				this.y+=y;
			}
		}
	}
},

Najpierw określam współrzędne nowego położenia czołgu(jego górnego lewego narożnika) oraz współrzędne pola na krórym się znajduje. Następnie wyznaczam odstęp(offset) jaki dzieli czołg od krawędzi kratki(Pamiętajmy, że czołg nie jest szeroki na 32px tak jak pole na mapie). Dzięki określeniu pewnej granicy błędu nie będziemy musieli ustawiać się idealnie aby przejechać między dwoma obszarami blokującymi. Znacznie ułatwi to sterowanie.

Kolejnym krokiem jest określenie 2 pól(fields), na podstawie których badane będą kolizje. To jakie pola wybierze skrypt zależy od kierunku w jakim się poruszamy. A są to:

Następnie jest sprawdzany rodzaj tych pól oraz odległość czołgu o nich. Jeżeli wszystko się zgadza, pozycja czołgu zostaje zmieniona.

Całość działa całkiem sprawnie. Efekt końcowy możesz zobaczyć tutaj

UWAGA: Artykuł jest kontynuacją poprzedniego: Canvas — Rysujemy mapę

Przede wszystkim potrzebujemy czołgu. Na potrzeby artykułu oraz mojej gry stworzyłem prosty szkic w GIMP-ie:

Zanim umieścimy go na planszy, przeanalizujmy kilka innych ważnych aspektów.

Obsługa klawiatury

Aby sterować naszym czołgiem musimy stworzyć obiekt przechwytujący zdarzenia klawiatury. Najbardziej problematyczny jest jednak sposób ich działania w JavaScript. Dla przeciętnego klawisza są wywoływane 4 zdarzenia:

1. keydown
2. keypress
3. textInput
4. keyup

Zdarzenie textInput zdefiniowane niedawno przez W3C obsługują, bodajże, tylko przeglądarki w oparciu o silnik WebKit. Z pozostałymi zdarzeniami jest różnie. Keypress jest pomijane w przypadku klawiszy specjalnych takich jak shift, alt i ctrl. Niestety nie ma jasno zdefiniowanej listy klawiszy specjalnych. Przeglądarki w oparciu o WebKit zaliczają do nich np. klawisze strzałek, FireFox już nie. Co więcej identyfikacja klawiszy w różnych przeglądarkach jest realizowana w oparciu o inne pola(event.keyCode, event.which oraz event.charCode). Na szczęście wszystkie całkiem sprawnie obsługują pole keyCode, więc nie jest to aż tak ogromny problem(pomijając fakt, że czasami keyCode dla tego samego klawisza jest inny w różnych przeglądarkach). Podsumowując. Obsługa klawiatury w JavaScript to istny koszmar i moim zdaniem powinna zostać przebudowana. Wystarczy pozostawić keydown, textInput oraz keyup oraz ujednolicić kody klawiszy. Jest jednak lista klawiszy bezpiecznych(działających identycznie lub bardzo podobnie w różnych środowiskach). Znalazłem w sieci ciekawe zestawienie na ten temat.

Warto wiedzieć w jaki sposób działa zdarzenie przytrzymania klawisza. Przeglądarki realizują to bardzo dziwnie. W przypadku wciśnięcia klawisza jest wywoływana akcja keydown, keypress oraz keyup. Następnie wywoływane jest ponownie zdarzenie keydown, po nim keypress oraz znów keyup. I tak, aż do momentu puszczenia klawisza. W naszym przypadku zdarzenie keypress pominiemy(tym bardziej, że w przypadku strzałek nie zawsze jest ono wywoływane) więc zaobserwujemy:

keydown
keyup
keydown
keyup
(…)
keydown
keyup

Oczywiście w przypadku naszej gry akcja utrzymywania klawisza musi być ciągła dlatego musimy opóźnić zwolnienie klawisza. Napiszmy prostą klasę.

var keyHandler = {
 
    keyLastEvent: [], //true = keyDown, false = keyUp
    keyStatus: [],
 
    keyDown: function(e){
        // ustawienie statusu na jeden(klawisz wcisniety po raz pierwszy)
        if(keyHandler.keyStatus[e.keyCode]===undefined)
        {
            keyHandler.keyStatus[e.keyCode] = 1;
            keyHandler.keyLastEvent[e.keyCode] = 1;
        }
        else
        {
            if(!keyHandler.keyLastEvent[e.keyCode]) // ostatnia akcja byl keyUp => powtarzane down, up; down, up
                keyHandler.keyStatus[e.keyCode]++;
 
            keyHandler.keyLastEvent[e.keyCode] = 1;
        }
    },
 
    keyUp: function(e){
        keyHandler.keyLastEvent[e.keyCode] = 0;
 
        // odcisniecie klawisza z 10ms opóźnieniem
        window.setTimeout(keyHandler.decreaseKeyStatus(e.keyCode), 20);
    },
 
    decreaseKeyStatus: function(keyCode){
        this.keyStatus[keyCode]--;
    },
    isHolded: function(key){
        return (this.keyStatus[key]>0);
    }
};

Klasa zawiera tablicę klawiszy. W przypadku wciśnięcia np. strzałki w lewo(keyCode = 37) następuje zwiększenie o jeden wartości keyStatus[37]. Jeżeli ta wartość jest większa od zera metoda isHolded() zwraca true co informuje nas, że klawisz jest przytrzymywany. W przypadku systemów z rodziny Windows zdarzenie keyUp nie jest powtarzane. Zatem zwiększenie wartości naszego licznika powinno nastąpić tylko raz w przypadku pierwszego pojawienia się zdarzenia keyDown. Aby wiedzieć jakiego rodzaju zdarzenie zostało ostatnio wywołane(up czy down) stworzyłem zmienną keyLastEvent i modyfikuję ją wg. potrzeb. Dzięki takiej budowie naszej klasy(tj. bez warunkowych lini kodu zależnych od systemu operacyjnego lub przeglądarki) akcja przytrzymania klawisza zostanie poprawnie rozpoznana nawet w przypadku poprawienia błędów w jednej z przeglądarek.

Aby kod ten zadziałał potrzebujemy dodatkowo określić, które z naszych funkcji nasłuchują. Zrobimy to w metodzie init() obiektu GameBoard tuż pod kodem ładującym tekstury.

        this.preloadTextures(1);
 
        document.addEventListener('keydown', keyHandler.keyDown, false);
        document.addEventListener('keyup', keyHandler.keyUp, false);

Pętla główna

W przypadku gier ważne jest utworzenie pętli głównej programu. Będzie ona za każdym razem sprawdzała stan zdarzeń pochodzących z klawiatury, sieci oraz sztucznej inteligencji. W przypadku małych gier(np. kółko i krzyżyk, sudoku, saper) jest to nieistotne, u nas — w grze pełnej animacji — po prostu konieczne.

Stwórzmy dodatkowy obiekt będący centralną sterownią naszej gry.

var GameMain = {
    img: {},
    x:0,
    y:480,
    direction: 1,  // 0= LEFT 1 =UP, 2 = RIGHT, 3=DOWN
    mainLoop: function(){
 
            GameBoard.drawBoard();
 
            if(keyHandler.isHolded(37)) // LEFT
            {
                GameMain.direction = 0;
                if(GameMain.x>0)
                    GameMain.x-=1;
            }
            else if(keyHandler.isHolded(38)) // UP
            {
                GameMain.direction = 1;
                if(GameMain.y>0)
                    GameMain.y-=1;
            }
            else if(keyHandler.isHolded(39)) // RIGHT
            {
                GameMain.direction = 2;
 
                if(GameMain.x<480)
                    GameMain.x+=1;
            }
            else if(keyHandler.isHolded(40)) // DOWN
            {
                GameMain.direction = 3;
                if(GameMain.y<480)
                    GameMain.y+=1;
            }
 
 
            for(var i=37; i<41; i++)
            {
                if(keyHandler.isHolded(i))
                    document.getElementById('key-'+i).style.background = 'red';
                else
                    document.getElementById('key-'+i).style.background = 'white';
            }
 
            GameBoard.ctx.save();
            GameBoard.ctx.translate(GameMain.x,GameMain.y);
            switch(GameMain.direction)
            {
                case 2:
                    GameBoard.ctx.rotate(90 * Math.PI / 180);
                    GameBoard.ctx.drawImage(GameMain.img.tank,0,-32);
                    break;
                case 3:
                    GameBoard.ctx.rotate(180 * Math.PI / 180);
                    GameBoard.ctx.drawImage(GameMain.img.tank,-32,-32);
                    break;
                case 0:
                    GameBoard.ctx.rotate(270 * Math.PI / 180);
                    GameBoard.ctx.drawImage(GameMain.img.tank,-32,0);
                    break;
                default:
                    GameBoard.ctx.drawImage(GameMain.img.tank,0,0);
 
            }
            GameBoard.ctx.restore();
             FrameCounter.updateFPS();
    },
 
    init: function(){
        this.img.tank = new Image();
        this.img.tank.src = 'images/btank.png';
        this.img.tank.onload = function(){
            GameBoard.init();
        }
    }
}

Metoda mainLoop() będzie wywoływana co określony, bardzo krótki czas. Dzięki temu będziemy w stanie na bierząco wychwytywać nadchodzące zdarzenia.

Podzielona jest ona na kilka akcji. Pierwszą z nich jest rysowanie mapy. Następnie sprawdzamy poszczególne klawisze strzałek. W przypadku przytrzymania jedngo z nich, zmieniamy współrzędne naszego czołgu — pola x oraz y klasy GameMain. Kolejnym krokiem jest zapisanie stanu obiektu canvas. Translacja o wektor, obrót w odpowiednim kierunku oraz rysowanie czołgu. Następnie przywracamy stan obszaru canvas i wywołujemy licznik FPS

Odczyt grafiki czołgu umieściłem w metodzie init(). Jest to nasza nowa metoda inicjalizująca, którą musimy wywołać aby uruchomić grę.

Licznik FPS

Ważnym elementem podczas testowania gry jest licznik FPS. Dzięki niemu będziemy mogli określić, które elementy gry są napisane nieoptymalnie oraz, który kod należy wymienić. Oko ludzkie jest w stanie zaobserwować jedynie 25 klatek filmu w każdej sekundzie. Dla mnie jest to jednak mało. Spróbujmy sprawdzić aby gra posiadała przynajmniej 40fps. Moja klasa licząca ilość klatek wygląda następująco:

var FrameCounter = {
 
    lastFrameTime: new Date().getTime(),
    updateFPS: function(){
        var currentTime = new Date().getTime();
 
        document.getElementById('fps').innerHTML = Math.floor(1000/(currentTime-this.lastFrameTime),2)+'fps';
        this.lastFrameTime = currentTime;
    }
};

Jak ten kod działa? W każdej klatce obliczana jest różnica pomiędzy aktualnym czasem oraz czasem wyświetlania poprzedniej klatki. W ten sposób możemy obliczyć czas(w milisekundach) wykonywania się jednej klatki. Dzieląc przez tą wartość 1000 otrzymujemy ilość klatek na sekundę.

Uruchomienie

Zmieniona została klasa inicjująca naszą grę więc w metodzie GameBoard.preloadTextures() musi zajść lekka zmiana:

    preloadTextures: function(i){
        var img = new Image();
        img.src = this.textures[i];
        img.onload = function() {
 
            GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
            if(GameBoard.textures[i+1])
                GameBoard.preloadTextures(i+1);
            else
                window.setInterval(GameMain.mainLoop,10);
        }
    },

Gotowe! Pełny kod źródłowy z dzisiejszego artykułu jest dostępny również online, jako działająca całość. Zapraszam do testów.

Optymalizacja

Po uruchomieniu gry zapewne zauważyłeś, że działa ona bardzo wolno. Jedynie przeglądarki działające w oparciu o WebKit potrafią osiągnąć oczekiwane 40 klatek. Poniżej dołączam małe zestawienie przeglądarek(aktualne ustawienia — odświeżanie klatki co 10ms — powoduje, że maksymalna ilość klatek na sekundę to 100).

Oczywiście jest to zbyt mało aby gra była w pełni grywalna, ponieważ na mapie poruszać będzie się kilka czołgów otoczonych szeregiem animacji. Pamiętajmy jednak, że kod, który umieściłem na serwerze jest niezoptymalizowany. W kolejnych artykułach przedstawię sztuczki jak przyspieszyć rysowanie elementów w obiekcie canvas oraz jak skrócić czas wykonywania się zwykłego kodu JavaScript.

Przede wszystkim potrzebujemy obiektu canvas o rozmiarach 512x512px(16x16 pól o rozmiarach 32x32px).

<canvas id="gameBoard" width="512" height="512"></canvas>

Do wygenerowania mapy potrzebujemy również kilku tekstur. Tymczasowo posiadam jedynie trawę, wodę, cegłę oraz lód.

Trawę ustawiłem jako tło elementu canvas bezpośrednio w pliku CSS. Spróbujmy stworzyć główną klasę o nazwie GameBoard.

var GameBoard = {
    ctx: null,
    TEXTURE_ID: {ICE: 1, BRICK: 2, WATER: 3}, 
    textures: [null, 'images/ice.png', 'images/brick.png', 'images/water.png'],
 
    board:[
        [1,1,1,1,1,1,2,2,2,2,1,1,1,1,1,1],
        [1,1,1,2,2,2,2,2,2,2,2,2,2,1,1,1],
        [1,1,2,2,2,2,2,2,2,2,2,2,2,2,1,1],
        [1,2,2,2,2,2,2,2,2,2,2,2,2,2,2,1],
        [1,2,2,1,1,2,2,2,2,2,2,1,1,2,2,1],
        [2,2,2,1,3,2,2,2,2,2,2,1,3,2,2,2],
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        [2,2,2,2,2,2,2,2,2,2,2,2,2,2,2,2],
        [2,2,2,2,2,2,2,1,1,2,2,2,2,2,2,2],
        [0,2,2,2,2,2,2,2,2,2,2,2,2,2,2,0],
        [0,2,2,2,1,2,2,2,2,2,2,1,2,2,2,0],
        [0,2,2,2,2,1,1,1,1,1,1,2,2,2,2,0],
        [0,0,2,2,2,2,2,2,2,2,2,2,2,2,0,0],
        [0,0,0,2,2,2,2,2,2,2,2,2,2,0,0,0],
        [0,0,0,0,0,0,2,2,2,2,0,0,0,0,0,0],
        [0,0,0,0,0,0,0,0,0,0,0,0,0,0,0,0]],
 
    drawBoard: function() {
        for(var y=0; y<16; y++)
        {
            for(var x=0; x<16; x++)
            {
                if(this.board[y][x]>0)
                {
                    this.ctx.save();
                    this.ctx.fillStyle = this.textures[this.board[y][x]];
                    this.ctx.fillRect(x*32,y*32,32,32);
                    this.ctx.restore();
                }
            }
        }
    },
 
    preloadTextures: function(i){
        var img = new Image();
        img.src = this.textures[i];
        img.onload = function() {
 
            GameBoard.textures[i] = GameBoard.ctx.createPattern(img, 'repeat');
            if(GameBoard.textures[i+1])
                GameBoard.preloadTextures(i+1);
            else
                GameBoard.drawBoard();
        }
    },
 
    init: function (){
        this.canvas = document.getElementById('gameBoard');
        if (this.canvas.getContext)
        {
            this.ctx = this.canvas.getContext("2d");
            this.preloadTextures(1);
        }
    }
};

Pierwsze pole naszego obiektu — ctx(context) to kontekst obiektu canvas. Po przez niego odwołujemy do wszystkich metod rysujących. Następny obiekt — TEXTURE_ID — jest niczym innym jak zbiorem stałych(troszkę to przypomina enum znane z c++). W tym przykładzie nie jest on w ogóle używany jednak w przyszłości wygodniejsze będzie odwoływanie się za pomocą nazw. Kolejne pole — textures — to tablica adresów do naszych tekstur. Zauważ, że indeksy w tej tablicy odpowiadają wartościom stałych w TEXTURE_ID( TEXTURE_ID.ICE = 1 oraz textures[1] = ‚images/ice.png’). Przyjąłem, że tekstura zerowa to po prostu tekstura pusta(pełna przezroczystość). Na końcu widnieje tablica board zawierająca informacje o każdym polu. Liczba od 0 do 3 określa rodzaj tekstury.

init()

Metoda ta wyłapuje kontekst naszego pola canvas zapisuje go do pola ctx oraz wywołuje metodę preloadTextures(1). Rozpoczniemy ładowanie tekstur rozpoczynając od tej o identyfikatorze jedynki(zero jest zarezerwowane dla tekstury pustej).

preloadTextures()

Jako parametr metoda ta przyjmuje identyfikator tekstury(jej indeks w tablicy textures). Najpierw tworzymy pusty obraz, a następnie ustalamy jego adres. Po załadowaniu pliku z grafiką generujemy nowy wzór za pomocą ctx.createPattern() oraz nadpisujemy nim adres przechowywany w tablicy textures. Następnie sprawdzamy czy tekstura o identyfikatorze o jeden większym istnieje. Jeśli tak ładujemy ją. Jeśli nie wyświetlamy mapę

drawBoard()

Ta metoda rysuje pole po polu przechodząc przez wszystkie elementy z tablicy board. Sądzę, że kod jest oczywisty.

Efekt działania skryptu:

Co następnym razem?

Umieścimy na planszy naszą postać oraz zaprogramujemy metody odpowiedzialne za wyłapywanie zdarzeń klawiatury. Możliwe stanie się płynne poruszanie po mapie.

Poprawiony kod wygląda tak:

<?php 
set_time_limit(0);
 
class GameClient
{
   public $id;
   private $socket;
 
   public function __construct(&$socket, $id)
   {
      $this->socket = $socket;
      $this->id = $id;
   }
 
   public function sendMessage($message)
   {
      socket_write($this->socket, $message."\n".chr(0));
      echo 'Wysylam wiadomosc do '.$this->id.': '.$message."\n";
   }
 
}
 
class GameServer
{
   private $master;
   private $address; 
   private $port; 
   private $maxClients;
   private $sockets = array();
   private $clients = array();
 
   public function __construct($address = '127.0.0.123', $port=14117, $maxClients = 10)
   {
      $this->address = $address;
      $this->port = $port;
      $this->maxClients = $maxClients;
 
      $this->master = socket_create(AF_INET, SOCK_STREAM, SOL_TCP);
      socket_bind($this->master, $this->address, $this->port);
      socket_listen($this->master);
      $this->sockets[] = $this -> master;
 
      while(true)
      {
         $changedSockets = $this->sockets;
         socket_select($changedSockets,$write=null,$exceptions=null,null);
 
         foreach($changedSockets as $socket)
         {
            // zmiana gniazda głównego => nowe polaczenie
            if($socket == $this->master)
            {
               $socket = socket_accept($this->master); 
 
               $this->sockets[] = $socket;
               $id = array_search($socket, $this->sockets);
                $this->clients[] = new GameClient(&$this->sockets[$id], $id);
 
            }
            // zmiana gniazda jednego z klientów
            else
            {
               $input = socket_read($socket, 1024); 
               $input = trim($input," \t\n\r");
 
               if(strlen($input)==0 || $input=='exit')
               {
                  $output = 'Bye bye!'."\n".chr(0); 
 
                  // send data to socket 
                  socket_write($socket, $output);
 
                  $id = array_search($socket, $this->sockets);
                  unset($this->sockets[$id]);
                  unset($this->clients[$id-1]);
 
                  socket_close($socket);
               }
               else
               {
                  $command = (strpos($input,' ')!==false)
                      ? substr($input,0, strpos($input,' '))
                      : $input;
 
                  switch($command)
                  {
                     case 'hello':
                        $output = 'Hello!';
                        break;
                     case 'list':
                        // identyfikatory wszystkich gniazd
                        $all = array_keys($this->sockets);
                         // identyfikator uzytkownika
                        $id = array_search($socket, $this->sockets);
                        // usuniecie ID glownego gniazda oraz gniazda uzytkownika
                        $all = array_diff($all, Array(0, $id));
 
                        if(empty($all))
                           $output='Nie ma innych osob';
                        else
                           $output='ID innych osob to: '.implode(', ',$all);
                        break;
                     default:
                        if(is_numeric($command))
                        {
                           // identyfikator uzytkownika
                           $id = array_search($socket, $this->sockets);
                           // wyslanie wiadomosci do wszystkich
                           if($command=='0')
                           {
                              foreach($this->clients as $client)
                              {
                                 // nie wysylamy do siebie
                                 if($client->id!=$id)
                                    $client->sendMessage(substr($input,strpos($input,' ')+1));
                              }
                              $output = 'Do wszystkich';
                           }
                           // nie wysylamy do siebie, uzytkownik istnieje
                           elseif($command!=$id && isset($this->sockets[$command]))
                           {
                              // jeden mniejszy ponieważ $this->master znajduje sie
                              // w tablicy gniazd a nie jest klientem
                              $this->clients[$command-1]->sendMessage(substr($input,strpos($input,' ')+1));
                              $output = 'OK';
                           }
                           else
                              $output ='Bledny ID'; 
                        }
                        else
                           $output = 'Niezrozumiale polecenie: '.$input.''; 
                  }
                  socket_write($socket, $output."\n".chr(0));
               }
            }
         }
      }
   }
 
   public function __desctruct()
   {
      socket_close($this->master); 
   }
}
 
$gameServer = new GameServer();
?>

Czas na krótką analizę. Pierwsze co rzuca się w oczy to nowa klasa GameClient. Jest to klasa, z którą wiążę pewne plany. Obiekty tej klasy przechowują dwie rzeczy — gniazdo oraz jego identyfikator. Metoda sendMessage() służy do wysyłania wiadomości do użytkownika, który jest podpięty do tego gniazda.

W klasie GameServer pojawiły się dwa nowe pola prywatne, tablica sockets przechowująca wszystkie gniazda dostępne dla serwera oraz tablicę clients przechowującą obiekty klasy GameClient.

Ogólne założenia się nie zmieniły — wciąż istnieje pętla nieskończona jednak jej zawartość została zmodyfikowana.

$changedSockets = $this->sockets;
socket_select($changedSockets,$write=null,$exceptions=null,null);

Użyliśmy tutaj funkcji socket_select(). W parametrach podajemy referencje(dlatego pierwsza linijka jest konieczna) do tablic gniazd, a funkcja pozostawia w nich jedynie te elementy, w których zaszły pewne zdarzenia. Pierwszy parametr odpowiada czy czytanie, czyli wybrane zostaną jedynie te gniazda, które coś przesyłają do serwera. Drugi i trzeci parametr odpowiadają za pisanie oraz wyjątki lecz nas one nie interesują. Ostatni parametr dotyczy limitu czasu oczekiwania na wybranie poszczególnych gniazd. Null oznacza brat limitu czasowego.

Następnie sprawdzamy każde z gniazd z tablicy $changedSockets. Jeśli gniazdo jest tym samym co gniazdo główne serwera oznacza to, że nowy użytkownik chce ustanowić połączenie. Robimy to tworząc nowe gniazdo i dopisując informacje o nim do tablic $this->sockets oraz $this->clients. W przypadku innych gniazd odczytywane są dane przesyłane do serwera.

$input = socket_read($socket, 1024); 
$input = trim($input," \t\n\r");

Używam funkcji trim() aby wyczyścić dane przychodzące do serwera z różnych niepotrzebnych białych znaków.

Pozostały kod to pseudo-protokół chatu. W przypadku przesłania komunikatu pustego lub wiadomości exit połączenie z użytkownikiem jest zrywane. Polecenie hello jest czysto demonstracyjne. W przypadku wpisania list pojawia się lista identyfikatorów innych użytkowników dostępnych aktualnie lub komunikat o ich braku. Wysyłanie komunikatów do innych użytkowników odbywa się w następujący sposób:

ID komunikat

Jeżeli ID wynosi zero wiadomość jest przesyłana do wszystkich uczestników chatu.

Serwer ten wciąż nie jest idealny. Nie zabezpiecza on przed połączeniem się zbyt dużej ilości użytkowników. Protokół również jest dosyć dziwny. W zasadzie stworzyłem go jedynie w celach edukacyjnych. Proponowałbym jego wymianę na coś przyjaźniejszego. Co warto dopisać do takiego serwera? Można spróbować uporać się z problemem pokojów dla różnych grup użytkowników. Zapewne te rzeczy opiszę niebawem na blogu lecz tymczasowo zrobię przerwę z php. Już niebawem sporo informacji na temat rysowania w obiekcie Canvas. Może zrobić jakąś fajną planszę w rzucie izometrycznym?

Sposób działania technologi AJAX

AJAX to rozwiązanie jednostronne. Klient prosi serwer o pewne informacje, a ten je wysyła użytkownikowi. Serwer nie posiada dokładnych informacji na temat ilości aktualnie połączonych użytkowników oraz nie może wysłać do żadnego z nich samodzielnie żadnej informacji(tj. może jedynie odpowiadać na ich zapytania).

Kocham robić te fajne obrazki i choć nie mają one niczego wspólnego z UML-em mam nadzieję, że jesteś w stanie je odczytywać

Przeanalizujmy przykład czatu internetowego w którym mamy trzech użytkowników(Client1, Client2, Client3). Pierwszy z nich chce wysłać informację do trzeciego. Wygląda to następująco:

• (1) Client1 pyta serwer czy są jakieś wiadomości do niego. Serwer zwraca informację o ich braku.
• (2) Client2 pyta serwer czy są jakieś wiadomości do niego. Serwer zwraca informację o ich braku.
• (3) Client3 pyta serwer czy są jakieś wiadomości do niego. Serwer zwraca informację o ich braku.
• (4) Client1 wysyła do serwera wiadomość przeznaczoną dla użytkownika Client3. Serwer zwraca informację o przyjęciu danych.
• (4,5) Serwer zapisuje wiadomość do swojego bufora(w tym przykładzie bazy danych)
• (5) Client2 pyta serwer czy są jakieś wiadomości do niego. Serwer zwraca informację o ich braku.
• (6) Client3 pyta serwer czy są jakieś wiadomości do niego.
• (6,5) Serwer odczytuje z bazy danych wiadomość oraz zwraca ją użytkownikowi.
• (7) Client1 pyta serwer czy są jakieś wiadomości do niego. Serwer zwraca informację o ich braku.
• (8) Client2 pyta serwer czy są jakieś wiadomości do niego. Serwer zwraca informację o ich braku.
• (9) Client3 pyta serwer czy są jakieś wiadomości do niego. Serwer zwraca informację o ich braku.
• (…)

Jak widać wykonywanych jest wiele niepotrzebnych zapytań. Każdy z klientów musi stale wysłać zapytanie do serwera co w przypadku małego czasu może powodować spore zużycie procesora serwera. W sytuacji, gdy czas będzie większy w grze pojawią się lagi. Jak ten problem rozwiązuje się w „normalnych“ grach internetowych? Używane są gniazda.

Jak działają gniazda

Szerokie linie oznaczają nasłuchiwanie serwera oraz klientów

Każdy z klientów musi ustanowić połączenie z serwerem. Serwer dla każdego z nich tworzy gniazdo za pomocą którego w dowolnym momencie może wysłać informację do jednego z użytkowników.

Wygląda to tak:

• (0) Client1, Client2, Client3 nawiązują połączenie z serwerem(tworzone są gniazda)
• (1) Client1 wysyła wiadomość do serwera (serwer zwraca komunikat o sukcesie)
• (2) Serwer odnajduje gniazdo trzeciego użytkownika
• (3) Serwer wysyła wiadomość do Client3

W odróżnieniu do technologi AJAX w tym przypadku nasz serwer napisany w php musi ciąglę nasłuchiwać, a więc proces tego skryptu musi być cały czas uruchomiony. W tym celu tworzy się pętlę nieskończoną, którą cięgle sprawdza stan gniazda serwera.

Pierwsza implementacja

Spróbujmy stworzyć pierwszy działający serwer. Nie będzie on pozwalał na przekazywanie danych innym użytkownikom, a połączenia nie będą utrzymywane.

<?php 
set_time_limit(0);
 
class GameServer
{
	private $master;
	private $address; 
	private $port; 
	private $maxClients;
 
	public function __construct($address = '127.0.0.1', $port=14117, $maxClients = 10)
	{
		$this->address = $address;
		$this->port = $port;
		$this->maxClients = $maxClients;
 
		$this->master = socket_create(AF_INET, SOCK_STREAM, SOL_TCP); 
		socket_bind($this->master, $this->address, $this->port);
		socket_listen($this->master); 
 
		while(true)
		{
                        // akceptujemy połączenie, tworzymy gniazdo 
			$socket = socket_accept($this->master); 
 
			// odczytujemy informacje z gniazda
			$input = socket_read($socket, 1024); 
 
			// przygotowujemy dane do wysyłki
			$output = 'Wyslales do serwera: '.$input.chr(0); 
 
			// Wysyłamy dane użytkownikowi
			socket_write($socket, $output);
 
                        // zamykamy połączenie z użytkownikiem
			socket_close($socket); 
		}
	}
 
	public function __desctruct()
	{
		// zamknięcie głównego gniazda
		socket_close($this->master); 
	}
}
 
$gameServer = new GameServer();
?>

Tworzymy obiekt $gameServer. W konstruktorze możemy podać kilka parametrów: adres i port pod jakim serwer będzie nasłuchiwał oraz maksymalną ilość użytkowników(ta zmienna nie jest używana w tym przykładzie lecz przyda się później).

Kilka słów o numeracji portów

W przypadku IP w wersji czwartej do dyspozycji mamy 2¹⁶ portów. Te o numerach poniżej 1024 wymagają uprawnień administracyjnych. W większości przypadków są one już zarezerwowane dla innych usług(np. 80 dla http, 23 dla ftp, 21 dla telnet itd.). Najwygodniej jest po prostu ich nie ruszać.

Do zmiennej $this->master zapisywane jest główne gniazdo serwera tworzone za pomocą socket_create(). To ono będzie odbierało wszystkie informacje przychodzące od innych użytkowników. Co oznaczają parametry wewnątrz?

• Pierwszy informuje jaka rodzina protokołów będzie używana w przypadku naszego gniazda. AF_INET określa, że będą to protokoły(TCP oraz UDP) w oparciu o IPv4. Możemy również poinformować o użyciu IPv6 zamieniając ten parametr na AF_INET6.
• Drugi parametr określa rodzaj transmisji. Do wyboru mamy:
  • SOCK_STREAM — informacje przesyłane są w obu kierunkach jednocześnie, bez spadku transferu, sekwencyjnie oraz niezawodnie za pomocą strumieni bajtów. Bazowym protokołem jest TCP.
  • SOCK_DGRAM — datagramowy protokół bezpołączeniowy z brakiem kontroli przepływu i retransmisji. Bazowym protokołem jest UDP(To jest dobry wybór w przypadku pisania gry internetowej!).
  • SOCK_SEQPACKET — informacje przesyłane są w obu kierunkach jednocześnie, bez spadku transferu, sekwencyjnie. Od klienta wymagane jest aby odczytywane były całe pakiety przy każdym zapytaniu.
  • SOCK_RAW — gniazdo RAW czyli bezpośredni do niego dostęp. Umożliwia to stworzenie własnego protokołu komunikacji. Opcja raczej dla zaawansowanych użytkowników.
  • SOCK_RDM — niezawodna transmisja pakietów nie gwarantująca porządkowania pakietów. Ta opcja nie zadziała w wielu systemach operacyjnych. Raczej dla zaawansowanych użytkowników.
• Ostatni parametr to po prostu ID protokołu. W przypadku TCP oraz UDP możemy skorzystać ze stałych SOL_TCP(6) oraz SOL_UDP(17). Pełną listę identyfikatorów znajdziesz w /etc/protocols

W naszym przykładzie stworzyliśmy gniazdo wykorzystujące protokół TCP. W kolejnej lini informujemy nasze gniazdo pod jakim adresem i jaki port ma nasłuchiwać. Gdy to określimy uruchamiamy nasłuchiwanie.

Ten proces jest bardzo prosty. Stworzona została pętla nieskończona, która przy każdym obrocie akceptuje gniazdo przychodzące. następnie odczytuje z niego dane, odsyła je do użytkownika oraz zamyka połączenie. Serwer uruchomiony raz będzie działał w nieskończoność(prawie w nieskończoność ) więc ważne jest aby wyłączyć sprawdzanie czasu wykonywania się skryptu. W tym celu w pierwszej linijce kodu widnieje wywołanie funkcji set_time_limit()

Testujemy serwer

Uruchom konsolę z dwoma zakładkami. Aby uruchomić nasz serwer w pierwszej wpisz:

php server.php

W drugiej spróbujmy aktywował połączenie

hellson@hellson:~> telnet 127.0.0.1 14117
Trying 127.0.0.1...
Connected to 127.0.0.1.
Escape character is '^]'.
Hello
Wyslales do serwera: Hello
Connection closed by foreign host.
hellson@hellson:~>

W przypadku zamknięcia skryptu wykonany zostanie destruktor zamykający gniazdo główne.

Mam nadzieję, że ten artykuł ułatwił ci zrozumienie idei gniazd. Już jutro kontynuacja tematu. Ulepszę kod serwera tak aby odbierał informacje od różnych użytkowników jednocześnie. Połączenie będzie utrzymywane aż do momentu wpisania „exit“ przez użytkownika.

Fallout 2 to zdecydowanie w dalszym ciągu jedno z moich głównych źródeł inspiracji. Dlaczego teraz nikt nie robi takich gier? Muzyka z tej legendarnej produkcji została udostępniona w całości za darmo przez Aural Network — Firmę, w której aktualnie pracuje Mark Morgan. Oczywiście licencja obejmuje jedynie użycie niekomercjalne.

http://auralnetwork.com/releases

UWAGA: Tymczasowo(zapewne pod wpływem Wykop.pl) możliwość pobierania została wstrzymana. Utwory dostępne do przesłuchania za pomocą odtwarzaczy flashowych można pobrać z http://auralnetwork.com/wp-content/uploads/2010/02/

Dlaczego nie Flash?

Po pierwsze, jest to zamknięta technologia, która moim zdaniem prędzej czy później umrze śmiercią naturalną. Podobno Microsoft już zadeklarował, że nie będzie jej więcej wspierał. Po drugie, wydajność pozostawia wiele do życzenia. Po trzecie, problemem jest przechwytywanie zdarzeń myszki, która opuściła obszar obiektu flash. Tworzenie całej strony za pomocą jednego obiektu flash mija się z celem. Po czwarte, nie stać mnie aby sobie zakupić flasha. Co więcej, nie jestem pewien, czy Wine pozwoliłby mi go uruchomić pod moim linuksem.

Więcej o grze

Założenia są kosmiczne tj. gra odbywała się będzie w kosmosie, będzie możliwość podróżowania na mapie i walki z innymi graczami w czasie rzeczywistym. Chcę również wprowadzić rozwój technologiczny oraz jednostki komputera. Wymagane będzie całkiem niezłe łącze, nowoczesna przeglądarka oraz w miarę szybki procesor. Sam nie wiem, o czym będzie ta gra. Nie znam się na pisaniu scenariuszy, fabuły itp. Chcę po prostu posprawdzać i poćwiczyć użycie kilku fajnych technologii. Reszta myślę, że przyjdzie sama(tj. ktoś do pomocy).

Aby to nie brzmiało jak rzucanie słów na wiatr, podrzucam kilka moich planet zrobionych w GIMP-ie oraz pierwszą wersję mapy:

• Planeta A
• Planeta B
• Mapa

Jeśli masz ciekawe pomysły pisz do mnie(michal.srodek na gmailu). Już jutro artykuł na temat dalszych postępów zawierający trochę informacji technicznych.

• C&C: Timberian Sun + Firestorm
• C&C: Red Alert
• C&C: Timberian Dawn

Sądząc po testach na winehq.org powinny działać całkiem sprawnie pod Linuksem. Wszystkie są dostępne pod adresem: http://www.commandandconquer.com/classic

Gry te przypominają mi moje dzieciństwo — czasy gdy za grę(C&C: Red Alert) u pirata(jedyna osoba w mieście posiadająca przegrywarkę) płaciło się 30zł, a wypożyczenie gry na jeden dzień do Pegasusa 5-10zł(w zależności od jakości gry).

Zakupiłem ostatnio Commandos Ultimate Anthology. Jedyne 30zł, a gry ją naprawdę świetne. Szkoda, że te współczesne nie podobają mi się tak, jak te stare. Czy twórcy dążą do ulepszeń graficznych kosztem grywalności, czy to może efekt działania Commodore 64 na mój mózg gdy byłem mniejszy?