使用Web技術克隆Pokémon Go的開源專案

banq發表於2016-08-09
WebGo
這個開源遊戲專案是克隆目前最火手遊Pokémon Go，使用Mapbox作為地圖, Pokéapi作為Pokémon資料和精靈，使用Pusher處理傳送位置定位給所有玩家。

使用Mapbox作為地圖是因為它有一個很完美的Javascript庫包元件，使用Mapbox GL能很容易透過圖片和一些座標將精靈加入地圖：

var marker = new mapboxgl.Marker(createSprite(data))
                    .setLngLat(data.coordinates)
                    .addTo(map);
<p class="indent">

這將建立了圖片疊加到地圖上，然後加入一個事件處理器以便觸發情態視窗開始戰鬥。

const modal = document.getElementById('modal');
document.querySelector('body').addEventListener('click', show);

function show(event) {
  if(event.target.classList.contains('pokemon')) {
    currentSprite = event.target;
    currentSprite.dataset.currenthp = currentSprite.dataset.hp;

    modal.querySelector('.modal-image').src = event.target.src;
    modal.querySelector('.modal-name').innerHTML = event.target.dataset.name;
    modal.querySelector('.modal-current-hp').style.width = '100%';
    modal.querySelector('.modal-current-hp').style.backgroundColor = '#39e239';
    modal.querySelector('.modal-attack').innerText = 'ATTACK!!!';
    modal.querySelector('.types').innerText = currentSprite.dataset.types;
    modal.classList.remove('hide');
  }
}
<p class="indent">


關於位置定位，需要所有玩家在同樣位置看到相同的Pokemon，這時Pusher就非常適合，能夠使用它傳送同樣事件給所有玩家。

最後是Pokemon資料，pokeapi非常簡單令人驚奇，是所有Pokemon資料的RESTful API。下面是呼叫程式碼:

fetch(`http://pokeapi.co/api/v2/pokemon/${pokemonId}/`)
.then(res => {
  return res.json();
})
.then(pokemon => {
  const data = {
    id: pokemonId,
    name: pokemon.name,
    sprite: `https://pokeapi.co/media/sprites/pokemon/${pokemonId}.png`,
    coordinates: [lng, lat],
    expires: parseInt((new Date()).getTime() + duration, 10),
    hp: pokemon.stats.find(stat => stat.stat.name === 'hp').base_stat,
    types: pokemon.types.map(type => type.type.name[0] + type.type.name.substring(1))
  }

  pusher.trigger(bounds, 'encounter', data);
});
<p class="indent">


更詳細說明見：Building A Pokémon GO Clone Using Web Technologies And Pusher

專案地址：

AverageMarcus/Pushermon-Go: A Pokémon Go clone

相關文章