Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
branch: master
Fetching contributors…

Cannot retrieve contributors at this time

16 lines (10 sloc) 1.207 kb

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.

image

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.

Jump to Line
Something went wrong with that request. Please try again.