使用Web技术克隆Pokémon Go的开源项目

16-08-09 banq
         

这个开源游戏项目是克隆目前最火手游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>

这将创建了图片叠加到地图上,然后加入一个事件处理器以便触发情态窗口开始战斗。

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>

关于位置定位,需要所有玩家在同样位置看到相同的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>

更详细说明见:Building A Pokémon GO Clone Using Web Technologies And Pusher

项目地址:

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