🔢 Aprenda HTML, CSS, e JavaScript com esse projeto de um jogo online de adivinhação 🪄

🔢 "Adivinha meu número" 🪄

Quando mais novo, ganhei um jogo que basicamente eram 6 pequenos cartões quadrados de madeira, com vários números escritos em cada cartão, conhecido como “Jogo da Idade”. Basicamente o jogo consistia em adivinhar o número (de 1 a 63) pensado por alguém, utilizando esses cartões.

O segredo por trás era ao mesmo tempo, simples, e fascinante! E como eu estava começando a aprender a programar na época em C, decidi tentar replicar aquele jogo num sisteminha em C sendo executado no terminal.

Desde então, sempre que aprendo uma nova linguagem, depois de executar um “Hello World”, recriar esse joguinho com a nova linguagem me ajuda a treinar alguns conceitos. Há um tempo já tinha recriado ele apenas com HTML, CSS e JavaScript, e decidi agora compartilhar online.

Você pode utilizá-lo para treinar seus conhecimentos em HTML, CSS e JavaScript, e aqui vai a explicação para quem quiser entender toda a lógica do seu funcionamento, e vários conceitos bem interessantes por trás do site:

Primeiramente, como citado, o “Jogo Online” foi construído utilizando apenas HTML, CSS e JavaScript. Dessa forma, a gente tem uma implementação de uma aplicação funcionando como uma espécie de “SPA – Single Page Application”, sem a utilização de nenhum Framework, ou servidor. Ou seja, o JavaScript controla toda a “dinamicidade” do site, seus elementos HTML e estilização em CSS. JavaScript está por trás de toda construção e lógica.

E como de fato funciona a “MÁGICA”, e o site adivinha o número?

É tudo matemática.

De forma resumida, os cartões são construídos através de uma sequência lógica, e o script recupera o menor número do cartão apresentado onde o usuário respondeu “Sim”. Faz a soma e adivinha o número, por meio das somas de potências de base 2. O segredo está nos números apresentados. Confuso, não é?! Aqui vai um vídeo com a explicação mais detalhada desse princípio: Explicação da adivinhação do número por cartelas

Sobre o código do jogo:

O site parece adivinhar o número por eliminação, e dá a impressão de apresentar números aleatórios na tela. Isso é apenas um “efeito” para melhorar a mágica no site. Mas observe que o site sempre pergunta apenas 6 vezes para o usuário, apresentando os 6 cartões. Essa aleatoriedade é construída através do algoritmo Fisher–Yates shuffle, que faz o embaralhamento de arrays. Você pode conferir como funciona esse algoritmo: Como embaralhar arrays com o algoritmo Fisher–Yates

Além disso, os números de cada cartão também são "embaralhados", utilizando setTimeout() e Math.random()

O HTML é extremamente simples, e os elementos apresentados são construídos através de JavaScript, que é sempre acionado através do evento “onclick”

Por fim, as classes dos elementos ativos também são controladas com o JavaScript e CSS. Tentei utilizar um pouco de animação CSS para apresentar algo mais agradável, e utilizar um pouco de responsividade.

https://adivinhameunumero.vercel.app/
Inspecione a página para ver o código-fonte.