O arquivo html do projeto possui algumas características importantes. Usamos um onload e depois movemos para a init(); onde ele chama e define alguns parâmetros importantes para a manutenção do programa, primeiro ele chama tamago() e depois ele chama a main(), a main() como será a transição de jogos usando a window.troca este valor é alterado em outras partes do código gerando o gameflow que desejamos.
Quando fomos construir a função tamago() nos deparamos com a necessidade de saber ao certo o que era o nosso jogo, com estudos feitos descobrimos que ele se assimila com uma máquina de estados finitos, onde os estados serão como o pet virtual está sentido, por isso definimos um objeto que terá as principais propriedades.
Criamos e chamamos uma função chamada de init() , está por objetivo inicializar a imagens assim como checar se está é a primeira vez que o programa é aberto usando um localStorage, caso seja primeira vez os valores das propriedades e outros valores são inicializados usando os valores definidos no início, entretanto se este não for o caso estas propriedades recebem os valores que tinham antes de a página ser finalizada, depois vem for() que preenche o vetores e inicializando as imagens e por último é chamado o nosso laço principal main_1().
A main_1 é nosso laço principal, é chamada constante mente pela função window.requestAnimationFrame(), esta tem que estar ligada a uma variável por isso criamos a variável vari fora do escopo da função para que mais tarde seja possível cancelar laço ,adicionamos escutadores para eventos de mouse e em seguida chamamos a função update(tframes) está tem como objetivo mudar os frames do personagem quando ele muda de estado e fazer os frames rodar na spritesheet.
Já que a window.requestAnimatinFrame () roda a 60 frames por segundo por isso criasse um cont e divide este por 60 , com isso a cada 60 execuções teremos um número inteiro e esse é aproximadamente igual ao tempo que precisamos para executar algumas funções mais a frente , por último dentro da main_1() checamos se é a primeira vez que abrimos o código, caso se abre a tela inicial do jogo ,do contrário ela chama as funções desgaste(),tamagochi() e render() .
A função desgaste() ela tem como objetivo principal fazer com que o status do pet virtual desça em função de um intervalo de tempo. Ela é composta basicamente de If() de maneira que mesmo que diminuindo esta não desce para menos de 0.
Em seguida vem a função tamagochi() que é tem como função principal definir o estado do pet virtual a primeira coisa que se deve perceber é que existe uma checagem para o caso do pet estiver dormindo se este for a propriedade moce.energia recebe mais 1 de energia toda vez que s for um múltiplo e 5.
Se ele estiver acordado a função chama as funções sujeira2(), doença2(), felicidade2(), fome2() e crescimento2(). As primeira 4 são funções que funcionam de maneira similar a função desgaste() , com a diferença que esta muda o estado do pet virtual e causa consequências negativas ao jogador, a última a função de crescimento2() é a função que da experiência para o jogador para caso o pet esteja feliz e saudável está que quando chega 100 é zerada e o jogador recebe mais 1 ponto em moce.idade.
Voltando a main_1 temos a última função chamada por ela a render() ela está dividida em outras funções que desenham passo a passo o pet virtual.
Começando pela renderBG() que desenha o background , perceba que quando colocamos o src da imagem em vez de um numero colocamos uma varável que permitirá que mudemos o background com eventos de botão.
A próxima é a perRender() que desenha o personagem na tela , se lembrar mais cedo foi dita que a função update(tframes) é responsável pela mudança do frame da sprietsheet, ela é aplicada agora , a variável Anim entra para definir em que lugar será cortada a imagem usamos o context.drawImage(src,sx,sy,sw,sh,x,y,w,y) , cortando está em sucessão temos a animação do personagem.
Em seguida vem a que desenha a cortina quando mandamos o personagem tomar banho, desta vez em vez de cotar a imagem, aumentamos o valor w da imagem e diminuímos para fazer a animação.
drawFrame(),renderStats(),renderButton() são todas funções que desenham no canvas , todas elas desenham usando context.drawImages() , seus tamanhos podem variar de acorda da necessidade, um exemplo de uma delas.
Por último temos os eventos de mouse que são auxiliados pela getMousePos() está função retorna a posição do mouse que quando comparada com a posição dos botões colocados na tela, ativa suas diferentes funções como jogar um mini jogo ou alimentar o pet virtual por exemplo, de maneira mais especifica fazemos um for(), que tem um variável i que roda um vetor de objetos e dentro deste for um if() que compara a posição do mouse com a imagem caso o clique tenha sido em uma região que pertence alguma imagem , entra-se no if() onde existe um swtich() que define ação baseada na imagem clicada, caso o mesmo botão tenha várias funções , como o de alimentar , é feito um novo swtich dentro do anterior em que uma variável auxiliar define o que deve ser feito.
Nenhum comentário:
Postar um comentário