[3ª parte] Criando um jogo web em 30 minutos com IA.

De repente uma série, mas como foi divertido, tudo bem.

Agora, com o aumento gradual de bugs e consultas para pequenas correções,

parece difícil registrar todas as consultas, mas vamos tentar anotar.

Q13. No jogo acima, adicione uma área de canvas para exibir a imagem de fundo, o personagem e os monstros acima da área do console.

-> A partir daí, solicitei essa consulta para adicionar gráficos também, adicionei a área do canvas e adicionei-a a três arquivos separados, separando as funções necessárias. Nesse momento, adicionei a funcionalidade de desenhar o fundo, personagem e monstro, juntamente com a health bar sobre o personagem e o monstro. (Uau!), foi dito que hero, goblin, orc, troll, dragon e background precisavam ser preparados separadamente, então solicitei a geração de imagens em uma nova guia no perplexity (modelo flux, tipo ilustrador).

Como a geração de imagens não funcionou corretamente ao inserir texto em coreano, fiz a solicitação da seguinte maneira:

Q13.1. fantasy, hero, right side, 2d pixel, 100x100size, character draw

Q13.2. fantasy, goblin, right side, 2d pixel, 100x100size, character draw

Q13.3. fantasy, orc monster, left side, 2d pixel, 100x100size, draw it.

13.4. fantasy, troll monster, left side, 2d pixel, 100x100size, draw it.

13.5. fantasy, dragon monster, left side, 2d pixel, 100x100size, draw it.

13.6. fantasy, forest, width 800pixel, height 400pixel, draw images

Q14. Exiba todo o código-fonte novamente.

-> Solicitei a saída completa para a reflexão.

Q15. A parte final do arquivo game.js está faltando. Por favor, exiba apenas esse arquivo novamente.

-> Houve uma pequena omissão na parte final do arquivo game.js, então solicitei a saída novamente apenas deste arquivo.

Q16. O arquivo game.js é muito longo. Seria possível dividi-lo por funcionalidades principais?

-> Como um único arquivo js ficou muito longo, solicitei a separação por funcionalidade para facilitar a manutenção posterior e foi refletido como abaixo.

Sim, claro. Podemos dividir o arquivo game.js por funcionalidades principais para torná-lo mais fácil de gerenciar. Vamos dividir os arquivos da seguinte forma:

characters.js: Definição das classes Character, Player e Monster
items.js: Definição das classes Weapon e Armor e dados relacionados
game.js: Classe Game e lógica principal do jogo
ui.js: Funções relacionadas à interface do usuário (desenho de canvas, atualização de estado, etc.)
main.js: Funções relacionadas à inicialização e execução do jogo

Q17. O arquivo main.js está faltando. Por favor, exiba apenas esse arquivo novamente.

-> O quinto arquivo final também teve uma omissão no final, então solicitei a saída novamente.

Q18. Exiba novamente o código-fonte html para incluir os arquivos js separados.

-> Solicitação de saída do código-fonte html que inclui os arquivos separados.

Q19. Há um bug em que a health bar não é exibida no canvas durante a batalha. Verifique o código-fonte e corrija-o.

-> Embora seja exibido normalmente, a health bar é exibida apenas na primeira vez e não durante a batalha, então foi solicitado o conserto.

Q20. Ocorreu um erro ao desenhar monsterImage em ui.js. Por favor, corrija-o.

-> Houve um erro na função, então foi solicitado o conserto.

Com isso, o trabalho do horário de almoço foi concluído e o resultado funciona bem.

https://ggoban.com/hof/