Não consigo abrir meu projeto final | Lógica de programação: laços e listas com JavaScript

Olá, Mírian! Tudo certo?

Primeiramente, perdão pela demora em obter um retorno.

Para deixar a preview hospedada no site, há um modo pelo próprio GitHub. Vamos lá!

O primeiro passo é abrir o sketch do seu jogo no editor p5.js. No site nós teremos uma aba com a opção "File" no canto superior esquerdo, e ao clicar, irá aparecer "Download". Vamos baixar o arquivo.

Recorte de captura de tela do editor na biblioteca "p5.js", em que a opção "File" foi clicada e está mostrando mais outras opções. Dentre elas está a opção de "Download" preenchido de rosa.

Após ter baixado, você irá clicar na pastinha zipada.

Captura de tela da pasta baixada e zipada.

Depois, precisamos extrair os arquivos. Caso seu sistema operacional não tenha essa opção e você não saiba como extrair, te sugiro este tutorial do WinRar ou este tutorial do WinZip.

Recorte da captura de tela na pasta zipada, mostrando a opção automática do Windows 11 para "Extrair tudo" da pasta.

Vamos precisar desses arquivos na pasta, portanto, recomendo apenas deixar a pastinha aberta enquanto seguimos para o outro passo.

Criaremos um novo e as configurações deverão ser desta forma (mas, claro, com o título que você quiser, e a descrição também!) :

Recorte da captura de tele da criação de um novo repositório no GitHub.

É crucial selecionar a opção "Add a README file", pois vamos precisar dela para configurar.

A parte seguinte da página ficará assim:

Recorte da captura de tela da criação de um novo repositório no GitHub, mostrando da opção "Add a README file" até o botão verde de criar repositório.

Agora, basta criar o repositório.

E vamos voltar à pasta extraída: será necessário selecionar todos os arquivos. Aqui, podemos fazer de duas maneiras: passar direto da pasta, ou, se facilitar, colocar na área de trabalho. Vou passar direto da pasta.

Ao selecionar tudo, podemos arrastar para a tela do repositório criado. Sim, para o próprio navegador! A página do repositório ficará deste modo:

Recorte de captura de tela do GitHub, onde a área de adicionar arquivos via arraste por outra pasta está disponível.

Porém, atenção: os arquivos ainda não foram. Você vai precisar arrastar pela segunda vez.

Após todos os arquivos serem passados para o site, vamos criar essa nova commit.

Recorte da captura de tela de uma nova commit no GitHub.

Ao carregar a página do repositório, vamos nas configurações (última opção da barra a seguir):

Recorte da captura de tela do repositório no GitHub, em que a opção "Settings", ou em português, configurações, está com um quadrado vermelho vazio a marcando.

Nas configurações, vamos na última opção da segunda parte: "Pages".

Recorte de captura de tela das configurações, marcando com um quadrado vermelho vazio e uma seta vermelha a última opção, "Pages".

Ao entrar na opção das páginas, você irá na parte de "Branch" e vai clicar em "None". Uma aba de selecionar o branch irá aparecer, e você irá selecionar o main.

Recorte de captura de tela das configurações do repositório, em que mostra-se a opção "Pages" e dentro dela a parte do "Branch". O retângulo escrito "None" está pressionado, e há uma abinha com duas opções, e a primeira, main, está preenchida por um quadrado com apenas o contorno em vermelho, sem preenchimento. Uma seta vermelha está apontando para o main.

Depois de ter selecionado o main, ele irá mostrar as configurações dessa parte do seguinte modo:

Recorte de captura de tela das configurações do repositório no Github, em que a parte "Pages" está aberta e a parte do "Branch" aparece com a seleção do main, a pasta com o root em aberto e a opção para salvar.

Salve as mudanças no terceiro botão do print acima.

Continuando a explicação (parte 2 de 2)

Você pode sair da página e ir para a do repositório normalmente. Ela ficará carregando com uma bolinha escura. Depois de uns instantes (pode ser um minuto, por exemplo), atualize a página.

Recorte da captura de tela da página principal do repositório no GitHub, mostrando a bolinha marrom de atualização, circulada por um oval de contorno vermelho.

Ao atualizar tudo, aparecerá um check verdinho. Atualizações prontas! Eba!:

Recorte de captura de tela da página principal do repositório no GitHub, mostrando um check verde, de pronto.

Vá nas configurações do repositório novamente.

Recorte da captura de tela da página principal do repositório no GitHub, marcando pelo contorno de um quadrado vermelho sem preenchimento a parte das configurações.

"Pages" novamente.

Recorte de captura de tela das configurações do repositório, em que há uma seta vermelha apontando para a última parte, "Pages".

A primeira coisa que irá aparecer é esta:

Recorte da captura de tela da guia "Pages", onde o título "GitHub pages" aparece o título, a descrição dele e um link.

Conseguimos!

O URL que está ali é o link para o preview do seu repositório. Aqui está o meu link do jogo Pong (contra o computador), por exemplo. Dá para jogar direitinho. =)

Espero que sua dúvida tenha sido sanada! Caso ainda tenha dúvidas, não hesite em entrar no fórum para perguntar.

Abraços e bons estudos!

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

Chegou a hora de transformar