Реализация формата "Сапер"

3.11.2018 на домене chita.en.cx была проведена игра "Сапер". В этой статье опишу механику "сапера" в данной игре.

Игра на движке схватки, последовательность штурмовая. В игре использовалось поле 10х10 клеток, в них скрыто 14 бомб. Поле "сапера" для удобства промаркировано как в "морском бое" (А1, А2, ... ..., К9, К10).

Принцип игры - необходимо открыть все клетки "не бомбы". За каждую открытую бомбу - штраф 25 минут. За каждую неоткрытую "не бомбу" после закрытия уровня - штраф 20 минут. 

В поле было расписано 70 "точечных" кодов (по одному коду на адрес, без меток, локализация указывается в штабном уровне) и 30 "схваточных" (3 локации по 10 кодов, в штабном уровне указывается только адрес локации, метки с номером кода вида ENА3 ... ENК3). Все коды начинаются с номера ячейки (например: а1гармол).

В CSS, помимо стилей для сапера, были добавлены некоторые "эксперементы" с внешним видом движка - некоторым игрокам они не понравились. 

Внешний вид движка "с экспериментами":

В игре было 3 уровня - 1 штабной, 2 минное поле и 3 закрывашка.

Уровень "Штаб"

В штабном уровне в задании указывается информация об игре и подключается "эксперементальная" css (не обязательно). 

Подключение "эксперементальной" css:

<link rel="stylesheet" type="text/css" href="http://d1.endata.cx/data/games/63238/saper1.css" />

В случае использования "эксперементальной" CSS, тело отображаемых заданий, подсказок и бонусов нужно помещать в следующие тэги:

<div class="preview_wrapper">
<div class="preview block">

</div>
</div>

В бонусах этого уровня - штабные задания, в подсказках к ним - адреса и локализация полевых. Бонусы пронумерованы в соответствии с нумерацией клеток "сапера" (А1, Б1, ... , И10, К10). Бонусы доступны только на этом уровне.

Так же в штабном уровне выставлена подсказка (через 2 часа) со сливом адресов и локализаций всех полевых локаций. Практика показала, что при такой конфигурации поля "сапера", подсказку можно дать позже на 30-40 минут.

Уровень "Минное поле"

В этом уровне реализовано отображение игрового поля. Полевые коды вбиваются в этом уровне (в бонусах).

Внешний вид уровня:

В этом уровне в теле задания подключается отдельная таблица стилей:

<link rel="stylesheet" type="text/css" href="http://d1.endata.cx/data/games/63238/saper.css" />

Также в теле задания создается табличка игрового поля:

<center>
<div class="preview_wrapper">
<div class="preview block">
<div class="saperlayer">
<table id="sapertable">
<tr id="saperheader">
<td id="saperconer" class="sapertoptitle"></td>
<td class="sapertoptitle">А</td>
<td class="sapertoptitle">Б</td>
<td class="sapertoptitle">В</td>
<td class="sapertoptitle">Г</td>
<td class="sapertoptitle">Д</td>
<td class="sapertoptitle">Е</td>
<td class="sapertoptitle">Ж</td>
<td class="sapertoptitle">З</td>
<td class="sapertoptitle">И</td>
<td class="sapertoptitle">К</td>
</tr>
<tr id="saprow1" class="saperrow">
<td class="saperlefttitle">1</td>
<td id="sapr1c1" class="saperclosedcell"></td>
<td id="sapr1c2" class="saperclosedcell"></td>
<td id="sapr1c3" class="saperclosedcell"></td>
<td id="sapr1c4" class="saperclosedcell"></td>
<td id="sapr1c5" class="saperclosedcell"></td>
<td id="sapr1c6" class="saperclosedcell"></td>
<td id="sapr1c7" class="saperclosedcell"></td>
<td id="sapr1c8" class="saperclosedcell"></td>
<td id="sapr1c9" class="saperclosedcell"></td>
<td id="sapr1c10" class="saperclosedcell"></td>
</tr>
<tr id="saprow2" class="saperrow">
<td class="saperlefttitle">2</td>
<td id="sapr2c1" class="saperclosedcell"></td>
<td id="sapr2c2" class="saperclosedcell"></td>
<td id="sapr2c3" class="saperclosedcell"></td>
<td id="sapr2c4" class="saperclosedcell"></td>
<td id="sapr2c5" class="saperclosedcell"></td>
<td id="sapr2c6" class="saperclosedcell"></td>
<td id="sapr2c7" class="saperclosedcell"></td>
<td id="sapr2c8" class="saperclosedcell"></td>
<td id="sapr2c9" class="saperclosedcell"></td>
<td id="sapr2c10" class="saperclosedcell"></td>
</tr>
<tr id="saprow3" class="saperrow">
<td class="saperlefttitle">3</td>
<td id="sapr3c1" class="saperclosedcell"></td>
<td id="sapr3c2" class="saperclosedcell"></td>
<td id="sapr3c3" class="saperclosedcell"></td>
<td id="sapr3c4" class="saperclosedcell"></td>
<td id="sapr3c5" class="saperclosedcell"></td>
<td id="sapr3c6" class="saperclosedcell"></td>
<td id="sapr3c7" class="saperclosedcell"></td>
<td id="sapr3c8" class="saperclosedcell"></td>
<td id="sapr3c9" class="saperclosedcell"></td>
<td id="sapr3c10" class="saperclosedcell"></td>
</tr>
<tr id="saprow4" class="saperrow">
<td class="saperlefttitle">4</td>
<td id="sapr4c1" class="saperclosedcell"></td>
<td id="sapr4c2" class="saperclosedcell"></td>
<td id="sapr4c3" class="saperclosedcell"></td>
<td id="sapr4c4" class="saperclosedcell"></td>
<td id="sapr4c5" class="saperclosedcell"></td>
<td id="sapr4c6" class="saperclosedcell"></td>
<td id="sapr4c7" class="saperclosedcell"></td>
<td id="sapr4c8" class="saperclosedcell"></td>
<td id="sapr4c9" class="saperclosedcell"></td>
<td id="sapr4c10" class="saperclosedcell"></td>
</tr>
<tr id="saprow5" class="saperrow">
<td class="saperlefttitle">5</td>
<td id="sapr5c1" class="saperclosedcell"></td>
<td id="sapr5c2" class="saperclosedcell"></td>
<td id="sapr5c3" class="saperclosedcell"></td>
<td id="sapr5c4" class="saperclosedcell"></td>
<td id="sapr5c5" class="saperclosedcell"></td>
<td id="sapr5c6" class="saperclosedcell"></td>
<td id="sapr5c7" class="saperclosedcell"></td>
<td id="sapr5c8" class="saperclosedcell"></td>
<td id="sapr5c9" class="saperclosedcell"></td>
<td id="sapr5c10" class="saperclosedcell"></td>
</tr>
<tr id="saprow6" class="saperrow">
<td class="saperlefttitle">6</td>
<td id="sapr6c1" class="saperclosedcell"></td>
<td id="sapr6c2" class="saperclosedcell"></td>
<td id="sapr6c3" class="saperclosedcell"></td>
<td id="sapr6c4" class="saperclosedcell"></td>
<td id="sapr6c5" class="saperclosedcell"></td>
<td id="sapr6c6" class="saperclosedcell"></td>
<td id="sapr6c7" class="saperclosedcell"></td>
<td id="sapr6c8" class="saperclosedcell"></td>
<td id="sapr6c9" class="saperclosedcell"></td>
<td id="sapr6c10" class="saperclosedcell"></td>
</tr>
<tr id="saprow7" class="saperrow">
<td class="saperlefttitle">7</td>
<td id="sapr7c1" class="saperclosedcell"></td>
<td id="sapr7c2" class="saperclosedcell"></td>
<td id="sapr7c3" class="saperclosedcell"></td>
<td id="sapr7c4" class="saperclosedcell"></td>
<td id="sapr7c5" class="saperclosedcell"></td>
<td id="sapr7c6" class="saperclosedcell"></td>
<td id="sapr7c7" class="saperclosedcell"></td>
<td id="sapr7c8" class="saperclosedcell"></td>
<td id="sapr7c9" class="saperclosedcell"></td>
<td id="sapr7c10" class="saperclosedcell"></td>
</tr>
<tr id="saprow8" class="saperrow">
<td class="saperlefttitle">8</td>
<td id="sapr8c1" class="saperclosedcell"></td>
<td id="sapr8c2" class="saperclosedcell"></td>
<td id="sapr8c3" class="saperclosedcell"></td>
<td id="sapr8c4" class="saperclosedcell"></td>
<td id="sapr8c5" class="saperclosedcell"></td>
<td id="sapr8c6" class="saperclosedcell"></td>
<td id="sapr8c7" class="saperclosedcell"></td>
<td id="sapr8c8" class="saperclosedcell"></td>
<td id="sapr8c9" class="saperclosedcell"></td>
<td id="sapr8c10" class="saperclosedcell"></td>
</tr>
<tr id="saprow9" class="saperrow">
<td class="saperlefttitle">9</td>
<td id="sapr9c1" class="saperclosedcell"></td>
<td id="sapr9c2" class="saperclosedcell"></td>
<td id="sapr9c3" class="saperclosedcell"></td>
<td id="sapr9c4" class="saperclosedcell"></td>
<td id="sapr9c5" class="saperclosedcell"></td>
<td id="sapr9c6" class="saperclosedcell"></td>
<td id="sapr9c7" class="saperclosedcell"></td>
<td id="sapr9c8" class="saperclosedcell"></td>
<td id="sapr9c9" class="saperclosedcell"></td>
<td id="sapr9c10" class="saperclosedcell"></td>
</tr>
<tr id="saprow10" class="saperrow">
<td class="saperlefttitle">10</td>
<td id="sapr10c1" class="saperclosedcell"></td>
<td id="sapr10c2" class="saperclosedcell"></td>
<td id="sapr10c3" class="saperclosedcell"></td>
<td id="sapr10c4" class="saperclosedcell"></td>
<td id="sapr10c5" class="saperclosedcell"></td>
<td id="sapr10c6" class="saperclosedcell"></td>
<td id="sapr10c7" class="saperclosedcell"></td>
<td id="sapr10c8" class="saperclosedcell"></td>
<td id="sapr10c9" class="saperclosedcell"></td>
<td id="sapr10c10" class="saperclosedcell"></td>
</tr>
</table>
</div>
</div>
</div>
</center>

В данной таблице каждая игровая ячейка имеет идентификатор вида saprXcY, где X - номер строки, а Y - номер столбца. Тоесть ячейка А1 будет иметь идентификатор sapr1c1, Б1 - sapr1c2, А2 - sapr2c1.

Далее создаем бонусы для каждой игровой ячейки. Для удобства обозначаем в соответствии с нумерацией ячеек (А1, ..., К10). 

В игре "сапер" клетка может открываться не только по нажатию на нее - при попадании в пустую ячейку автоматом открываются все цифры вокруг нее и граничащих с ней пустых ячеек. На примере картинки выше - ячейка В1 может быть открыта попаданием в ячейки А1, Б1, А2, Б2 и попаданием в саму ячейку В1. Следовательно в ответы бонуса В1 нужно прописать 5 полевых кодов. Для удобства я для себя создал макет игрового поля в Excel с расставленными бомбами и цифрами и при забивке бонусов ориентировался по нему. За ячейку "не бомбу" назначается бонус 1 минута, за ячейку-бомбу - 1 секунда.

Задание бонуса оставляем пустым, в подсказку вставляем скрипт:

<script type="text/javascript">$('#saprXcY').toggleClass('class');</script>  

Где saprXcY - идентификатор ячейки, а class - тип ячейки.

Типы ячеек:

saperclosedcell - закрытая ячейка(по умолчанию), в бонусах не используется

saperemptycell - пустая ячейка без бомб и цифр

sapercell1 - цифра 1 

sapercell2 - цифра 2 

sapercell3 - цифра 3 

sapercell4 - цифра 4 

sapercellbomb - бомба

Чтобы не использовать "эксперементальный" дизайн, можно создать и подключить вместо предложенной свою таблицу стилей, в которой указать только важные для логики игры классы:

.saperclosedcell
{
width: 60px;
height: 60px;
background-size:cover;
background-image: url("http://d1.endata.cx/data/games/63238/bgcelltemplate1.jpg");
}
.saperemptycell
{
width: 60px;
height: 60px;
background-size:cover;
background-image: url("http://d1.endata.cx/data/games/63238/bgcellempty.jpg");
}
.sapercell1
{
width: 60px;
height: 60px;
background-size:cover;
background-image: url("http://d1.endata.cx/data/games/63238/bgcell1.jpg");
}
.sapercell2
{
width: 60px;
height: 60px;
background-size:cover;
background-image: url("http://d1.endata.cx/data/games/63238/bgcell2.jpg");
}
.sapercell3
{
width: 60px;
height: 60px;
background-size:cover;
background-image: url("http://d1.endata.cx/data/games/63238/bgcell3.jpg");
}
.sapercell4
{
width: 60px;
height: 60px;
background-size:cover;
background-image: url("http://d1.endata.cx/data/games/63238/bgcell4.jpg");
}
.sapercellbomb
{
width: 60px;
height: 60px;
background-size:cover;
background-image: url("http://d1.endata.cx/data/games/63238/bgcellbomb.jpg");
}

Так же желательно скрыть заголовки бонусов:

.content .color_bonus
{
visibility: hidden;
}
.content .color_correct
{
visibility: hidden;
}

Уровень "Закрывашка"

Во всех 3-х уровнях добавляем по одному основному коду, закрывающему уровень. В задании-закрывашке в подсказке (2 часа) выдаем адрес локации с этими кодами. По оформлению - все как в штабном уровне.

Так же на этом уровне можно реализовать чисто штабные бонусные задания.

Подсчет результатов

Смотрим статистику по уровню "минное поле", точнее бонусное время на этом уровне. В случае прошедшей игры (100 клеток, 14 бомб) за все правильно открытые клетки должен быть начислен бонус 86 минут (1 час 26 минут). Количество недостающих минут умножаем на 20 минут и начисляем штраф. Каждая секунда сверх целых минут - попадание в бомбу. Количество секунд умножаем на 25 минут и начисляем штраф.

Недостатки

Крайне сложно контролировать прохождение игры. Единственный способ - раздел "бонусы и штрафы".