Javascript - Clicker de cookies
Fonte de atribuição : https://github.com/becodeorg/BXL-Swartz-5.34/blob/main/1.The-Field/12.Javascript/cookieClicker.md
Link para a versão ao vivo : https://teo-cozma.github.io/Javascript/
Membros da equipe
- Brigita Sabutyte (Javascript e HTML)
- David Tirel (Javascript)
- Teodora Cozma (HTML e CSS)
Idiomas
Ferramentas
- Código do Visual Studio (editor de texto)
- Discord, Google Meet, Github, Replit (Comunicação)
- Adobe XD (prototipagem)
- Serviço de validação de marcação W3C (inspeção HTML)
- Serviço de validação CSS W3C (inspeção CSS)
- Google Lighthouse (inspeção de desempenho)
Imagem
Recursos
O que é um Clicker de Cookies?
- http://orteil.dashnet.org/cookieclicker/
- https://en.wikipedia.org/wiki/Cookie_Clicker
- https://cookie-clicker2.com/
- https://particle-clicker.web.cern.ch/
- https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s
Tutoriais para nosso projeto:
https://www.flaticon.com/free-icons/cookie
https://www.youtube.com/watch?v=uUgOBe_wb6E
https://www.youtube.com/watch?v=j_nI6G3ZDiE
https://codesource.io/how-to-disable-button-in-javascript/
https://stackoverflow.com/questions/57477529/disable-a-button-if-empty-input
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=vU2akkcSV-g
https://www.youtube.com/watch?v=PSEhNb69XpI
https://www.youtube.com/watch?v=KgYkgBno5Gs
https://stackoverflow.com/questions/8583524/how-to-set-time-limit
Serviços de validação:
- https://validator.w3.org/#validate_by_input
- http://jigsaw.w3.org/css-validator/
Registro do projeto
Primeiro dia (25/10)
Revisão de instruções
- O que: Cookie Clicker.
- Por quê: projeto de consolidação (principalmente de habilidades em Javascript).
- Quando: A partir de hoje, 4 dias completos de trabalho em equipe, até 28/10.
- Como: em grupos de três, colaborando e utilizando as respectivas linguagens de código.
- Quem: Teodora Cozma, Brigita Sabutyte, David Tirel.
- Quais papéis? Há frontend, backend e gerenciamento de projetos. Todas as funções podem ser intercambiáveis e o código é compartilhado de qualquer maneira, mas no geral, uma pessoa pode se concentrar mais em uma determinada função.
- Back-end (Javascript): David.
- Backend (Javascript) + Frontend (estrutura HTML): Brigita.
- Frontend (CSS + talvez Sass) + Gerente de Projeto: Teodora.
Brainstorming
3 seções:
Seção de cookies: Cabeçalho 1 para o contador de cookies. H1 para a quantidade de cliques.
- Cookie interativo + seu título + contador de cookies = 1ª seção.
- “Dentro do HTML, coloque um botão de clique que irá incrementar um contador e um rótulo inicializado em 0 para exibir o referido contador.”
Seção de pontuação:
- Seção de pontuação: contagem de pontuação.
- 1 cookie: o cookie é um botão próprio.
(Cookie + pontuação = metade esquerda)
- Seção da loja:
- Conquistas e atualizações?
- Seção de loja = clicker de atualização de botão + contador de pontos = 2ª seção:
Faça um multiplicador (pontos duplos ou triplos) -> esta etapa para revisão
Preço multiplicador (comprado)
Atualização de pontuação
Contador dentro do multiplicador
Aumento de custo (o custo do multiplicador mais alto)
- Display dedicado também (um botão abaixo?)
Passo 12: elemento necessário, alguns botões estão desativados. ex: abaixo de 20 pontos, o jogador não consegue acessar determinados recursos.
(metade direita)
Exemplo (referência): http://orteil.dashnet.org/cookieclicker/.
Tarefas para hoje
Esta manhã (10h30 - 12h30)
- Pesquisa sobre o projeto (instruções de trabalho).
- Veja o que corresponde às etapas obrigatórias atuais (os bônus estão reservados no momento).
- Uma análise aprofundada do código do clicker de cookie original.
(https://www.youtube.com/watch?v=2Dx76lD8Scc&t=69s) Descrição do jogo (e suas qualidades existenciais!)
- 1 clique = 1 biscoito.
- 15 cliques = 15 cookies = 1 cursor (comprado).
- 10 cursores = 1 cookie/seg (CpS).
- 100 biscoitos = vovó que produz e comercializa seus biscoitos.
- Os biscoitos são a moeda que permite comprar fazendas, minas, fábricas, etc. = economia dos biscoitos que é penetrante e avassaladora. Isso se expande para um eventual cookieverse.
- Transcendência da existência = Ascender e começar de novo.
- O biscoito dourado surge aleatoriamente.
- O que acontece com a avó: potencial rebelião e apocalipse. Salve todos com ganhos econômicos ou explore-os para gerar mais riqueza.
- Pequeno "hack de código" no console: Game.Earn(x).
(http://orteil.dashnet.org/cookieclicker/)
Registro de informações/histórico de versões
- Economia segura
- Estilo de exibição do cursor
- Recurso de importação/exportação: recupere um jogo salvo de uma versão antiga (desativado após uma semana)
- Botão vender
- Biscoito dourado aleatório (como determinar sua frequência)
- Clique em estatísticas
- Clicando aumenta
- Descontentamento e apocalipse da vovó -> criaturas geradas que consomem biscoitos
- Seção do menu de estatísticas para atualizações e conquistas
- Conquistas de sabor de leite -_-
- Menu de opções:
- Geral: salvar + salvar automaticamente, exportar/importar, limpar e salvar;
- Configurações: volume, gráficos sofisticados, sons... tudo isso são bônus.
Por trás do código (investigado com o inspetor)
- Estrutura HTML (o que podemos reter para a aparência):
- Head : todos os links para estilos e scripts (o título está piscando...)
- Corpo :
- Sem invólucros de banner
- Barra superior: direitos autorais e link para mídias sociais (como um rodapé, mas no topo da página). Definitivamente precisaremos incluir os direitos autorais em nossos nomes, este ano, e links para nossas páginas de destino (?).
- Div id:"game" : a seção real do jogo.
- As seções estão sob a tag "seção" e possuem nomes próprios dependendo de sua posição (esquerda, direita, meio) + separadores.
- Âncoras: são seu próprio tipo de classe? Procure.
- Âncora de cookie = cookie clicável!!!
- Adicionamos um nome fictício de backery?
- Contador de cookies: x cookies; por segundo: s.
- Criamos um menu com opções, estatísticas, informações,...?
- Além disso, subseção para cada item de menu?
- (Problema técnico: a página continua atualizando para atualizar os dados, é difícil permanecer em uma seção para dar uma olhada no código, antes que ele pisque)
- Etiqueta "b": para que serve?
- Algumas divs estão ocultas?
- Seção da loja:
- Compra/Venda: devem estar vinculados a eventos Javascript, pois seus valores mudam a cada clique.
- Produtos (minas, avós): quando o jogo começa, estes devem estar escondidos/obscurecidos. (Outra referência interessante: https://particle-clicker.web.cern.ch/)
Esta tarde (13h30 - 17h00)
- Reunindo ideias, pesquisas e reunindo recursos.
- Que dificuldades/desafios técnicos podem surgir?
- Como funciona o multiplicador?
- Exiba um layout de seções e seus botões (embora isso não seja particularmente preocupante).
- Entendendo como aplicar Javascript.
- Reúna recursos e informações sobre como escrever o código de cada botão.
Qual é a nossa metodologia de trabalho em grupo?
Como funciona cada um de nós?
- Sozinho
- Pesquisa focada
- Codificação focada
- Fazemos "sessões de codificação ao vivo", onde compartilhamos nossa tela e digitamos o código, e cada um dá sua opinião na hora?
Como podemos fazer com que esse prazo funcione para nós?
Como dividimos o trabalho de codificação? Como determinamos as tarefas a seguir e as delegamos? Se cada um de nós trabalhar no seu próprio tempo, como chegaremos a acordo e consolidaremos o código final?
Decidir como comunicar e compartilhar informações:
- No Discord, sala 4 (chat + chamada).
- ... (outras ferramentas de colaboração).
- Definitivamente Github, os repositórios serão compartilhados.
Decidindo sobre os próximos passos:
- Terminar a pesquisa hoje?
- Começar a planejar (+ escrever?) a estrutura HTML? A estrutura Javascript?
- Seguimos cada passo ao pé da letra?
- Foi decidido que pelo menos as etapas obrigatórias (todas as entradas e botões que possuem as funções mais importantes) serão incluídas, e os bônus foram reservados por enquanto (mas poderão ser incluídos se possível).
- Estas etapas devem ser seguidas uma após a outra ou algumas ao mesmo tempo?
- Esta é uma questão importante a ser levantada já que as funções são compartilhadas: 2 pessoas colaborando no backend, 2 pessoas no frontend.
- Portanto, em Javascript, essas etapas seriam distribuídas?
- Quando se trata de realmente construir o projeto, quanto retiramos do original e quanto o tornamos nosso?
Método de trabalho diário:
- Cada um de nós trabalha sozinho no início e, no final do dia, compartilhamos nosso código via Discord e depois “confirmamos” tudo no Replit.
Pensando no futuro – a parte da avaliação
- Avalie regularmente o progresso e certifique-se de que os recursos essenciais estejam incluídos.
- Atualize regularmente o ReadMe.
- Perto do final (no último dia, ou mesmo durante o processo de codificação), utilize as ferramentas de validação e desempenho (ver Lighthouse e ferramenta de validação W3C); talvez na quinta-feira.
Passos desta tarde (14h30 - 16h30)
- Mais pesquisas e mapeamento das tarefas para amanhã:
- Brigita: Pesquisa e redação de HTML.
- David: Pesquisa Javascript.
- Teodora: pesquisa visual e prototipagem.
Segundo dia (26/10)
Reunião matinal às 9h:
- Etapa 5 concluída.
- Compartilhando código.
- Questões técnicas: conectar o HTML com o Javascript, fazer com que as funções funcionem corretamente.
- Além disso, os bônus são para os jogadores, portanto, a etapa 11 e seguintes são obrigatórias.
- Autoclicker está sendo feito por David.
- Multiplicador feito por Brigita; pendente também.
- Resolvendo problemas em scripts.
Para esta manhã (9h30 - 12h30)
Continue as etapas atribuídas. Analise quaisquer problemas. Reunião às 13h30 para discutir o progresso e resolver quaisquer problemas.
Para esta tarde (13h30 - 16h30) Teo: deixe o site responsivo. Nota: os botões multiplicadores também devem incluir o custo! + encontre o script para desabilitar determinados botões de acordo com a quantidade de cookies. David: compartilhar funções; função de carregamento resolvida. Brigita: código e funções compartilhadas; problemas de sintaxe resolvidos.
Reunião Scrum (16h30 - 17h00)
O que foi feito?
Quais problemas surgiram e foram resolvidos?
- Problemas com o multiplicador.
Quais são os próximos passos?
Problemas :
- Descobrindo como centralizar elementos !!!!!!! (Tive que refrescar minha memória, novamente).
- Como desabilitar um botão usando Javascript: dificuldades de codificação.
- Salvar e Carregar não funciona com o multiplicador.
- Não foi possível continuar usando o Sass devido a problemas de compilação no CSS principal. Então, de volta ao estilo com CSS vanilla.
Quais problemas corrigir amanhã:
- Botões Salvar e Carregar;
- Obtenha o multiplicador aumentando em 2 (novamente);
- Ativar/desativar botões dependendo das condições (Etapa 12);
- Bônus: Etapa 11.
Terceiro dia (27/10)
Reunião da manhã (9:00)
Encontro noturno (16h45 - 17h00)
Quarto dia (28/10)
Reunião da manhã (9h00 - 9h30)
O que precisa ser feito hoje:
Trabalho da tarde (13h30 - 16h00)
Resultados =
- Desempenho = 91;
- Acessibilidade = 95;
- Melhores práticas = 100;
- SEO = 92;
Relatório pós-projeto (16h20 - 17h00 e amanhã 29/10) :
- Questões técnicas restantes: multiplicador. Será revisado novamente amanhã.
(29/10)
