Growing Crystals vol 4. картинка на клиенте и запросы к серверу

Сегодня мы продолжим наши эпические разработки игры Growing Crystals.

Вчера весь день я слушал лекции по JavaScript из курса Hexlet что не плохо помогло разобраться с азами программирования в JavaScript, всё это я закрепил просмотрев objectplayground.com. Также дополнительно удалось прочесть несколько статей про AJAX, JSON и JQuery.

Самое главное — удалось получить ценные советы и разъяснения от товарища. Общение и взгляд со стороны очень важны в таких проектах, особенно когда их ведёт человек с 0м опытом. Товарищ дал много полезной информации и объективную критику уже проведенной работы.

Прошу прощения за сумбурную 3ю часть, было много вопросов и недостаточный багаж знаний для того, чтобы сразу за всё взяться, поэтому получилось и обо всём и ни о чём, куча нелепых выводов и допущений.

Какие ключевые фразы были услышаны от товарища:

В данном проекте необходима реализация протокола обмена при котором сервер может обратиться к клиенту
Нужно прочесть опыт других в habrahabr
Для обмена использовать JSON
Использовать IDE, например WebStorm
Использовать библиотеку jQuery считается не очень хорошим тоном

Ответы на вопросы которые были заданы:
— Почему если задача проверить игровую механику, ты взялся за графику а не просто сделал модель?
— Т.к. гораздо труднее привлечь пользователей к проекту, у которого нет графики. А количество добровольцев на тестирование для этого проекта играет ключевую роль.

— Что такое игровая механика в данном случае?
— Термин игровая механика имеет много значений, но в данном проекте этим термином называю модель поведения игры, которая будет уточняться и развиваться в процессе реализации проекта.

— Дать краткое пояснение о том, что за игра Crystal Rain?
— Игра Crystal Rain представляет собой free-to-play ММО аркаду дополненной реальности. Подробнее.

— Дать больше информации и планах и первом релизе.
— Первый релиз Growing Crystal должен произойти через неделю после начала работ, т.е. в пятницу 02 мая 2014. В пером релизе должно быть реализовано перемещение игрока по игровому миру, а также выполнение определенного простого задания, например, сбор 1000 кристаллов на скорость. Исходя из успешности первого релиза и будет принято решение о дальнейшем развитии проекта.

Всё таки HTML5+Canvas

Ознакомившись с достаточным объёмом документации было принято решение использовать Canvas, а не громоздить кучу div-ов с gif-ами, как было популярно в 2007 году. Хорошие статьи по Canvas. Оказалось не так сложно инициализировать канву и расположить на ней игровое поле, построенное из клеток.
Далее пример кода JavaScript.

// ============================================================= 
//           ===== CANVAS =====
//     ===== simple Growing Crystals screen output ====
// script written by Petukhovsky - 2014.04.29
// https://petukhovsky.com
// ============================================================= 
 
"use strict"; //All my JavaScript written in Strict Mode http://ecma262-5.com/ELS5_HTML.htm#Annex_C
 
(function () { 
	// ======== private vars ======== 
    var map;
    var img;
    var container, ctx;

    var offsx = 200;	//Смещение X к макушке ромба игрого поля
    var offsy = 20;	//Смещение y к макушке ромба игрого поля

    var cellsizex = 62; 
    var cellsizexhalf = 31; //Деление в ручную сделано чтобы избежать дробных результатов и antialising
    var cellsizey = 31;
    var cellsizeyhalf = 15; //Деление в ручную сделано чтобы избежать дробных результатов и antialising

    var mapsizex = 5;	//Размер X отображаемого игрового поля
    var mapsizey = 5;	//Размер Y отображаемого игрового поля

    // --- functions ---
    var init;

	////////////////////////////////////////////////////////////////////////////
    var init = function () {
        // ---- init script ----
        container = document.getElementById("canvas-gc-0");
        container.width  = 400;
        container.height = 200;
        ctx = container.getContext("2d");

        img = new Image();	// Создание нового объекта изображения
        img.src = 'cell.png';	// Путь к изображению клетки
        img.onload = function() {    // Событие onLoad, ждём момента пока загрузится изображение


            for (var x = 0; x < mapsizex; x ++)
                for (var y = 0; y < mapsizey; y ++) {
                    ctx.drawImage(img, offsx - cellsizexhalf - cellsizexhalf*y + cellsizexhalf*x -x+y,
                                       offsy + y*cellsizeyhalf + cellsizeyhalf*x);  // Рисуем сетку из клеток
                }

        }

    };

	return {
		//////////////////////////////////////////////////////////////////////////// 
		// ---- onload event ---- 
		load : function () { 
			window.addEventListener('load', function () { 
				init(); 
			}, false); 
		} 
	} 
})().load();

Описанный выше код JavaScript обращается к canvas по id. Далее, для избавления от нагромождения кода в статье, код JavaScript будет представлен ссылками.

<canvas id="canvas-gc-0" class="canvasdemo"> 
    HTML5 CANVAS
</canvas>

В результате выполнения кода JavaScript получаем

Ось X расположена вдоль прямой WS, и ось Y вдоль NE соответственно.
Когда нам удалось построить сетку (игровое поле), перейдём к отображению на ней массива объектов. Для удобства загрузки и использования, все изображения объектов были сохранены в один файл формата png.

objects.png – объекты игрового мира

В уже существующий код вывода игрового поля достаточно лишь добавить, чтобы на месте элемента с координатами x,y выводилась не пустая клетка а объект из матрицы игрового поля.
Например, выведем матрицу игрового поля:

        map = [
            [0, 1, 2, 3, 4],
            [0, 0, 0, 0, 0],
            [4, 0, 1, 3, 0],
            [5, 3, 3, 3, 0],
            [5, 0, 0, 5, 0]
        ];

Числа обозначают номер объекта в файле формата png, 0 – клетка, 1 – персонаж и так далее.

В результате выполнения кода JavaScript получаем:

Теперь, когда мы умеем выводить матрицу игрового поля на клиенте, нам нужно научиться запрашивать данные о состоянии игрового мира у сервера без перезагрузки страницы. Для этого будет применена технология AJAX с передачей данных в формате JSON.

Долго выбирать технологию для сервера и СУБД не пришлось, хотя и стоял вопрос выбора между PHP и Node.js и между MySQL и PostgreSQL, но т.к. у меня уже имеется хостинг для WordPress на PHP и MySQL, то в качестве серверного и СУБД ПО было принято решение использовать именно их. В случае необходимости расширения проекта, аренда сервера и перенос небольшого проекта, даже смена СУБД решается за несколько дней.

Я написал простой php-скрипт ask.php, генерирующий карту игрового мира размером 5×5. Также он сохраняет в файле количество обращений к серверу и передаёт информацию на клиент в формате JSON.

<?php
$count = 0;
$msg = "";
$map = null;

//Если файл количества обращений уже есть
if(file_exists("askcounter.txt")){
  $file = fopen("askcounter.txt","r");
  if(!file)
        $msg = "Ошибка открытия файла";
    else
    {
      $str = fgets($file); //Считывание строки с числом
      $int = (int) $str; //Преобразование в число
      $count = $int+1;
    }
}

$file = fopen("askcounter.txt","w");
fputs($file, $count."\r\n"); //Сохраняем значение счётчика
fclose($file);


function generate_random_map(&$_map, $_map_size_x=5, $_map_size_y=5, $_max_val=5){ //& перед массивом обязательно
    for ($i=0; $i<$_map_size_x; $i++){
        for ($j=0; $j<$_map_size_y; $j++){
            $_map[$i][$j] = rand(0,$_max_val); //Заполняем карту случайными числами от 0 до 5
        }

//var_dump($_map);
}
}

function output_map(&$_map){
    for ($i=0; $i<count($_map); $i++){
    echo "[";
        for ($j=0; $j<count($_map[$i])-1; $j++){
           echo $_map[$i][$j].", ";
        }
		echo $_map[$i][count($_map[$i])-1]."]";
		if($i != count($_map)-1) echo ",";
}
}


if($msg == "") $msg = "Количество обращений к серверу: ".$count; //Если ошибок не найдено, формируем сообщение
?>
{
cggame:
{
map:
[
<?php
generate_random_map($map);
output_map($map);
?>
],
msg:"<?=$msg?>"
}
}

В результате код JavaScript на клиенте и php код на сервере реализуют технологию клиент-сервер, в которой клиент запрашивает у сервера карту игрового мира и затем выводит её, также на клиенте выводится и количество обращений к серверу за всё время. Нажмите клавишу GET FROM SERVER, и вы увидите что каждый раз перед вами предстанет случайная игровая ситуация. Чёрный фон используется для разнообразия.

Количество обращений к серверу пока не известно.

Инструменты которые нужно запомнить

jsfiddle.net — сервис он-лайн просмотра и эмуляции JavaScript.

Play Canvas — платформа разработки и публикации игр при помощи Canvas, также выполняет роль комьюнити для разработчиков.

Советы друга

Что из советов друга было применено (зачёркнуто):

В данном проекте необходима реализация протокола обмена при котором сервер может обратиться к клиенту
Нужно прочесть опыт других в habrahabr
~~Для обмена использовать JSON~~
~~Использовать IDE, например WebStorm~~
~~Использовать библиотеку jQuery считается не очень хорошим тоном~~

Идеи в goods box

После первого релиза завести аккаунт на habrahabr.

Идеи в trash box

На всех объектах принадлежащих игроку горит дополнительная голубая лампочка;
Если у игрока нету топлива, что его авиасёрф перестаёт работать и садится на землю, а в обычном режиме он слегка покачивается в воздухе и работают 4 реактивных двигателя по краям авиасёрфа;
Если на складе что-то есть, то у него мигает индикатор;
Апгрейды защитных башень;
Взрывающиеся при разрушении склады;
Артефакт увеличивающий скорость перемещения игрока;
Артефакт увеличивающий радиус действия игрока;
Предмет, который можно бросить на несколько экранов, чтобы посмотреть что там происходит;
Мины;
Кузница опыта, производящая специальное вещество, получаемое из сжигания кристаллов и необходимое для получения звания;
Звание — это предмет в инвентаре.
Объект карты — ограждение;
Объекты, расползающиеся по карте;
Декоративные мегаобъекты;
Наличие сверхдорогих объектов с особыми свойствами;
Список друзей, чтобы на них не действовала защитная башня;
Общие склады для друзей;
Шаринг в социальных сетях.

Краткий итог: В качестве технологии реализации клиента выбран HTML+CSS+JavaScript, canvas оказался простым понятным и удобным. Реализовано отображение матрицы игрового мира в окне браузера. Отработан простой запрос к серверу, получая ответ на который мы выводим полученную карту игрового мира.

Сводка

Начало: 25 апреля 2014 года.
Команда: 1 человек.
Израсходовано: 18+6+10 = 34 чч.
Средняя производительность: 34/5 = 6,8 чч/день

Описание игрового процесса

30/100

Расчет баланса

5/100

Игровая графика

10/100

Веб-клиент

8/100

Игровой сервер

8/100

ИТОГО

61/500

Продолжение: Growing Crystals vol 5. сервер и место случайности в игровом процессе