Building A Pokémon GO Clone Using Web Technologies And Pusher

This is a guest post from our friend Marcus Noble.

Last Saturday saw @JSOxford‘s second Summer of Hacks 2016 event take place. Game Dev Day gave everyone a chance to have fun throwing together games and virtual reality experiences using web technologies. Loads of awesome things were built (which you can see here) including Marcus’s Pokémon GO clone.

We asked Marcus if he would put together a blog post to show everyone how he built his Pokémon GO clone using Pusher and web technologies.

---

My plan for the day? To make a Pokémon GO clone using web technologies!

⚠️ Warning: I used a fair amount of ES6 features while building this so it’s likely it’ll only work in modern browsers (possibly only Chrome as that’s what I used).

The game is built using Mapbox for the maps, Pokéapi for the Pokémon data and sprites and Pusher to handle sending out the locations to all players.

I settled on using Mapbox for the maps as it had a pretty nice JavaScript library and was the first that I found out how to prevent manual movement of the map. As with the original Pokémon GO I wanted to make it so that players actually had to move around so manual movement of the map was blocked and the zoom level was limited. Rotation of the map is still allowed though.

Using Mapbox GL I was able to easily add sprites to the map using an image and some coordinates:

javascript
1var marker = new mapboxgl.Marker(createSprite(data))
2                    .setLngLat(data.coordinates)
3                    .addTo(map);
Copy

This then created an image overlaying the map that I could attach an event handler to in order to trigger a modal window to start the “fight”.

javascript
1const modal = document.getElementById('modal');
2document.querySelector('body').addEventListener('click', show);
3
4function show(event) {
5  if(event.target.classList.contains('pokemon')) {
6    currentSprite = event.target;
7    currentSprite.dataset.currenthp = currentSprite.dataset.hp;
8
9    modal.querySelector('.modal-image').src = event.target.src;
10    modal.querySelector('.modal-name').innerHTML = event.target.dataset.name;
11    modal.querySelector('.modal-current-hp').style.width = '100%';
12    modal.querySelector('.modal-current-hp').style.backgroundColor = '#39e239';
13    modal.querySelector('.modal-attack').innerText = 'ATTACK!!!';
14    modal.querySelector('.types').innerText = currentSprite.dataset.types;
15    modal.classList.remove('hide');
16  }
17}
Copy

Rather than copying the capture mechanic from Pokémon GO I wanted to implement some way of battling with the monsters encountered. I settled on having a large “attack” box that needs to be repeatedly tapped to bring down their HP.

Location

Just like with the original Pokémon GO, I wanted all players to see the same Pokémon in the same location. Pusher was great for this! I could use it to send the same events to all players. The one problem I did have was I didn’t want to flood every player with every single encounter in the world all the time. For the purpose of the hackday I limited the location encounters were generated to be within the area we were working but I’ve now been able to improve on that thanks to a suggestion from Ben: Geohash!

In simple terms, geohash take some coordinates and terms them into a unique code. For example: The geohash for Big Ben is gcpuvpm. The longer the code, the more precise it is (more zoomed in). While exploring this idea I came across a great website that allows you to explore geohash codes on a map.

When players joined the game, or moved about, I had their browser calculate all geohashes that their visible map contained. I then used these hashes as Pusher channel IDs to subscribe to.

javascript
1let currentGeoHashes = [];
2let mapBounds = map.getBounds(); // Get the bounds of the visible map
3let geoHashes = ngeohash.bboxes(mapBounds._sw.lat, mapBounds._sw.lng, mapBounds._ne.lat, mapBounds._ne.lng, 6); // Get all geohashes within the bounds
4currentGeoHashes.forEach(geohash => {
5  if(!geoHashes.includes(geohash)) {
6    // Unsubscribe from any hash we've moved out of
7    pusher.unsubscribe(geohash);
8  }
9});
10// Keep a record of geohashes we're currently in
11currentGeoHashes = currentGeoHashes.filter(geohash => geoHashes.includes(geohash));
12geoHashes.forEach(geohash => {
13  if(!currentGeoHashes.includes(geohash)) {
14    // Subscribe to any new hashes we've moved into
15    currentGeoHashes.push(geohash);
16    pusher.subscribe(geohash).bind('encounter', encounter);
17  }
18});
Copy

With this done, players now only receive encounter events that are within their geohash ‘slices’ (this may still be beyond the visible map). The server can randomly generate an encounter and then send the event to just the channel it is relevant to.

javascript
1function nextEncounter() {
2  const channelArray = Array.from(channels);
3  const bounds = channelArray[Math.floor(Math.random()*channelArray.length)];
4  if(bounds) {
5    const boundingBox = ngeohash.decode_bbox(bounds);
6    const lngMin = boundingBox[1];
7    const lngMax = boundingBox[3];
8    const latMin = boundingBox[0];
9    const latMax = boundingBox[2];
10
11    const lng = utils.randomNumber(lngMin, lngMax).toFixed(10);
12    const lat = utils.randomNumber(latMin, latMax).toFixed(10);
13    const duration = utils.randomNumber(30, 300) * 1000;
14
15    const pokemonId = parseInt(utils.randomNumber(1, 250), 10);
16
17    fetch(`http://pokeapi.co/api/v2/pokemon/${pokemonId}/`)
18      .then(res => {
19        return res.json();
20      })
21      .then(pokemon => {
22        const data = {
23          id: pokemonId,
24          name: pokemon.name,
25          sprite: `https://pokeapi.co/media/sprites/pokemon/${pokemonId}.png`,
26          coordinates: [lng, lat],
27          expires: parseInt((new Date()).getTime() + duration, 10),
28          hp: pokemon.stats.find(stat => stat.stat.name === 'hp').base_stat,
29          types: pokemon.types.map(type => type.type.name[0] + type.type.name.substring(1))
30        }
31
32        pusher.trigger(bounds, 'encounter', data);
33      });
34  }
35  setTimeout(nextEncounter, 5000);
36}
Copy

You may have noticed above that I am randomly getting the bounds of an encounter from a channels object. This is used to store all channels that currently have players subscribed to it – there’s no point sending out events if no one is listening. Pusher has the ability to set up webhooks that allow you to be notified of new channel subscription and unsubscription. I actually struggled a bit with these at first as the documentation on using the pusher.webhook() method in Node.js was very hard to find (it’s here). Once I figured it out it was actually pretty simple:

javascript
1// List of channels that have users subscribed to
2let channels = new Set();
3
4
5server.route({
6  method: 'POST',
7  path:'/channelhook',
8  handler: function (request, reply) {
9    const webhook = pusher.webhook({
10      rawBody: JSON.stringify(request.payload),
11      headers: request.headers
12    });
13
14    if(!webhook.isValid()) {
15      console.log('Invalid webhook')
16      return reply(400);
17    } else {
18      reply(200);
19    }
20
21    webhook.getEvents().forEach( e => {
22      if(e.name == 'channel_occupied') {
23        channels.add(e.channel)
24      }
25      if(e.name == 'channel_vacated') {
26        channels.delete(e.channel)
27      }
28    });
29  }
30});
Copy

I’m using hapi.js here to serve up my webpages and I’ve created a /channelhook route that will receive the incoming webhooks. The format the payload is passed into pusher.webhook() is important for it to correctly validate. Once setup we can look through the events and update the new channels joined and existing channels vacated.

Pokédata

The final piece is the Pokémon data. I’m using Pokéapi which is simply amazing! It’s a RESTful API of pretty much all Pokémon data you could want. I’m only using a tiny fraction of what it has available so I encourage you to go check out their API documentation if you’re interested. As all Pokémon has an ID I simply generated a random number for each encounter and called the API with that ID. I could then get back the name, sprite URL, it’s base HP and its types to use in the modal attack window.

javascript
1fetch(`http://pokeapi.co/api/v2/pokemon/${pokemonId}/`)
2.then(res => {
3  return res.json();
4})
5.then(pokemon => {
6  const data = {
7    id: pokemonId,
8    name: pokemon.name,
9    sprite: `https://pokeapi.co/media/sprites/pokemon/${pokemonId}.png`,
10    coordinates: [lng, lat],
11    expires: parseInt((new Date()).getTime() + duration, 10),
12    hp: pokemon.stats.find(stat => stat.stat.name === 'hp').base_stat,
13    types: pokemon.types.map(type => type.type.name[0] + type.type.name.substring(1))
14  }
15
16  pusher.trigger(bounds, 'encounter', data);
17});
Copy

Whats next?

I have a little list of planned features if I get the chance:
– Use the catch rate calculation to improve the attack screen with fight/catch mechanics
– Add some points of interested
– Show other players, maybe add battling with each other
– Persistence!

So where can I see it already?!

All the code is available on GitHub and the game can be played at https://pushermon-go.marcusnoble.co.uk/. If you have any questions feel free to tweet me at @Marcus_Noble_.

---

Do you have something you think would be interesting to share with the Pusher community? If you’d like to write a guest post drop us a line at team [at] pusher.com with your idea.