En cours

jQuery interactable map


I am in need of a map like the browsergame Tribalwars has.

The map should show 8x8 in the Y and X line with 56x56 images.

I want to have the interactive map and a sort of mini-map on the right side. Users can hold down the mouse in the mini-map and scroll faster over the map. There must be an animation that shows the 'scrolling' on the real map.

Data must be loaded from MySQL out from a table of 100.000 rows.

The map must be exact the same as Tribalwars.net. It must have a slide effect when users goes to another section.

Screen of the map: [url removed, login to view] - or take a look at the [url removed, login to view] map.

Map must be made with plain JavaScript or jQuery framework.

I've got a load of questions about the information. Here is some more:

I've got all the graphics already, the tiles will be loaded from my mysql table and I've got all the graphics for the tiles already.

The current table has the following columns:

id | coor_y | coor_x | city_name | tile_image

So, the only thing that needs to be done is: load data from different PHP script with AJAX and make the map interactable i.e. using the minimap.

Using the mini-map to move 'fast', you must see a sort of 'slide' on the 'real' (normal size) map. You could create a test account on tribalwars.net and check it out for yourself.

Currently I've got already all the map code. You can take a look at the following url: http://www.grandwar.nl/freelance.php

I can share this code for the project so you have to do a lot less work. The only that has to be done with this code is that there must be a mini-map and the scrollview with a nice animation (as above said).
But: if possible, there should also be a nice slide animation when clicking on a arrow. Currently it just reloads the view. I want a 'scroll' view if possible as the Tribalwars map has.

If there are any questions left, feel free to PM me.

Compétences : AJAX, HTML, Javascript, jQuery / Prototype, PHP

Voir plus : interactable map, jquery interactable map, x interactive, scrolling table, on line map, jquery 1.9, jquery 1, jquery mini map scroll, jquery mini map, jquery map, no jquery, map animation, jquery, jquery c, INTERACTIVE MAP, c jquery, browsergame, img table, interactive javascript table, php interactive line, jquery section show, jquery screen scroll, section map, jquery sort php, mini mysql

Concernant l'employeur :
( 3 commentaires ) Oldekerk, Netherlands

N° du projet : #1010966