Коды по GPS-координатам

Движок умеет сам вбивать код, когда игрок подошёл к нужной точке на местности. Точки задаются в Скрипте задания, проверка идёт в браузере игрока по данным геолокации.

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

Достаточно вызвать gps_start() в поле «Скрипт задания». Движок подключает библиотеку геолокации только тогда, когда встречает в скрипте это имя, — отдельно включать ничего не нужно.

gps_start();

После этого браузер начинает следить за координатами игрока (watchPosition с повышенной точностью) и при каждом их обновлении пересчитывает все заданные точки.

Точки складываются в массив g_targets. Каждая точка — объект с координатами, радиусом и действиями:

gps_start();
 
window.target_lat1 = 51.5211367;   // Широта точки
window.target_lon1 = -0.10723867;  // Долгота точки
 
g_targets.push({
  'lat': window.target_lat1,
  'lon': window.target_lon1,
  'r': 30,  // Радиус в МЕТРАХ
  'action_inside': "enter_silent('finish_code_123')",
  'action_outside': "$('#distance_to').text(gps_distance(window.target_lat1, window.target_lon1).toFixed(0))"
});

• lat, lon — координаты точки.
• r — радиус срабатывания в метрах.
• action_inside — строка с javascript, выполняется, когда игрок внутри радиуса.
• action_outside — строка с javascript, выполняется, когда игрок снаружи радиуса.

Точек может быть сколько угодно — просто добавьте в g_targets несколько объектов.

Действия выполняются при каждом обновлении координат, а не один раз при входе в зону. Пока игрок стоит внутри радиуса, action_inside сработает много раз подряд. Для ввода кода это безопасно: enter() и enter_silent() отправляют код только один раз. А вот показ сообщения или проигрывание звука лучше защитить собственным флагом:

'action_inside': "if (!window.was_inside) { window.was_inside = 1; play_sound('limit'); }"

Функция gps_distance(широта, долгота) возвращает расстояние от текущего положения игрока до указанной точки в метрах. Обычно её показывают игроку, чтобы он понимал, теплее или холоднее:

<p>Расстояние до точки: <span id="distance_to">???</span> м.</p>

Функцию можно вызывать только после того, как получены первые координаты, — до этого положение игрока неизвестно. Проще всего вызывать её из action_outside, как в примере выше: движок сам выполнит её, когда координаты появятся.

Если нужно не просто проверить радиус, а нарисовать карту или свой индикатор, переопределите функцию on_update_position() — движок вызывает её каждый раз, когда пришли новые координаты. Текущее положение лежит в g_position (поля lat и lon):

gps_start();
 
on_update_position = function () {
  $('#my_coords').text(g_position.lat.toFixed(5) + ', ' + g_position.lon.toFixed(5));
};

Движок не подключает никаких картографических библиотек — карту автор добавляет сам в текст задания. В примере ниже используется бесплатный Leaflet с тайлами OpenStreetMap: подключаются css и js библиотеки, создаётся контейнер карты, а метка двигается по координатам игрока.

Учтите, что задание перерисовывается при автообновлении, поэтому состояние карты (центр, зум, объект карты) удобно хранить в window, чтобы она не создавалась заново и не «прыгала» под игроком.

Проверять GPS-уровень, бегая по улице, неудобно. Есть служебная функция init_debug_map(широта, долгота, зум): она рисует карту с вашими точками и радиусами и ставит перетаскиваемый маркер игрока. Куда вы перетащите маркер — там движок и будет считать игрока, так что можно проверить срабатывание точки не выходя из дома.

Функция работает на Google Maps и ждёт на странице контейнер <div id=“debug_map”>. Библиотеку Google Maps движок не подключает — её нужно добавить в текст задания со своим ключом API.

Если по сюжету нужно просто отправить игрока в точку, а не проверять его приход, хватит обычной ссылки. Вставляется в режиме «Источник»:

<a href="geo:?q=59.249,37.465">59.249, 37.465</a>

Схема geo: открывает координаты в навигаторе, установленном на телефоне. Для настольных браузеров, где такой схемы нет, подойдёт ссылка на карты:

<a href="https://www.google.com/maps/search/?api=1&query=49.940333,36.39305" target="_blank">49.940333, 36.39305</a>

Пример ввода кода по координатам | Пример с картой | Пример ссылок на координаты