Executando verificação de segurança...
2

Projeto JOGO POKEMON (parte 2) Alteração da API e inicio do código.

Fala pessoa, quem não conhece o projeto no fim do post tem os links que explica sobre a ideia.

No andar do projeto as coisas mudam, e a primeira coisa que mudei é que não vou mais usar a api https://pokeapi.co/. Isso porque não tem todas informações que preciso na listagem dos pokemons, sendo assim tive tive uma outra ideia que já coloquei em prática e funcionou.

Nesse jogo terei apenas os pokemons da primeira geração, sendo assim encontrei esse site que possui todas as informaçoes que preciso:

https://pokemondb.net/pokedex/stats/gen1

Untitled

Ai foi simples, fiz um script para estrair os dados da tabela e criar um objeto. Depois apenas joguei no console e salvei como json, eeeeeee bimba, tenho todos os dados que preciso.

Aqui vai o código que joguei no console para extrair os dados (vou explicar para os iniciantes):

//Na imagem veja que os pokemons estão em uma tabela
//sendo assim pego uso o queryselector para pegar
//todas as linhas da tabela
let linha = document.querySelectorAll('table tr')

//crie uma variavel que irá armazenar a lista dos pokemons
let listaPokemons = []

//fiz o loop para navegar por cada linha da tabela
//comecei do 1 pois a primeira linha é o cabeçalho e não me interessa
for (let index = 1; index < linha.length; index++) {

		//crio um objeto pokemon que será adicionado na lista
    pokemon =  {
				//Aqui é simples, cada td é uma coluna começando do zero
				//ai é só saber contar rsrs
        numero: linha[index].querySelectorAll('td')[0].textContent,
        nome: linha[index].querySelectorAll('td')[1].textContent,
        tipo: linha[index].querySelectorAll('td')[2].textContent.split(' '),
        vida: linha[index].querySelectorAll('td')[4].textContent,
        ataque: linha[index].querySelectorAll('td')[5].textContent,
        defesa: linha[index].querySelectorAll('td')[6].textContent,
        velocidade: linha[index].querySelectorAll('td')[9].textContent
        };

		//adiciono o objeto na minha lista
    listaPokemons.push(pokemon)
}

//mando para o console, ai só dar um botão direito e copiar objeto
//criar um arquivo .json e colar.
console.log(listaPokemons)

Untitled

Untitled

Agora ao invés de consumir direto da API vou consumir desse arquivo que já está do jeitinho que preciso, e como informações do pokemon nunca mudam não tem problema eu ter isso estático.

Já comecei e está listando os dados no HTML (como disse em outros posts, comece feio e depois arrume)

Untitled

Próximo passo é criar o botão para selecionar o pokemon, fazer a maquina selecionar um aleatório e começar e abrir a tela de batalha.

https://www.tabnews.com.br/saraiva/projeto-jogo-pokemon-parte-1-documentando-do-que-sera-feito

https://www.tabnews.com.br/saraiva/projeto-jogo-pokemon-apresentacao

Carregando publicação patrocinada...