Building PokemonGo in pure HTML, Javascript & CSS – Part 1

Datetime:2016-08-23 01:04:57          Topic: JavaScript  CSS           Share

AtGeofenceAPI, we’re building tools that make it dead simple to write location based apps. This month, Pokemon Go is all the rage. In this series, we will examine what it would take to create a game like Pokemon Go with the most basic of internet skills - HTML, Javascript & CSS and the game will work in both Desktop and mobile web browsers. 

In this first part of this series, I will take you through a basic steps to setup the underlying game interface, which we will call “JavascriptGo”.

Quick Start

Here’s a working example of what we will build:

https://javascriptgo.herokuapp.com/

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

The demo is made possible by plain HTML, Javascript, & CSS. (Despite the fact that this appears within the context of a Python app, I’m not actually using any Python at all. I wrapped this into some Python in order to be able to have my demo launch into a free Heroku account.)

Here’s the links to the actual source code:

Screenshot

Overview of How I Made This

I use Mapbox.com’s Javascript widget to make the map interface appear. 

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.





About List