Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Freeway - sem utilizar p5.js.

freeway_v0.1

Compartilhando minha versão do jogo Freeway. Usei o elemento HTML5 canvas e sua API JavaScript para manipular imagens, controlar fluxos de áudio e renderizar imagens através da captura do elemento HTML5 img com o método getElementById() e atribuindo-o à uma variável, posteriormente sendo manipulada com o método ctx.drawImage(). Assim como eu fiz com o Pong, se quiserem jogar é só clicar no título 'freeway_v0.1', e o link contendo o código disponibilizei no meu GitHub. Agradeço a equipe Alura por trazerem um ótimo conteúdo à plataforma, valeu professor Guilherme Lima!

GitHub

Obs.: O console tá estorando com o erro "Uncaught TypeError: evento is undefined", porém não consegui solucionar, achei estranho pois reutilizei a mesma função que usei no Pong, e no Pong não mostrava tal erro. Também ambos programas estão funcionando normalmente, então é isso.

Como foi para fins educativos peguei umas imagens no Google mesmo, apenas alterei o sprite do Alien de Space Invaders. O mais difícil foi descobrir como carregar e movimentar as imagens sem bugs, já que no Pong utilizava elementos criados apartir do próprio canvas, e sem utilizar o p5.js, tive que quebrar um pouco a cabeça rs.

demo

2 respostas
solução!

Olá, Gabriel! Tudo bom?

Seu jogo está sensacional! Parabéns pelo design e também dedicação em aprofundar seus conhecimentos em JS, HTML e css!

É provável que o erro esteja acontecendo porque talvez esteja faltando definir a tecla que inicializa o evento.

Vou deixar alguns links que podem ajudar você a resolver o problema :

KeyboardEvent - MDN DOCS

HTML DOM KeyboardEvent - W3 SCHOOL

Espero que as informações tenham ajudado!

Um abraço e bons estudos!

Obrigado, Camila Pessôa!

Consegui encontrar o erro, eu estava chamando a função moveAlien(); dentro da função atualizaJogo(); que é executada a cada 20ms, então sempre era executada com um undefined sem capturar o evento de onkeydown. O Alien se movia normalmente porque fora da função já havia document.onkeydown = moveAlien; chamando a função caso houvesse o evento. Antes eu estava focado apenas no "evento", que estava definido, porém com seu comentário: "faltando definir a tecla que inicializa o evento", vi que o erro não era na definição do evento em si, mas sim na inicialização do evento que estava sendo chamada toda hora sem pressionar a tecla, eu cho que teria que pressionar alguma tecla a cada 20ms para que o erro não ocorresse kk. Valeu!