You can visit that link in both your desktop browser as well as your mobile browser and it should work. You should be able to see the game board, and then as you walk around the city, you’ll see your location update. (If you see any glitches on your device, feel free to send me an upstream pull request and I’ll merge the fixes.)
Here’s the links to the actual source code:
Overview of How I Made This
In order to help make the app look more like PokemonGo, I’ve selected a grey map style , set the zoom level to 8 , and pitched the map perspective to the maximum value of 60 . Additionally, I don’t want users to be able to drag or manually zoom the map so I’ve disabled interactivity .
I’ve also using some JQuery in order to more easily work with the browser DOM and events.
Modern web browsers have the ability to access the user’s GPS coordinates. Just like when you install a mobile app and give the app permissions, the user must also grant GPS location data permission to the game before we can access the location data.
For a quick primer on how HTML5 geolocation works, take a look at this article . In my app, I use the “watchLocation” method in order to get alerted every single time the browser notices the user is in a new location. I then pump that data into a handler that updates the map. My code for that is here .
Finally, I wanted to put something in the middle of the interface in order to help establish that’s where you are. For this, I use a basic transparent crosshairs PNG file and I tilt it 60 degrees with CSS to match the map’s tilt.
Just like that, we’ve got a basic PokemonGo-style mobile app framework!
Next: Directionality & Automatic Rotation of the Game Board
In part 2 of this series, we will explore how to use the mobile phone’s compass in order to rotate the game board to the direction in which you are walking. Subscribe to my Tumblr account for updates.
Be sure to check outGeofenceAPI.org to learn how you can more easily create mobile games like PokemonGo.