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.
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.
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.