Como criar jogos baseados em texto com HTML, CSS e JavaScript
Sempre me envolvi com programação e o ensino dela (por isso fundei a Code Prestige para jovens iniciantes na área até pessoas de maior nível técnico). No entanto, recentemente comecei a minha jornada sob uma outra perspectiva: ensino de programação para crianças.
Se você acha que programar é complicado, imagine o quão abstrato para as crianças conceitos como: orientação a objetos, funções, variáveis, repetições (loops), depuração (debug), etc, são.
Então, para começar de forma mais tranquila a introduzir o pensamento computacional na cabeça destes pequenos, comecei a trabalhar com jogos de tabuleiro e jogos digitais. Feito isso, passamos para uma nova fase: produzir jogos digitais.
Para que uma criança consiga assimilar tantos conceitos e produza algo intangível, precisamos de abordagens criativas. Foi na busca desta abordagem que me deparei com o Twine, uma excelente ferramenta para a criação de jogos baseados em texto.
Versão em vídeo
Além das instruções que serão dadas aqui no texto, você também pode acompanhar a versão em vídeo deste conteúdo!
Jogos baseados em texto
Esse tipo de jogo antecedeu os jogos de apontar e clicar (point-and-click) e foram uma grande febre quando surgiram. A ideia é extremamente simples: apresentamos ao jogador um contexto sobre o universo em que o jogo está inserido, e então damos uma narrativa que é controlada pelo jogador. A cada opção selecionada pelo jogador, a história é direcionada para um caminho específico, no final resultando em múltiplas possibilidades de finais.
Se você é fã deste tipo de gênero, já deve ter experimentado jogos atuais como Heavy Rain, Beyond: Two Souls e o mais recente, Detroit: Become Human. Apesar de serem jogos muito bem trabalhados nos seus modelos tridimensionais, trilhas sonoras, jogabilidade e afins; seu principal elemento continua sendo a narrativa baseada em escolhas, herança do tipo de jogo que estamos discutindo.
Só que mesmo sendo um jogo simples, o esforço para programá-lo em tecnologias atuais é muito maior do que as crianças são capazes de fazer hoje. Mas com o Twine tudo ficou bem mais simples e direto.
Criando jogos baseados em texto
O Twine é uma ferramenta de código aberto desenvolvida originalmente em 2009 pelo engenheiro de software Chris Klimas. O seu objetivo era criar uma maneira fácil de contar histórias interativas e não lineares.
A aplicação possui versões que podem ser instaladas no Windows, Linux e Mac; mas há também uma versão web disponível neste link.
Cada jogo criado na plataforma é chamado de “História”. Podemos criar uma nova clicando no botão “+ História” no menu vertical do lado direito do site.
Após inserir um novo nome para a história, somos redirecionados para um plano cartesiano. É nesta tela que vamos desenhar todo o resto do jogo. Cada passo do jogo é definido de forma bem intuitiva, através do bloco chamado de “Passagem”. O jogo começa com uma passagem inicial:
Ao dar um duplo clique na passagem, um modal se abrirá e é lá onde vamos inserir os comandos do jogo. O texto digitado é exibido normalmente, mas para inserir “links” (e quando digo link, entenda como as escolhas que iremos oferecer ao jogador), usamos a seguinte sintaxe:
[[<ação> -> <nome_da_passagem>]]
Para entender melhor o que isso quer dizer, partiremos para um exemplo mais prático. Considere que na passagem inicial a gente insira o seguinte roteiro:
Você está com sede. Do lado direito, há uma lanchonete e do lado esquerdo um lago. Para onde você vai?[[vou para a lanchonete -> lanchonete]]
[[vou para o lago -> lago]]
Esse jogo será reproduzido na seguinte maneira no mapa.
Bem legal, né? Agora, já podemos testar o nosso jogo. Para isso, existem duas opções possíveis:
- Testar: o jogo é executado em modo de debug. Aqui temos uma visualização de variáveis e fluxos em tempo de execução.
- Jogar: o jogo é executado como se você fosse um jogador normal.
Ao clicar em qualquer uma das opções, o jogo vai abrir em um outra aba do navegador.
E de maneira simples assim, conseguimos fazer o nosso jogo! Basta criarmos mais passagens e conexões entre elas para oferecer mais opções de caminhos e finais aos jogadores.
Conclusão
O funcionamento do Twiner é bem simples. No entanto, sua API nos possibilita uma verdadeira infinidade de opções para o nosso jogo. Desde condicionais, loops, estruturas de dados, enfim — a ferramenta é extensa e bem completa. Vale a pena conferir!
Se vocês gostaram deste conteúdo, sinalizem nos comentários que podemos montar uma série para explorar todas as funcionalidades!
Referências
Gostou? Recomende 👏 este artigo e acompanhe nossa publicação para não perder os próximos artigos!
Siga nossa publicação e não perca os próximos artigos! http://www.codeprestige.com.br • Facebook, Twitter, Youtube
Siga o autor deste artigo e troque uma ideia com ele! http://www.diegopinho.com.br • Twitter, LinkedIn
Aprenda mais com nossos cursos de programação online!
ECMAScript 6 • ECMAScript 7 e 8 • React 16 • VS Code • Mais