I create a map for a browser game (strategy). The map consists of cells (tile) ... At the moment, the map is updated when you click on the arrows next to the map, the map itself is generated using a PHP cycle (all information about villages and resources on the map is stored and selected from the database) ...

I understand that to generate a map every time you update the coordinates (when moving around the map), this is a very difficult process for both the server and the client ...

What is now:
enter image description here

Decided to change the map:

  1. Use AJAX (to dynamically update the map)
  2. Use JSON To get information about cities on the map using the API
  3. Use Scroll in X and Y to scroll the map along the axes (Travian used and used this system)

The first 2 points - do not cause questions at all ... That's about 3, this is a problem. First, the choice fell on the plugin Jquery Eco-Scroll.js ... But I could not find how to fasten the "initial coordinates" so as not to 0: 0 loaded, but let's say 20: 5 ... I beg you to help find solutions for implementing the card (and yes I understand that the map will transfer from isometric to 2D). The biggest plus of Eco-Scroll.js is preloading cells.

enter image description here

    1 answer 1

    enter image description here The easiest way was to use JS (jQuery). Having written a small library that generates a 20x20 cell layer (400 cells), then the script loads the data from the server using AJAX and receives the answer in JSON (a pseudo real time is created). After the script has already got into the cache, loading and working the card becomes simply gorgeous, a small screen: enter image description here

    Quite an interesting solution was the use of draggable, from the jQuery package. It was he who allowed us to drag the map (svayp if you please), using mathematical calculations, we managed to teach the script to understand the directions of the world, and move it depending on the map offset relative to the page :)