[Из песочницы] Создание игр без Canvas12.03.2015 17:20

Однажды мне попалась на глаза карточная игра HeartStone от Blizzard. Играя в нее пришла мысль, что подобные вещи можно создавать используя технологии html5, что позволит им быть кроссплатфорсенными. На мой взгляд, подобные вещи могут делать люди, до сих пор занимающиеся только созданием сайтов.Итак, что мы имеем:

Выделенный сервер с LAMP (без phpDaemon); Желание обкатать WebSockets. Собственно, все. Этого вполне хватит, чтобы осуществить задуманное.Для данного примера я использовал готовый WebSockets сервер, написанный на php.

Обмениваться с сервером будем данными в формате json, чтобы передавать имена методов и аргументы.

Самое основное, что нам необходимо — это наладить вменяемое взаимодействие клиента и сервера, то есть тот интерфейс, благодаря которому наше приложение (в данном случае игру) можно будет расширять.

В клиенте это будет выглядеть следующим образом:

var socketInfo = {}; socket = new WebSocket ('ws://localhost:8000'); socket.onopen = function (e){ socketInfo.method = «connect»; socket.send (JSON.stringify (socketInfo)); console.log ('Соединение установлено с ws://localhost:8000'); } socket.onclose = function (e){ console.log ('Соединение прервано!'); } socket.onmessage = function (e){ if (typeof e.data === «string»){ var request = JSON.parse (e.data); Actions[request.function](request.args); }; } Это стандартное описание функций WebSockets. Остановим внимание на методе onmessage.В качестве параметра он принимает строку в формате json, которую нам отправил сервер. Строка содержит название имя функции, которое необходимо выполнить на клиенте, а также параметры, которые мы будем в нее передавать.

Для того, чтобы запустить функцию, имя которой содержит некая переменная, эта функция должна являться элементом массива (как вариант — глобальный массив window). В данном примере это массив Actions:

var Actions = { myId: function (id){ localStorage.setItem («myId», id); }, log: function (str){ console.log (str); }, … }

Естественно, передаем на сервер тоже строку в json формате. У меня она содержит два поля: имя метода и аргумент.Аналогичным образом сервер разбирает полученную строку: function websocket_onmessage ($keyINsock, $str){ global $Users;

$json = json_decode ($str); $method = strval ($json→{'method'}); $args = $json→{'args'};

if (! isset ($args)) $args = $keyINsock; if (! empty ($method)) $Users→$method ($keyINsock, $args); }

Функция websocket_onmessage обрабатывает запросы на наш сервер, в качестве аргумента принимая ID соединения и передаваемую строку соответственно. Далее идет работа с объектом класса Users.

Поясню на примере соединения игроков:

public function frAccept ($myid, $opId){ $this→opponents[$myid] = $opId; $this→opponents[$opId] = $myid; $args = array ($myid, $opId); $arrOut = array ('function' => 'frAccept', 'args' => $args); $arrOutJSON = json_encode ($arrOut); websock_send ($opId, $arrOutJSON); websock_send ($myid, $arrOutJSON); } В каждом методе первый параметр — идентификатор соединения, по которому пришел запрос, имено поэтому он и называется $myId. В примере описан метод соединения двух игроков (второй параметр — id игрока, который принял приглашение в сражение). Для простоты я не использую базы данных, поэтому заносим айдишники опоонентов в массив для дальнейшей работы с ними (они хранятся и в клиенте в LocalStorage, но зачем гонять их туда-сюда).Все, кто чей оппонент записали, отдаем эту информацию обоим игрокам.

frAccept: function (id){ fight_start (id); console.log ('Fight starting'); }

… function fight_start (ids){ $('body').load ('fight.html'); curplayer = ids[0]; localStorage.setItem («opponent», ids[0]); if (ids[0] == localStorage.getItem («myId»)) localStorage.setItem («opponent», ids[1]); }

Переменная curplayer хранит данные о том, чей сейчас ход.Вся игра у нас построена на обычных блоках div.

Имея такой каркас, начинаем работать с элементами игры.

Для начала получим по 4 начальных карты. Как это сделать? Четырежды попросим сервер: «дай карту». Я упростил эту операцию, добавив в качестве аргумента желаемое число карт: get_cards (4);

function get_cards (num){ socketInfo.method = «get_cards»; socketInfo.args = num; socket.send (JSON.stringify (socketInfo)); } Мы уже разобрались, что сервер разбирает полученную json строку на имя метода и аргумент. В результате мы задействуем метод get_cards: public function get_cards ($myid, $num){ global $Cards; for ($i=0; $i < $num; $i++){ $card = $Cards->getRandom (); $args = array ( «player_id» => $myid, «card» => $card ); $arrOut = array ('function' => 'player_get_card', 'args' => $args); $arrOutJSON = json_encode ($arrOut); websock_send ($myid, $arrOutJSON); websock_send ($this→opponents[$myid], $arrOutJSON); } }

В цикле запрашиваем случайную карту из колоды, ($Cards→getRandom () возвращает json представление карты: имя, атака, количество жизней, картинка) и отправляем результат обоим игрокам. Не забываем про оппонента, он должен видеть, что мы взяли карту.Кто из игроков взял текущую карту определяем сравнением айдишников:

player_get_card: function (args){ if (! me (args.player_id)) { $('#opHand').append ('