Паззл из стран Mercator. Клиент (js)

Содержание:

• Введение
• Подготовка данных (ruby)
• Сервер (Erlang+YAWS)
• Клиент (JS)

Сегодня заключительная статья из серии про Mercator. На этот раз поговорим про клиентскую часть. Из прошлой статьи видно, что после получения информации о странах из БД, эти данные пишутся в js-массив. Таким образом, ответы также есть в этом массиве (мы ведь пока просто играемся ;) ). Но сначала нужно создать объекты стран, которые можно двигать:

function addCountries() {
  var options = {
    strokeColor: '#FF0000',
    strokeOpacity: 0.8,
    strokeWeight: 2,
    fillColor: '#FF0000',
    fillOpacity: 0.35,
    geodesic: true,
    map: map,
    draggable: true,
    zIndex: 2,
  };

  for (var i = countries.length - 1; i >= 0; i--) {
    var country = new google.maps.Polygon(options);  // создаём полигон

    // сохраняем очертания и ответ (2 точки)
    country.polygon = countries[i];
    country.answer = answers[i];
    
    // рисуем в правильном месте, потом сдвинем
    country.setPaths(country.pathStringsToArray(country.polygon));
    
    // обработчик, который проверяет ответ
    google.maps.event.addListener(country, 'dragend', function() {
      if (this.boundsContains()) {
        this.replacePiece();
      }
    });
    
    // сдвигаем все страны в кучу
    country.moveTo(new google.maps.LatLng(25, -25));
    puzzle.push(country);
    country = null;
  };
}

В коде достаточно комментариев, единственно упомяну метод moveTo - это не мой, а взят из google-maps-extensions. Страны мы создали и поместили на карту, dragndrop реализован, осталось только разобраться с проверкой ответа. Когда пользователь бросает страну на карту проверяется всякая ли точка полигона умещается внутри ответа-прямоугольника (который представляет из себя 4 координаты - север/юг/запад/восток). Координаты допускают погрешность в 1 градус, так что у человека есть шанс поставить полигон правильно :) Однако, для северных стран такая погрешность очень мала. Например, у России самая северная точка - 81 градус СШ, где 1 градус на некоторых мониторах уже меньше 1 пикселя. Так что России и Канады, к сожалению, нет. Итак, за проверку вхождения всех точек полигона в ответ отвечает метод boundsContains(), а подсветка ответа выполняется в replacePiece(). Обе эти функции можно посмотреть в файлике country.js.

На этом можно пока остановиться, т.к. продукт получился более-менее законченный. На данном этапе :) В планах расширить карты (сделать карту России и США, а также отдельно на каждый континент), углубить (показывать информацию о странах, сделать подсказки, соревнования и шаринг в соцсети) и модернизировать (перейти на websockets).

На этом цикл статей заканчивается. Исходный код как всегда на github.

UPD

Проект переписан на другие технологии, улучшен и запущен на сайте https://geopuzzle.org.