Podemos considerar o CSS como garantido, mas é incrível pensar em como ele se tornou poderoso. O que começou como uma maneira simples de estilizar vários elementos de design evoluiu para muito mais. Agora usamos a linguagem para lidar com tarefas como layouts e animação com facilidade – e sem pensar duas vezes.
Mas não para por aí. CSS também está sendo utilizado para construir interfaces de usuário totalmente interativas. Coisas que costumavam exigir JavaScript agora podem ser feitas com código que é nativamente suportado em todos os navegadores da web modernos.
Entre os melhores exemplos dessa tendência está o bando de jogos CSS puros que estão surgindo. Eles são divertidos de jogar e nos dão uma dica do que pode ser alcançado com um pouco de criatividade.
Aqui está uma olhada em alguns dos melhores jogos CSS puros no CodePen. Eles variam desde o incrivelmente simples até “uau, o CSS pode fazer isso?” – apreciar!
Pedra Papel Tesoura
Uma sessão de pedra, papel e tesoura é sempre uma ótima maneira de vencer o tédio. Se você não tem um parceiro para jogar, você pode experimentar esta versão virtual. Clique na arma de sua preferência e depois em “Lute!” botão para ver como você fez. O jogo usa botões de rádio HTML e alguns CSS aleatórios para alimentar a partida.
Campo Minado para Git Commits
Este jogo combina a premissa clássica do Campo Minado com a aparência de um gráfico de contribuição do GitHub. Veja quantos quadrados você pode pintar antes de atingir uma daquelas minas incômodas. Novamente, CSS é usado para gerar localizações “aleatórias” para cada mina.
Salve o Mundo dos Demônios
Aqui está um jogo de tiro simples que pede para você eliminar alguns lacaios demoníacos (não, não esses lacaios). Coloque o cursor sobre um demônio e clique para mandá-lo embora. Uma rápida olhada nos bastidores revela que as caixas de seleção HTML e GIFs animados estão fazendo tudo funcionar.
Você Quer Bolo? É melhor você ganhar.
Claro, todo mundo quer um pouco de bolo. Mas este jogo pode deixá-lo louco em sua perseguição, pois requer alguma destreza com o mouse. Passe o mouse sobre uma pequena caixa e evite as pequenas migalhas e granulados. Se você conseguir passar, será recompensado. Mova o cursor muito longe, porém, e você terá que começar tudo de novo.
Adivinhe o filme
Este pequeno jogo estilo trivia / hangman faz uso inteligente do CSS :valide :invalidpseudo-classes para guiá-lo em direção a uma resposta correta. Primeiro, é mostrado um conjunto de emoji que representa um filme. A partir daí, você deve digitar o nome do filme. Mas cada entrada de formulário possui apenas uma única letra válida. CSS dirá se você inseriu o correto (ou você pode apenas olhar o código-fonte).
Não tenho medo de fantasmas
Aqui está outro jogo de tiro – mas com uma diferença. Desta vez, estamos caçando fantasmas em uma configuração tipo whack-a-mole. A diferença aqui é que você tem apenas 15 segundos para trabalhar. É uma boa demonstração de animações de tempo com CSS. Quantos você pode explodir?
Stack ‘em High
Reminiscente do Tetris, este jogo desafia você a empilhar grupos de blocos móveis uns sobre os outros. Pode parecer fácil, mas requer um tempo preciso para acertar. Agora, se eu pudesse encontrar meu velho Game Boy …
Você afundou meu navio de guerra
Pegue um amigo (ou seu alter ego) e jogue um jogo animado de Battleship – movido apenas por CSS. Embora não seja tão secreto quanto a versão física, ele fornece uma boa incursão na lógica condicional. Dê uma olhada no código para ver como funciona.
Brincando com CSS
CSS nos fornece mais do que apenas uma maneira de tornar nossos sites atraentes. Pode trazer movimento e interatividade também.
E, embora os jogos desta coleção possam não ser práticos para o uso diário, eles demonstram o quão poderosa a linguagem se tornou. O estudo desses exemplos pode fornecer uma ideia de como aproveitar o CSS para criar experiências mais interativas.