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. . 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. Você pode ver como fica e experimentar aqui 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 Pokemon que forneça tudo isso. API Felizmente para nós, existe uma 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. PokeAPI Ao usar APIs gratuitas públicas, sempre certifique-se de minimizar o número de chamadas, pois isso cria algum trabalho no servidor pelo qual alguém está pagando! 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 - “ ”, “ ” e “ ”. 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 . Depois disso, basta adicionar links para arquivos CSS e JS dentro das tags head. index.html style.css action.js , verifique aqui 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>  <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 onde comentei quase todas as linhas sobre o que ele faz. É por isso que não vou explicar linha por linha aqui. meu arquivo action.js 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 . Depois que os dados são obtidos da API e salvos em uma variável, o jogo pode começar. função de busca O jogo começa com a função . 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. getPokemon() 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 para sprite URL e definindo o brilho da propriedade CSS como zero. img src Depois disso, o aplicativo não faz nada até que o usuário pressione a tecla Enter. Você deve adicionar um ao campo de entrada que verificará se a tecla Enter foi pressionada e se for uma função será chamada. ouvinte de evento checkGuess() A função simplesmente aumenta ou redefine o valor da sequência com base no palpite do usuário e chama a função . 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 será chamada e todo o processo será iniciado novamente. E é isso. checkGuess() showPokemon() showPokemon() getPokemon() 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 , 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. meu arquivo CSS Encontrei uma imagem de fundo que você pode . Também encontrei uma fonte muito parecida com a fonte Pokemon. Você também pode . 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. ver e baixar aqui baixá-lo do meu repositório 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 . 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. o flexbox 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 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. regra @media 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 . Você também pode me seguir lá para as novas postagens. Twitter 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 para poder mostrá-lo em seu portfólio ou em seu currículo. Basta seguir . implantar facilmente este jogo gratuitamente este guia simples Publicado também . aqui

Amazon

Fetch

Mozilla

Twitter

YouTube

Free programming tutorials and project ideas

Writer

Este áudio é produzido no idioma original da história!

Muito longo; Para ler

 Add passwordless user experiences to your app

HackerNoon Mobile

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

Muito longo; Para ler

Companies Mentioned

@marinsborg

HISTÓRIAS RELACIONADAS