Simple map-based game.
Switch branches/tags
Nothing to show
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Failed to load latest commit information.

Find your Tile

Find your Tile shows how the cool features offered by HTML5 and related standard can be leveraged to develop simple gaming experiences for the users.

The game

In Find your Tile 3 map tiles (satellite view) are shown to the user. One of them is centered on the user's current location. The others are randomly generated from a list of more than 600 cities in the world.

The player has to pick the tile she thinks corresponds to her location. If the answer is wrong then the game provides a link to the Wikipedia page corresponding to the city that was mistakenly selected.


Geeky info

The little game uses the location API (which is not part of the HTML5 standard) to determine the user's geolocation.

When the location has been determined a map tile is retrieved and inserted as image into the DOM by using the RESTful Maps API provided by Nokia Maps. The other 2 tiles are generated by picking 2 cities from a static list in JSON format.

The tiles are animated using only CSS3, and no jQuery has been used for this demo.