Oi pessoal tudo bem?
Guilherme blz? Mé dá uma mãozinha aqui, tô apanhando bastate! Estou usando o VSC para tentar rodar o programa que fiz nas aulas. Já coloquei ele dentro de um HTML simples dentro de e estou tentando rodar no chrome, partindo pelo VSC mesmo com a tecla F5, executando o HTML, mas não tá executando o código, a tela fica branca! Obs, no HTML não tem nada, só o JS. O que tá faltando?
O jogo tá certinho quando roda no p5.js. Valeuuuu!
Olá, Adriano! Tudo bem com você?
Essa é uma iniciativa muito bacana e já vai te ajudar a se habituar com os editores de código. Você pode também seguir no curso com o editor web do p5.js e após finalizá-lo poderá trabalhar no VsCode ou Sublime Text.
Não aparece nada no seu html porque o p5.js é uma biblioteca JavaScript. Essa biblioteca foi pensada para educadores, artistas e iniciantes em programação. A ideia é facilitar a escrita de código durante a elaboração da lógica e deixar o html e css "pré-prontos" para o uso. Dessa forma, se você não tiver a biblioteca na sua máquina, o interpretador não conseguirá compreender as funções pré-prontas como a draw() ou preload().
Não é necessário muita coisa para rodar o p5.js em editores de código, basta você salvar os arquivos e visualizar o projeto no seu navegador. Vou deixar um pequeno tutorial:
Acesse website do P5.js .
Selecione o link "complete p5.js " que possui a biblioteca e o projeto de exemplo.
Descompacte o arquivo p5.zip .
O conteúdo do arquivo p5.zip :
| addons | empty-example | p5.js |
|---|---|---|
| inclui arquivos extras que você pode usar em projetos mais avançados que lidam com som e outros tipos de mídia | inclui um arquivo HTML e um arquivo Javascript que podemos adicionar código para fazer desenhos e animações | a biblioteca p5.js usada para fazer seu código funcionar corretamente - você nunca precisará editar este arquivo |
Abrir Sublime Text
Clique em Arquivo -> Abrir (File -> Open)
Encontre a pasta 'empty-example' na sua pasta Downloads
Clique na pasta 'empty-example'
Clique em 'Abrir' (Open)
Você pode simplesmente adicionar uma extensão do p5.js
Após a instalação da extensão, pode abrir o arquivo html e rodar no seu navegador favorito.
Espero que as informações tenham ajudado.
Para mais informações, você pode acessar o conteúdo desse tutorial (em inglês): https://coursescript.com/notes/interactivecomputing/gettingstarted/
Um abraço e bons estudos!