Using HTML5 and geofences to create location aware games.

What is a geofence?

A geofence is a geographically defined area that one might describe as being defined by a “virtual fence”.  If you’re within the “fence” then your app knows it.  If you’re outside, then it knows that too.  Typically a geofence is defined by picking a latitude and longitude and then extending a radius from that point. So you’d know if someone was within 50 meters of your point (for example). If so, then you can show them one thing – a coupon for your restaurant or maybe a game. If not, then you show them something else – an email list sign up form or a clue to your scavenger hunt.

Caveats

Geolocation is not pinpoint perfect. It’s difficult to for your device to tell if you are where you are or if you’re 10 meters to the left. So geofences should always allow for some accuracy tolerance. If using the enableHighAccuracy = true code then you might be able to reach within 5-6m. but again it all depends on your device and whether you’re inside or outside.

How to use it in a game?

When building an app for location-aware games, geofencing is great.  You can require your players to actually be in a specific spot in order to receive a puzzle or clue.  You can send them on a treasure hunt giving them the next clue when they reach a specific goal (or location).

More complex games can track multiple users in an area and display them to each other. If you’re having an event-based game where everyone plays at the same time, You can track players as they move and display their locations and progress on a leader board.