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

         
banq 16-08-09

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

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

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');
}
}


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


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

项目地址:
AverageMarcus/Pushermon-Go: A Pokémon Go clone