Este jogo vai te ensinar como usar novas propriedades CSS

CSS é uma linguagem para adicionar estilo às nossas páginas da web. É graças a ele que com o Fredzone você vê a vida em rosa, em particular. É, portanto, esta linguagem que também permite posicionar os elementos de uma página web e, portanto, em particular, centralizá-los.

Mas quem já tocou em CSS vai te dizer: centralizar em CSS nem sempre é fácil, principalmente se estivermos falando de alinhamento vertical. É por isso que surgiu o Flexbox, esta nova especificação nos ajudando a posicionar e alinhar nossos elementos corretamente em CSS. O problema é que essa especificação vem com muitas propriedades e valores novos, e não é fácil lembrar de tudo desde o início.

É por isso que Channing Allen decidiu criar o Flexbox Defense, um jogo que vai te ensinar como usar as propriedades relacionadas ao Flexbox.

Flexbox Defense, um jogo para aprender a usar o Flexbox

O Flexbox Defense vem em duas partes. A parte da direita é o tabuleiro do jogo, que consiste em um caminho por onde circulará um certo número de inimigos, marchando um atrás do outro. Todos vêm da mesma ponta do caminho, e o objetivo é evitar que cheguem à outra ponta.

Como ? Graças aos canhões que, assim que um inimigo se aproxima, automaticamente começam a atirar neles. Depois de um certo número de tiros, os inimigos são derrubados.

O objetivo do jogo é, portanto, usar a parte esquerda da interface do Flexbox Defense. Na verdade, propõe modificar o CSS relacionado aos cânones e seus grupos. O que você precisa fazer é bem simples de dizer: você precisa usar as propriedades do Flexbox para posicionar suas armas de forma a abater todos os inimigos.

A dificuldade é, portanto, dupla. Por um lado, você tem que encontrar a posição certa para cada arma. Por outro lado, uma vez que essa posição foi imaginada, ela deve ser criada com as propriedades do Flexbox, e não é tão fácil assim quando você nunca tocou realmente nessas propriedades.

Felizmente, o jogo lembra as propriedades e seus valores, então você não está sozinho. A dificuldade do jogo aumenta, com mais e mais propriedades para usar, mais armas, e também dois tipos de armas depois de um tempo.

No momento, o Flexbox Defense é composto por 12 níveis. Se você passar por todos eles do início ao fim, você não deve ter muitos problemas (essa não é realmente a questão) e, o mais importante, você deve ter uma melhor compreensão de como o Flexbox funciona.

Em suma, um bom jogo para experimentar, seja você um desenvolvedor ou não. Afinal, também pode ser uma boa introdução ao mundo do CSS. Vimos começos mais simples em CSS, mas pelo menos é divertido.