Scrollzz

Turma, Scrollzz é um jogo de quebra-cabeças desenvolvido apenas HTML e CSS, desde o sistema de níveis até as traduções do jogo, tudo CSS! Você pode conferir você mesmo no código fonte que está em meu github: github.com/refusado/scrollzz.

Este puzzle se baseia no movimento de scroll e não é necessário nem mesmo clicar na tela para jogar! Foi idealizado em 2021, quando eu ainda estava aprendendo a andar no desenvolvimento web, mas este ano resolvi refazê-lo e o resultado ficou muito massa! Link para jogar: refusado.github.io/scrollzz/

Como funciona

Todo o sistema do site se da por meio dos eventos de input do próprio HTML, onde é possível "capturar" os eventos com CSS e aplicar diferentes estilos baseado em diversos estados. Sabemos que CSS não é programação, mas podemos fazer uma analogia onde um código em javascript com HTML & CSS assim:

• JAVASCRIPT

botao1.addEventListener('click', () => {
    if (!elemento1.isActive) {
        elemento2.isActive = false;
        elemento1.isActive = true;
    }
});
botao2.addEventListener('click', () => {
    if (!elemento2.isActive) {
        elemento1.isActive = false;
        elemento2.isActive = true;
    }
});

• HTML & CSS

    <input type="radio" name="botoes" id="botao-1">
    <input type="radio" name="botoes" id="botao-2">
    
    <section class="elementos" id="elemento-1"> Conteúdo 1 </section>
    <section class="elementos" id="elemento-2"> Conteúdo 2 </section>

    .elementos {
        display: none;
    }
    
    #botao-1:checked ~ #elemento-1 {
        display: block;
    }
    
    #botao-2:checked ~ #elemento-2 {
        display: block;
    }

Neste exemplo de código em javascript:

• O programa irá esperar por um click nos botões;
• Quando um botão for clicado a lógica irá verificar se o elemento associado a este botão está ativo;
• Se o elemento está ativo não faz nada, mas se não estiver ativo irá desativar os outros e em seguida ativar apenas este elemento.

Ou seja, a lógica permite que apenas 1 elemento esteja ativo por vez e irá sempre ativar um elemento x quando um botão específico for clicado.

Já no código CSS, a mesma coisa acontece!

• Com um grupo de inputs do tipo radio, apenas um pode estar selecionado (quando um é ativado, todos os outros se desativam);
• Com a pseudo-classe :checked do CSS, já temos a verificação: "Quando o input estiver ativo, aplique x estilos";
• Combinando isto com o "seletor de irmão" ~ do CSS, conseguimos aplicar os estilos em um outro elemento HTML irmão do input com base no estado do input! #botao-1:checked ~ #elemento-1 { ... }.

Ou seja, quando um botão x estiver ativo, mostre o elemento associado a este botão e esconda os outros.

Mas...

• "Mas não é escalável..."
• "Mas tem um pior desempenho em comparação com o javascript..."
• "Mas..."

Sim, não tem pq usar isto, é melhor fazer com javascript mesmo ksksksksdksdksdksdksd

Mas... é interessante às vezes explorar as capacidades das tecnologias, não é? Saber as coisas legais que podemos construir com ferramentas que são aparentemente simples, mas no fundo extremamente poderosas. Você pode usar esta lógica em algumas pequenas funcionalidades em um site, sim, mas não é produtivo usar isto para construir um jogo completo.

Bem, quando eu construir o Scrollzz eu ainda estava estudando HTML e CSS (nem sabia javascript), não tinha ideia de onde eu estava me metendo estudando desenvolvimento web e nem imaginava que seria um desenvolvedor. Com a ideia deste jogo veio em mim um insight incrível, quando eu percebi o poder que eu tinha para construir algo incrível só com o pouco que sabia de HTML e CSS... daí para frente foi só subida!

Moral da história

Vejo pessoas próximas a mim que vão em busca de grandes conhecimentos, estudando tópicos avançados, esperando ter todo o domínio em X área para dar início em seus projetos e nunca saem do lugar. Saiba que para tirar uma ideia do papel você só precisa de uma ideia, o resto você encontra no caminho! Manda bala nesse projetinho quando sair do Tab News, beleza?

@refusado