Заявка на участие в семинаре

Все поля обязательные для заполнения
Как к Вам обращаться
Email
Телефон
Семинар
Комментарий
отправить
закрыть

Как мы разрабатываем игры

Уральская академия современных информационных технологий Как мы разрабатываем игры
Дата публикации: 19.01.2015 13:28:28
Автор статьи: Андрейчиков Юрий, программист отдела разработки УрАИТ


Проект gameural.ru. Особенности построения игрового поля

При построении поля используются все доступные нам технологии - HTML для верстки, CSS - для оформления, php MySQL - для хранения состояний и генерации HTML, и конечно же немного JavaScript для анимирования результата работы предыдущих технологий. 
Давайте разберем более подробно:

1. HTML CSS 

Неслучайно, я объединил эти технологии в одном пункте, так как сама верстка - это основа и без нее дальше дело не пойдет, но без CSS ничего не получится, а в данном случае стили создают весь эффект "игрового поля".

Идея "игрового поля" была взята из excel. Как Вы знаете, упрощенно можно представить это в виде некой разлинованной на ячейки области (прямо таблица, созданная тегом table), причем, видимой является лишь часть области, а для навигации по всему видимому полю используется прокрутка.

Таким образом, нужно создать ячейки, поместить их в контейнер и как то организовать просмотр всей площади, занимаемой контейнером. Выбирать в качестве ячеек таблицу - нецелесообразно, во-первых структура сложная (у нас ведь ячейки раскрашиваются в разные цвета и объединяются визуально и могут содержать еще какие-то объекты внутри себя), во-вторых такая конструкция, при длинном "игровом поле" будет занимать существенный объем кода, что отражается в том, что веб страница весит много и браузер долго рендерит страницу, чтобы показать ее нам. Поэтому в качестве ячеек были выбраны контейнеры div с абсолютным позиционированием.

<div style="position: absolute; top: [?]px; left: [?]px;" ></div>

Закономерный вопрос, а как определять что будет записано вместо [?] для позиционирования контейнеров? Для это нам понадобится php!

2. php MySQL 

Поскольку сформировать поле вручную представляется нереальной задачей, представьте если блоков хотя бы 100, а если 1000?

Да и в любом случае блоки нужно было генерировать автоматически, поэтому делаем это при помощи php.

Генерация блоков происходит при помощи цикла, с определенными условиями, в зависимости от которых выбирается оформление стилями CSS, а так же положение блоков, то есть наши искомые top и left.

В базе данных MySQL хранится состояние поля, т.е. какие клетки и как закрашивать, сколько вообще клеток поля генерировать, а так же положение видимой части поля.

Для того, чтобы было комфортно наблюдать за "игровым полем", все наши ячейки помещаем в контейнер, который так же абсолютно позиционирован, но при этом у него по умолчанию позиция всегда top: 0px; left 0px изменяется только позиция left, на момент загрузки страницы она рассчитывается из данных MySQL, а при управлении полем вручную, это стрелки "вперед" и "назад", так функция JavaScript для движения "вперед" выглядит так:

function moveFieldForth(){ 
   var currDisplacement = $("#coordBack").val(); 
   currDisplacement = currDisplacement*1; 
   currDisplacement -= 189; 
   $("#field").animate({"left": "-=189px"}, "slow"); 
   $("#coordBack").val(currDisplacement); 
}

, где currDisplacement - текущая координата, собственно смещение left, currDisplacement -= 189; - мы за один шаг смещаем поле на 189 пикселей, $("#field").animate({"left": "-=189px"}, "slow"); - выполняем изменение положения поля, используя анимацию jQuery, $("#coordBack").val(currDisplacement); - пишем текущее состояние координаты в input с типом hidden. 


И, конечно, чтобы абсолютно позиционируемый блок, который мы "двигаем", показывался только как часть поля, его мы помещаем в блок, у которого задано свойство CSS overflow: hidden и какие-то размеры по ширине и высоте, определенные дизайном проекта. Тогда наше поле не вписывающееся в размеры "окна" не будет видно на странице. 

В принципе, не умея использовать JavaScript можно было бы оформить поле просто задав свойство overflow как scroll, но выглядит такое решение менее эстетично.

Маленькая хитрость: если посмотреть внимательно код проекта, то можно заметить, что нераскрашенные клетки, на самом деле не имеют видимого оформления. Клечатая "подложка" создана за счет бэкграунда блока в котором находятся клетки "игрового поля".

Адрес сайта проекта: http://gameural.ru

Если Вас заинтересовала данная статья и Вы бы хотели научиться делать проекты такого уровня, то приглашаем Вас на наши курсы, которые будет вести Андрейчиков Юрий Сергеевич, сертифицированный программист 1с-битрикс.



Назад в раздел