9
PatrikMaltaDev
4 min de leitura ·

Dá pra fazer jogos usando JS/TS sem game engine?

Bom, essa era minha dúvida um tempo atrás... Mas antes de mostrar como coloquei isso à prova, deixe-me apresentar.

Olá, me chamo Patrik e atualmente trabalho como desenvolvedor Frontend. Comecei na programação em meados de 2018, através do desenvolvimento de jogos com a falecida linguagem Flash, e logo depois comecei a estudar C# na Game Engine Unity.

Meu sonho sempre foi ser programador. Mesmo morando em uma fazenda, sempre fazia de tudo para estudar, e na maioria das vezes, quando ia na cidade fazer compras, eu baixava tutoriais de GameDev para poder assistir em casa, já que não tinha internet. Devido às dificuldades, tanto de internet quanto de ter que ajudar na roça, acabei não conseguindo focar no meu sonho, e logo também vi que o GameDev no Brasil é uma profissão injusta e difícil.

Então fui parando de programar aos poucos, até que em 2024 conheci o desenvolvimento web e fui estudando aos poucos, porque eu já não morava mais no interior e já tinha um pouco mais de estrutura. Mas foi em 2025 que tudo mudou, quando vi a vaga para a empresa que trabalho hoje e decidi me candidatar e me dedicar — e no fim deu certo! Hoje tô realizando meu sonho de adolescente.

Agora que já me conhece um pouco, posso continuar contando como consegui desenvolver um pequeno projeto de jogo (uma cópia de Pong) com TypeScript sem game engine.

Como tive a ideia
Essa questão surgiu quando eu estava estudando POO (Programação Orientada a Objetos) em TypeScript, e acabei vendo um vídeo no YouTube de um rapaz que fez um jogo só com Java sem game engine, e fui atrás de tentar fazer algo parecido.

Durante minhas pesquisas, acabei encontrando um porte para JavaScript de uma biblioteca feita para a linguagem C, chamada Raylib. A Raylib se trata de uma biblioteca que permite a criação de aplicações gráficas utilizando OpenGL por baixo dos panos.

Desafios
A primeira coisa que fiz foi procurar a documentação da biblioteca para C para ver os métodos e funções que tinha nela. E, digamos que a documentação oficial funciona, mas para procurar coisas específicas tinha que ficar usando o CTRL + F.

Link da documentação oficial: https://www.raylib.com/

Então decidi usar a Inteligência Artificial a meu favor. Como não tinha nenhuma documentação, a não ser algumas informações no GitHub do porte para Node.js, decidi pegar todos os módulos da documentação oficial, criar arquivos .md e pedir para o Claude criar para mim uma documentação com informações traduzidas (não está muito boa a tradução, mas funciona) e com a função que eu mais queria, que era a pesquisa simplificada.

E acabou que gostei bastante, mesmo não ficando tão profissional. Aliás, foi tudo "vibecodado" essa parte da documentação, então dá para relevar. Você pode ver ela através deste link: https://github.com/PatrikMaltacm/raylib-documentation

Desenvolvimento
Até então eu não sabia o que realmente queria fazer, só sabia que queria praticar POO e fazer algum joguinho simples, então comecei criando a classe principal, que é a "Game". Ela é responsável por controlar a janela do jogo e as instâncias das outras classes (como a da bola e as raquetes), e também detectar colisões e finalizar/reiniciar o jogo.

Como a Raylib se trata de uma biblioteca gráfica, eu tive que desenvolver todos os outros sistemas que o jogo precisava, como a colisão que eu já comentei, física, e renderizar e mapear os elementos visuais.

A pequena "Game Engine" que fiz para o jogo não segue as melhores práticas, acredito eu, e nem o projeto em si segue os melhores padrões de arquitetura, mas para mim o que importou foi que eu consegui matar minha curiosidade e ainda praticar POO com TS, que era o que eu estava buscando no momento.

Finalização
Esse projeto me fez enxergar que o JS/TS é uma linguagem que, mesmo que não tenha sido feita para coisas como essa, consegue ser versátil e dá para extrair coisas muito interessantes dela.

No projeto do jogo em si, não foi utilizada Inteligência Artificial para desenvolver, pois eu queria provar a mim mesmo se era realmente capaz de fazer algo, mesmo que simples, apenas com a documentação e paciência. A IA foi utilizada apenas para o desenvolvimento da documentação alternativa!

Veja uma pequena demonstração do projeto rodando:
Gameplay do Pong em TS

O link para o projeto do GitHub é este: https://github.com/PatrikMaltacm/pong-ts/tree/main

Caso queira estudar e dar sugestões no projeto, fique à vontade. Só não garanto que irei atualizar o projeto porque estou focado em outras coisas no momento kkkk.

Obrigado pela sua leitura e espero que tenha gostado do conteúdo! Curti muito desenvolver e escrever sobre esse projeto, e este foi o primeiro artigo "completo" que escrevi.

Carregando publicação patrocinada...
4

Muito massa!
A uns anos atrás me fiz um desafio desse, iniciei na area desenvolvendo jogos mas fui para sistemas pq desenvolver jogos não da dinheiro no BR hehe (talvez hj tenha melhorado um pouco, mas estou feliz no que faço hoje)

Segue o github do desafio/projeto

https://github.com/kevinfavaro/mariobrosJS15kb

Totalmente em JS puro.
E é bem divertido fazer essas paradas!

1

é uma epoca atras e talvez até hoje era inviavel gamedev no Brasilk kkkk, comecei até alguns projetos muito maneiros, mas acabei desistindo.
Vou dar uma olhandinha no seu projeto tbm
EDIT: Ficou muito maneiro seu projetinho irmão, realmente muito similar! e nem parece que foi refeito kkkk

4

Sim, tem como e dá muito certo! O maior exemplo disso é o jogo CrossCode, feito pela Radical Fish Games. Ele foi desenvolvido usando HTML5 (renderizado em Canvas 2D) e JavaScript. Eles pegaram uma biblioteca HTML5 bem simples na época e praticamente construíram a própria engine do zero. O jogo foi um baita sucesso comercial e roda liso.
​Inclusive, para o novo jogo deles (Alabaster Dawn), eles continuaram na Web Stack, mas agora migraram totalmente para o TypeScript e criaram uma engine nova usando WebGL para aguentar gráficos 2.5D com aceleração por hardware.
​Parabéns pelo projeto e pelo artigo, cara! Ver o que você fez com a Raylib e TS só prova o quanto essa stack é versátil.

1

Muito obrigado pelo comentário! Não conhecia esse Studio e vou dar uma olhada nos jogos deles!

O ecossistema javascript é sinônimo de versatilidade, tendo sim suas limitações, mas se souber extrair o potencial da linguagem da pra fazer muita coisa maneira.

4

Os navegadores há um tempo atrás realmente era bem ruim pra se criar coisas do tipo, como jogos, animações e afins. As pessoas faziam "gambiarras" que eram fora do escopo do HTML, como o clássica flash. Mas dai veio o famoso html5 com o canvas, melhores APIs webgl 1 e 2, bibliotecas como three.js, phaser, etc. Hoje dá pra fazer tranquilamente games web, e pode até ser indicado pra alguém que quer fazer algo relativamente básico e já detem certo conhecimento de JS/TS. Eu já desenvolvi um projetinho com um colega pra uma empresa que queria um minigame pra um evento fechado da empresa e tals, foi bem divertido. Usei threejs, mas como era a primeira vez, fiz muita coisa nas coxas, mas deu pra aprender mt coisa que é usado nas grandes Game Engines, como nineslices, hud dinâmica com a tela do usuário, uso pós processamento, preload, etc.

Caso queira fazer coisas 2d, um Phaser, Three.js, Construct 3, são umas opções que dão suporte a JavaScript/TypeScript nativo, e muitas ferramentas embutidas pra games 2d (e até 3d dependendo ai).

1

É incrível como a web evoluiu nesse sentido, cheguei a acompanhar essa mudança quando começou se popularizar o webgl, cheguei a fazer alguns projetos na unity e buildando pra webgl, e foi muito maneiro, sobre engines para JS eu já vi algumas, mas não gostei muito da arquitetura delas, menos a treejs, ela eu curti, mas não cheguei a fazer nenhum joguinho nela, mas apliquei em projetos web que não eram jogos. Muito obrigado por compartilhar esses conhecimentos, eu não sabia que a construct3 aceitava JS.

4
3

Obrigado irmão! Fico muito feliz que muitas pessoas como você estão sempre compartilhando seus conhecimentos com a comunidade de forma gratuita.
Isso é o que nos mantém👏
Parabéns pelo projeto e muito obrigado pelo comentário.

2
1
2

Da mesma maneira que pessoal programava em assembly diretamente. Diferença que vc esta usando linguagens web. Pesquisa daggerfall, depois olha alguns exemplos da engine do doom. Engine serve para vc nao ter quer criar a roda do zero, mas de vc quiser bc pode.

1