Recrie um jogo simples de Pokémon com 70 linhas de Javascript

Introdução

“Quem é esse Pokémon?” deve trazer memórias para a maioria das pessoas. Se você não sabe do que se trata, aconselho você a procurar as aventuras de Ash Ketchum e seu amigo Pokémon Pikachu.

Neste post, mostrarei como criar um jogo simples de adivinhação de Pokémon com HTML, CSS e JavaScript. O jogo é totalmente baseado em "Quem é esse Pokémon?" da série de anime Pokémon. Você pode se lembrar de como é aqui .

É um jogo simples, tem pouco menos de 70 linhas de código JavaScript. Você pode ver como fica e experimentar aqui . Também ensinarei como você pode implantá-lo gratuitamente. Este jogo é uma ideia de projeto perfeita que você pode melhorar e adicionar ao seu portfólio.

Não vou ensinar muito JavaScript neste post, você pode aprender com muitos tutoriais gratuitos disponíveis online gratuitamente. No entanto, vou ensinar quais são os passos necessários para criar um jogo como este.

Como começar?

Vamos imaginar que você recebeu isso como uma tarefa na escola ou como uma tarefa em seu trabalho. Alguém acabou de mostrar um vídeo de cima e você precisa recriá-lo. Como você começaria?

Bem, a primeira coisa que você precisa verificar é quais dados você precisa ter.

Nesse caso, você precisa ter uma lista de sprites de Pokémon junto com o nome do Pokémon para cada sprite. Você geralmente obtém dados como esses de algum banco de dados, CSV ou arquivos do Excel. Outra opção é verificar se existe alguma API Pokemon que forneça tudo isso.

Felizmente para nós, existe uma PokeAPI que é gratuita e fornece tudo o que precisamos. No site deles, você pode encontrar a documentação da API e também pode testar a API. Queremos fazer apenas uma chamada de API quando o aplicativo for iniciado. O resultado dessa chamada seria salvo na variável e usado durante toda a duração.

Venha com uma ideia

Agora, quando você sabe que tem todos os dados necessários facilmente disponíveis, precisa verificar quais recursos seu aplicativo precisa ter. Isso é chamado de requisitos funcionais. Você os escreve e começa a implementar o que escreveu. Portanto, os requisitos funcionais para este aplicativo seriam:

• obter todos os dados Pokemon da API
• mostre a sombra de um sprite de um pokémon aleatório
• mostra a seqüência atual de palpites corretos do jogador
• o jogador precisa ser capaz de adivinhar o nome do Pokémon escrevendo o nome no campo de entrada e pressionando a tecla Enter
• se o jogador adivinhou corretamente, aumente a seqüência em um, caso contrário, redefina a seqüência para zero
• depois de adivinhar, revele o que é Pokémon mostrando seu sprite e imprimindo seu nome
• repita todas as etapas acima, exceto a primeira etapa

Você também pode fazer uma lista de requisitos não funcionais:

• encontre ou crie uma imagem de plano de fundo semelhante ao plano de fundo do anime
• encontre uma fonte semelhante à fonte Pokemon
• adicione algum estilo CSS ao formulário de entrada

Implementação

Como você pode ver, a aplicação é bem simples. Você mostra a sombra do sprite de um Pokémon aleatório, deixa o jogador adivinhar e, em seguida, aumenta ou zera o contador de sequência. E para a última etapa, mostre o Pokémon e depois pegue um novo.

Abra seu editor de texto favorito. Eu gosto de usar o Visual Studio Code (VS Code). Crie três arquivos - “ index.html ”, “ style.css ” e “ action.js ”. Coloque os três arquivos na mesma pasta. Abra index.html e inicialize-o. No VS Code você pode fazer isso simplesmente digitando ! e, em seguida, pressionando a tecla tab. Se você não estiver usando o VS Code e não souber como inicializar um arquivo HTML , verifique aqui . Depois disso, basta adicionar links para arquivos CSS e JS dentro das tags head.

Dentro das tags do corpo, você precisa adicionar uma tag de imagem onde os sprites serão mostrados, um campo de entrada para o usuário fazer um palpite e um campo de extensão para exibir o palpite correto. Cada uma dessas tags deve ter uma propriedade id exclusiva. Por enquanto, terminamos com o HTML, eis como deve ficar até agora:

 <!DOCTYPE html> <html lang="en"> <head> <!--For implementation details visit marinsborg.com--> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <script src="action.js" defer></script> <link rel="stylesheet" href="style.css"> <title>Who's that Pokemon?</title> </head> <body> <img id="sprite"> <input type="text" placeholder="Who's that Pokemon?" id="guess"> <br> <span id="streak">Streak: 0</span> </body> </html>

Agora vamos nos concentrar no arquivo action.js. Existe toda a lógica do jogo. No GitHub, você pode conferir meu arquivo action.js onde comentei quase todas as linhas sobre o que ele faz. É por isso que não vou explicar linha por linha aqui.

Como você pode ver no arquivo, PokeAPI com um URL base pode receber argumentos extras “limit” e “offset”. Dessa forma, você pode escolher qual Pokémon deseja obter na resposta da API e quantos deles. Eu defino o offset em 0 e limito em 150 para que eu sempre consiga apenas Pokémon da primeira geração. Você pode mudar isso como quiser.

Como você pode ver na imagem acima - a API retornará uma matriz de objetos e cada objeto contém o nome do Pokémon e a URL que você pode abrir para obter mais informações sobre esse Pokémon. Os Pokémon são classificados por seu número PokeDex, no entanto, dentro de uma matriz, seu número é reduzido em um porque a matriz começa do zero. Esta é a única chamada de API que você precisa fazer.

Em JavaScript, você pode fazer uma chamada para uma API de várias maneiras. Eu usei a função de busca . Depois que os dados são obtidos da API e salvos em uma variável, o jogo pode começar.

O jogo começa com a função getPokemon() . Essa função também é usada para gerar um novo Pokémon toda vez que o usuário der um palpite. Portanto, no início dessa função, é necessária alguma limpeza antes de gerar um novo Pokémon.

Gerar um Pokémon é simples - obtenha um número aleatório, obtenha o nome do Pokémon e sprite com esse número e salve-o em variáveis. Depois disso, mostre a sombra do Pokémon definindo a propriedade img src para sprite URL e definindo o brilho da propriedade CSS como zero.

Depois disso, o aplicativo não faz nada até que o usuário pressione a tecla Enter. Você deve adicionar um ouvinte de evento ao campo de entrada que verificará se a tecla Enter foi pressionada e se for uma função checkGuess() será chamada.

A função checkGuess() simplesmente aumenta ou redefine o valor da sequência com base no palpite do usuário e chama a função showPokemon() . showPokemon() atualiza o valor da sequência em HTML, revela o sprite do Pokémon e mostra o nome do Pokémon. Após 2 segundos, a função getPokemon() será chamada e todo o processo será iniciado novamente. E é isso.

Estilo

Ok, agora é hora de adicionar um pouco de estilo a este jogo para que fique parecido com o do vídeo. Como você já sabe, o CSS é usado para estilizar. Você pode verificar meu arquivo CSS , ele não contém muito. E tenho certeza de que você pode estilizar isso muito melhor do que eu. Afinal, sou apenas um desenvolvedor de back-end.

Encontrei uma imagem de fundo que você pode ver e baixar aqui . Também encontrei uma fonte muito parecida com a fonte Pokemon. Você também pode baixá-lo do meu repositório . Definir a imagem de fundo é fácil - dentro do arquivo CSS, você precisa adicionar a propriedade 'background-image' à tag body com o caminho para a imagem.

Sprite é sempre mostrado no lado esquerdo da tela, enquanto o texto e o nome do Pokémon são mostrados no lado direito. Para fazer esse efeito com apenas duas colunas, você pode usar o flexbox . Dentro do HTML, você precisa adicionar um div pai com uma “linha” de classe e dentro desse div, você precisa adicionar dois divs com uma “coluna” de classe.

Carregar fonte personalizada também é simples em CSS. Com @font-face você define o nome da fonte e o caminho para a fonte. Depois disso, você pode usar essa fonte com seu nome. Use essa fonte para estilizar "Quem é esse Pokémon?" no lado direito da tela e também o nome do Pokémon quando for revelado.

Você pode estilizar o campo de entrada e riscar como quiser, apenas adicionei cantos arredondados ao campo de entrada e alinhei o texto. Também mudei o tamanho. Você pode verificar o que quiser ou pode usar meu valor.

A última coisa que você precisa adicionar é estilo para dispositivos móveis. Ele é adicionado com a regra @media onde você define as novas propriedades CSS se a janela do navegador tiver 500px de largura ou menos. Lá você precisa alterar que as colunas são mostradas como linhas, reduzir o tamanho das fontes e aumentar a largura do campo de entrada. E é isso para o estilo. Como eu disse, você pode fazer muito melhor do que eu, esse é o mínimo necessário para ficar parecido com o vídeo.

Próximos passos

Neste tutorial, mostrei como implementar o "Quem é esse Pokémon?" jogo com HTML, CSS e JavaScript. Se você está travado em alguma parte, pode ler os comentários dentro do arquivo action.js, ou me perguntar aqui ou no Twitter . Você também pode me seguir lá para as novas postagens.

Para praticar, você pode implementar alguns novos recursos para melhorar este jogo e torná-lo único. Por exemplo:

• adicionar botões que os usuários podem clicar para mudar as gerações de Pokémons para adivinhar
• adicione uma função que reproduzirá uma voz "Quem é esse Pokémon?" pela primeira vez o jogo é carregado.
• Crie uma nova variável que mostrará uma pontuação alta.
• Adicione um cronômetro que fará uma contagem regressiva entre a obtenção de novos Pokémon

Existem tantas ideias que você pode implementar, dessa forma você obterá uma nova experiência e aprenderá coisas novas.

Depois de terminar, você pode implantar facilmente este jogo gratuitamente para poder mostrá-lo em seu portfólio ou em seu currículo. Basta seguir este guia simples .

Publicado também aqui .