Projeto JOGO POKEMON (parte 4) Lógica inicial do combate finalizado, agora ajustar a IA para versão 1.0.0

Fala pessoal, venho aqui trazer a parte 4 do jogo pokémon. Em relação a tecnologia fiz uma pequena mudança para agilizar um pouco o desenvolvimento, a parte do CSS troquei pelo https://tailwindcss.com/ o resto segue como estava.

No tópico anterior eu havia terminado a listagem, agora ajustei a tela de selecionar pokémon e adicionei a busca por pokémon conforme gif abaixo:

E também criei a lógica inicial do campo de batalha, onde tenho já as funções:

• Atacar: Responsável por jogar o D20 e aplicar o Dano (seja em você ou na IA)

	atacar(jogador) {
	        let d20 = document.getElementById("d20")
	        let d20Valor = this.gerarNumeroRandomico(1, 20);
	        document.getElementById("d20-valor").innerHTML = "?";
	        d20.classList.add("d20")
	        setTimeout(() => {
	            document.getElementById("d20-valor").innerHTML = d20Valor;
	            d20.classList.remove("d20")
	            this.aplicarDano(d20Valor, jogador);
	        }, 2000)
	    }

• Gerar Numero Randômico: Função simples para gerar números aleatórios dentro de um range

gerarNumeroRandomico(min, max) {
        return Math.floor(Math.random() * (max - min + 1) + min);
    }

• Calculo Ataque: Função responsável por gerar o numero de dano que será causado.

calculoAtaque(d20Valor, ataque) {
        return Math.round((parseInt(d20Valor) + parseInt(ataque)) * 0.30)
    }

Hoje o calculo está simples pois foi implementado apenas a logica de dano inicial, mas futuramente será adicionado novas regras como:

• o percentual de vantagem de acordo com o tipo.

• o percentual de ataque se for um ataque critico.

• (em uma versão 3.0) o valor do ataque baseado na habilidade selecionada

• (em uma versão 3.0) o calculo de mana quando se utiliza um ataque de habilidade

• Calculo Defesa: Função responsável por gerar a quantidade de defesa de quem sofrerá o dano.

calculoDefesa(defesa) {
        return Math.round(parseInt(defesa) * 0.10)
    }

Igual o calculo de ataque, será adicionado novas regras na defesa, como a possibilidade de jogar um D20 para defender e usar algum tipo de habilidade para defesa.

• Finalizar Batalha: Vai chamar uma modal informando o fim do jogo. No momento está um alert mesmo

finalizarBatalha(nome) {
        alert(`O jogador ${nome} foi derrotado`);
    }

Aplicar Dano: A função responsável por causar o dano de acordo com o calculo de ataque e calculo de defesa. Pouco provável que essa função seja alterada, pois as regras foram separadas (Calculo Ataque e Calculo Defesa), então se for mexer em alguma função provável que seja nelas.

aplicarDano(d20Valor, jogador) {

        let pokemonAtaque = jogador == "jogador" ? this.pokemonPlayer : this.pokemonIA;
        let pokemonDefesa = jogador == "jogador" ? this.pokemonIA : this.pokemonPlayer;

        let dano = this.calculoAtaque(d20Valor, pokemonAtaque.ataque);
        let defesa = this.calculoDefesa(pokemonDefesa.defesa);
        let vida = pokemonDefesa.vida - (dano - defesa);
        pokemonDefesa.vida = vida;
        new ComponentePokemon().animacaoDano(jogador == "jogador" ? "IA" : "jogador", (vida * 100) / pokemonDefesa.vidaInicial);
        if (vida <= 0) {
            this.finalizarBatalha(pokemonDefesa.nome);
        }
        jogador == "jogador" ?
            localStorage.setItem("pokemonInimigo", JSON.stringify(pokemonDefesa))
            : localStorage.setItem("pokemonSelecionado", JSON.stringify(pokemonDefesa));
    }

Veja abaixo a gif da lógica já em funcionamento:

Como o objetivo desse projeto era apenas mostrar que você pode pegar o que aprende em um curso (consumir a API do pokemon) e ir além, as informações fica no local storage (passivo de burlar a vida e vencer a partida). Claro que se fosse um jogo de verdade todas essa regras estariam em um backend

A próxima etapa vai ser:

• dar vida a IA (para jogar sozinha)
• adicionar o percentual de dano/defesa baseado no tipo.
• Adicionar efeito de ataque (algum CSS dando o Dano)
• Adicionar som ao girar o dado (irei analisar a complexidade acho que deve ser simples)
• Adicionar som ao atacar (irei analisar a complexidade acho que deve ser simples)

Feito isso a versão 1.0.0 será encerrada.

Regras de ataque critico e jogar dado para se defender ficará para a versão 1.1.0

O modo campanha será feito mas não sei quando, pois terminando isso devo focar em um outro projeto por um tempo para depois voltar para o jogo pokémon.

O que quero mostrar aqui, principalmente para os iniciantes é que você pode pegar um conteúdo que todo curso passa (consumir API do pokémon), e criar algo diferente para treinar suas habilidades.

O desenvolvimento está em andamento então pode ter alguns bugs ainda (por exemplo quando finaliza a batalha tem que voltar a tela inicial), mas caso queira acessar o projeto em andamento segue o link - https://jogopokemon.netlify.app/

Até a próxima etapa.

• https://www.tabnews.com.br/saraiva/projeto-jogo-pokemon-apresentacao
• 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-parte-2-alteracao-da-api-e-inicio-do-codigo
• https://www.tabnews.com.br/saraiva/projeto-jogo-pokemon-parte-3-um-tapa-na-listagem-e-feito-a-selecao-dos-pokemons