Como criar seu próprio jogo de palavras

Como funciona um jogo da web como o Wordle? O que você precisa saber para criar seu próprio jogo?

Nem todo jogo requer uma grande equipe de desenvolvimento e anos de desenvolvimento para ser um sucesso. O Wordle, por exemplo, foi criado por Josh Wardle para seu parceiro Palak Shah em um curto período de tempo e, apesar de sua simplicidade e poucos recursos, sua incrível popularidade lhe rendeu um resgate do New York Times.

Como funciona um jogo da web como o Wordle

Se você tem uma ideia para um jogo simples, mas viciante, que pode chamar a atenção do mundo e lhe render muito dinheiro, é perfeitamente possível escrever você mesmo um aplicativo da Web como o Wordle.

A estrutura do site Wordle é, como qualquer site, HTML, uma linguagem de marcação de hipertexto. Este é o código que todos os sites usam para dizer ao seu navegador onde colocar os elementos quando a página é carregada. O site que você está lendo atualmente é codificado em HTML, fornecendo não apenas o conteúdo real, mas também instruções para exibi-lo, desde a posição do menu até o tamanho da fonte.

Além do HTML, existe o CSS, Cascading Style Sheets: é uma adição ao HTML para facilitar o layout dos elementos, sejam eles propriedades de uma imagem ou um bloco de texto. Com CSS, se você tiver várias páginas em seu site, poderá definir suas propriedades visuais uma vez, em vez de cada página.

Se você deseja criar páginas da Web, precisa aprender HTML e CSS, embora muitos serviços permitam que você faça isso sem escrever uma única linha de código. Esses serviços oferecem a capacidade de arrastar e soltar seus elementos em uma interface muito avançada e assumir o controle de todo o HTML e CSS.

Para que um site seja totalmente interativo como o Wordle, você também precisa de JavaScript para converter páginas HTML e CSS estáticas em páginas mais dinâmicas, seja uma caixa de pesquisa ou uma barra de ferramentas. O JavaScript pode manipular vídeo, 2D ou 3D, armazenar informações inseridas pelo usuário, carregar dados de um banco de dados, realizar cálculos, executar códigos predefinidos de acordo com uma determinada ação do usuário, etc.

Como Josh Wardle explicou ao TechCrunch, o Wordle foi escrito em JavaScript, código que é carregado quando a página é carregada, permitindo que o jogo seja jogado offline após a conclusão do carregamento inicial. Os navegadores modernos podem entender e executar JavaScript, que em nosso caso carrega uma palavra de um banco de dados, identifica a entrada do usuário e fornece informações para cada letra.

O próprio Josh Wardle admite que o código do jogo não é particularmente complexo, o que explica por que era possível baixar o Wordle na íntegra antes de o NYT comprá-lo, com todas as palavras em seu banco de dados. Também foi possível encontrar soluções simplesmente examinando o código-fonte do site.

O que você precisa saber para criar seu próprio jogo?

Mas como você mesmo cria um jogo como o Wordle? A programação exige aprendizado, mas você não precisa saber tudo sobre HTML, CSS e JavaScript para criar algo no nível do Wordle. Conforme explicado no Codecademy, uma das técnicas de programação utilizadas é um loop for que verifica cada letra digitada e a exibe na cor apropriada.

Codecademy é um dos sites onde você pode aprender HTML, CSS, JavaScript e muitas outras linguagens de desenvolvimento web gratuitamente. Os exercícios são bem estruturados e você sempre aprende fazendo direto no seu navegador. Você verá como fazer isso e poderá ver as consequências diretamente. Alguns recursos avançados e tutoriais exigem uma assinatura paga, mas muito já pode ser aprendido gratuitamente.

Treehouse vai além do Codecademy e você precisa pagar $ 25/mês para usá-lo (avaliação gratuita disponível). É um recurso mais profissional e eficiente para aprender HTML, CSS, JavaScript e muito mais, mas vai muito além do que você precisa para um jogo como o Wordle. Considere se você quer ir mais longe.

O oposto de Tree House, Dash . O site cobre apenas o básico de HTML, CSS e JavaScript, mas é totalmente gratuito e especialmente adequado para iniciantes. Tudo é gerenciado diretamente no seu navegador e, como o Codecademy, você aprende fazendo para aproveitar ao máximo o que esses idiomas têm a oferecer.

Esta lista está longe de ser exaustiva, especialmente porque são apenas recursos em inglês, você pode encontrá-los facilmente em francês, mas eles são uma boa base para começar a aprender sobre HTML, CSS e JavaScript. Cabe a você jogar… e codificar!