HTML and CSS Reference
In-Depth Information
Calculating the Position between Two
Points
When you start building games with geolocation, one of the first difficulties you'll face is the problem to calcu-
late the distance between two latitudes and longitudes. Whether this is to detect the proximity between players
or distance to a goal, this is something that you definitely must do.
On the client side, Google's Map v3 API provides a static method under
google.maps.geometry.spherical
called
computeDistanceBetween
, which takes two
LatLng
objects and returns the distance in meters.
If you don't have an API readily handy to do the calculation for you, your can use the Haversine distance
formula (
http://en.wikipedia.org/wiki/Haversine_formula
) to calculate the distance on a sphere between two
points.
There are a number of resources for this formula in JavaScript, but one of the best available on the web is at
www.movable-type.co.uk/scripts/latlong.html
.
It provides a succinct Haversine formula in JavaScript that takes
in
lat1
,
lon1 lat2
, and
lon2
and outputs the distance between the two in kilometers:
var R = 6371; // km
var dLat = (lat2-lat1).toRad();
var dLon = (lon2-lon1).toRad();
var lat1 = lat1.toRad();
var lat2 = lat2.toRad();
var a = Math.sin(dLat/2) * Math.sin(dLat/2) +
Math.sin(dLon/2) * Math.sin(dLon/2) * Math.cos(lat1) *
Math.cos(lat2);
var c = 2 * Math.atan2(Math.sqrt(a), Math.sqrt(1-a));
var d = R * c;
You can plug this formula directly into a method in your code to calculate the distance between two points.
Summary
This chapter showed you how to use geolocation in the browser to generate a position that can be used to display
an interactive map. With the ability to track a position and display and update interactive maps, a number of
augmented-reality games can be built in the browser. This includes scavenger hunts, geocaching, proximity-
based games, and more. The hope is that putting geolocation tools in your arsenal can open up a new world of
HTML5 games that breaks gaming outside of its normal confines.
