Solucionado (ver solução)
Solucionado
(ver solução)
1
resposta

Problemas ao executar o jogo no html5

Olá pessoal,

Fiz a implementação no editor de códigos sugerido na aula. Gostaria de saber quais ajustes eu preciso fazer para executar esse arquivo dentro do html5? Não acertei fazer as chamadas necessárias aqui, alguém tentou?

1 resposta
solução!

Oi, Rodrigo, tudo bem?

O p5.js faz uma integração automática entre os arquivos HTML, CSS e JS. Para verificar o HTML utilizado no projeto, basta acessar o arquivo index.html dentro do editor do P5.Js, que estará localizado na lateral esquerda ao clicar na seta ao lado do "sketch.js". O código contido nesse arquivo será similar ao apresentado abaixo:

<!DOCTYPE html>
<html lang="en">
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/p5.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.1/addons/p5.sound.min.js"></script>
    <link rel="stylesheet" type="text/css" href="style.css">
    <meta charset="utf-8" />

  </head>
  <body>
    <main>
    </main>
    <script src="sketch.js"></script>
    <script src="p5.collide2d.js"></script>
  </body>
</html>

Porém, caso queira executar o jogo localmente em sua máquina, o primeiro passo é baixar todo o projeto, clicando no menu "File" no canto superior esquerdo da tela ao lado do logotipo do p5, e selecionando a opção "Download".

Captura de tela colorida do p5.js. Nela é mostrada no canto superior esquerda o logotipo do site e ao lado o menu "File" aberto as opções: "new", "save", "duplicate", "share", "download" destacado por um retângulo amarelo, "open", "add to collection" e "examples". O fundo apresenta um espaço de código.

Ao clicar o download será feito e em seguida será necessário descompactar a pasta dos arquivos para poder usá-los. Isso pode ser feito clicando com o botão direito do mouse e selecionando a opção "Extrair tudo".

De posse do projeto, podemos utilizar um editor de código (sugiro o Visual Studio Code) para fazer as edições necessárias. Aqui na Alura, temos um artigo que ensina passo a passo a interligação entre o P5.js e o Visual Studio Code, acesse-o abaixo:

Espero ter ajudado. Caso tenha dúvidas, estarei à disposição!

Abraços!

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓. Bons Estudos!