JavaScript Game Engines \| TreinaWeb Promoção no ar Matricule-se agora e garanta **54% de desconto** Termina em Tempo restante da oferta: 01 Horas 06 Min 02 Seg Tempo restante da oferta: 01 06 02 [Assinar →](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Explorar [ Quanto custa? ](#assinatura) [ FAQ ](https://www.treinaweb.com.br#faq) [Matricule-se](#assinatura) [ Entrar ](https://www.treinaweb.com.br/login) [ Início ](https://www.treinaweb.com.br) [ Artigos ](https://www.treinaweb.com.br/blog) JavaScript Game Engines [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) # JavaScript Game Engines Conheça as principais Game Engines para JavaScript. [ Akira Hanashiro ](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) 9 anos atrás ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/02/06152024/js-engine.png) Olá, Web Developers! Podemos usar o elemento do HTML5 para criar jogos com JavaScript. Para nos ajudar com tarefas triviais (como gerenciamento de som, animações, física, etc) foram criadas game engines. Listarei as principais. [ ![Acessibilidade - Desenvolvendo sites acessíveis](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/acessibilidade-web.svg) Curso Acessibilidade - Desenvolvendo sites acessíveis Conhecer o curso ](https://www.treinaweb.com.br/curso/acessibilidade-desenvolvendo-sites-acessiveis) ## MelonJS ![](https://dkrn4sk0rn31v.cloudfront.net/2018/03/20202142/melon-js.png) O [melon.js](http://melonjs.org/ "melon.js") é um framework leve, bem simples de se usar e gratuito. Ele também possibilita a integração com ferramentas de terceiros, aumentando o seu poder. Para a criação das telas, usa-se o [http://www.mapeditor.org](http://www.mapeditor.org "http://www.mapeditor.org") Você pode testar um dos jogos criados com melon.js neste link: [http://melonjs.github.io/tutorial-platformer/tutorial\_step9/index.html](http://melonjs.github.io/tutorial-platformer/tutorial_step9/index.html "http://melonjs.github.io/tutorial-platformer/tutorial_step9/index.html") ## PlayCanvas ![](https://dkrn4sk0rn31v.cloudfront.net/2018/03/20202347/play-canvas.png) O [PlayCanvas](https://playcanvas.com/ "PlayCanvas") nos permite criar jogos 2D e 3D com JavaScript. Ele é gratuito e open source. Você não precisa baixar nada! O PlayCanvas possui um tipo de IDE que roda diretamente no seu navegador. Todo o código fica armazenado no sistema deles. Ele suporta vários tipos de arquivos, incluindo objetos 3D. [ ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2023/10/E-BOOK-GRATUITO-COMECANDO-JS.png) ](https://www.treinaweb.com.br/ebook/guia-javascript) Se você criar uma conta gratuita, seus projetos ficam públicos e terá um limite de 200MB de armazenamento. Para criar projetos privados, é necessário pagar um plano. O plano pessoal é de $15 por mês. Quando quiser publicar seu jogo, você pode optar por deixá-lo hospedado no PlayCanvas ou baixar o projeto e hospedar onde quiser. ## ImpactJS ![](https://dkrn4sk0rn31v.cloudfront.net/2018/03/20202427/impact.png) O [Impact](http://impactjs.com/ "Impact") é uma das engines de jogos para JavaScript mais conhecidas. Ele é bem leve, poderoso e simples de aprender a usar. Possui seu próprio editor de telas, ferramentas de debug e teste de performance. A comunidade é bem ativa. Ele também possibilita a criação de Plugins. O mais famoso é o Impact++ ([http://collinhover.github.io/impactplusplus/](http://collinhover.github.io/impactplusplus/ "http://collinhover.github.io/impactplusplus/")). Esse plugin gratuito acrescenta várias funcionalidades avançadas para você utilizá-las de maneira bem simples. O valor da licença é de $99. Se você pretende ganhar dinheiro com jogos para HTML5, é um bom investimento. ## Phaser ![](https://dkrn4sk0rn31v.cloudfront.net/2018/03/20202635/phaser.jpg) Outra engine bem conhecida é o [Phaser](https://phaser.io/ "Phaser"). Ele é gratuito e está sempre sendo atualizado pela comunidade no github. O Phaser também oferece o Phaser Sandbox, que te permite escrever código diretamente do navegador e testá-lo para não precisar baixar nem instalar nada. Depois você pode baixar o código se quiser. E tudo isso sem precisar se cadastrar! Isso é ótimo para quem quer experimentar o Phaser. Também há o Phaser Editor, que é uma IDE baseada no Eclipse para a criação de jogos com Phaser. Porém, ela é paga ($30). ## Conclusão Se você está pensando em começar a desenvolver jogos, saiba que o conceito é sempre o mesmo. Isso significa que se você aprender a usar o ImpactJS, terá facilidade em usar o Phaser e vice-versa. Minha linguagem de programação principal é o JavaScript, mas eu só recomendo o uso dessa linguagem no desenvolvimento de jogos se o seu alvo for apenas o navegador. O código fica leve, o jogo carrega muito rápido e é bem simples de fazer testes com as DevTools do navegador. Se o seu alvo não for o navegador ou quiser desenvolver para várias plataformas, eu recomendo usar game engines como o Unity3D. Ele exporta código nativo para mais de 25 plataformas diferentes, incluindo HTML5 (WebGL). Isso fará seu jogo ter mais performance do que um jogo escrito com JavaScript exportado como um aplicativo híbrido, sem contar nas várias funcionalidades que o Unity fornece para a criação de jogos 2D e 3D. [ ![React Native - Armazenamento de arquivos com Firebase Storage](https://d2knvm16wkt3ia.cloudfront.net/assets/svg-icon/react-native.svg) Curso React Native - Armazenamento de arquivos com Firebase Storage Conhecer o curso ](https://www.treinaweb.com.br/curso/react-native-armazenamento-de-arquivos-com-firebase-storage) - [ #JavaScript ](https://www.treinaweb.com.br/blog/tag/javascript) - [ #Games ](https://www.treinaweb.com.br/blog/tag/games) Autor ![Akira Hanashiro](//secure.gravatar.com/avatar/d107ca73135bc62770a67ebbfe4cf80d?d=mm) ## Akira Hanashiro Graduado em Análise e Desenvolvimento de Sistemas, Pós-graduado em Projetos e Desenvolvimento de Aplicações Web e MBA em Machine Learning. Especializado em Front End e curte desenvolvimento de jogos. [Todos os artigos](https://www.treinaweb.com.br/blog/autor/akira-hanashiro) ## Continue estudando Transforme leitura em prática com os cursos e formações da TreinaWeb. [Ver cursos](https://www.treinaweb.com.br/cursos) Continue lendo ## Artigos relacionados - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/03/ARRAYS-OBJETOS-JAVASCRIPT-400x280.png) [ Desenvolvimento Front-end ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-front-end) 6 anos atrás ## [ Trabalhando com arrays e objetos no JavaScript ](https://www.treinaweb.com.br/blog/trabalhando-com-arrays-e-objetos-no-javascript) Confira neste artigo como trabalhar com Arrays e Objetos no JavaScript. Vamos aprender a declarar e manipular Arrays e Objetos com exemplos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/09/27171346/jaydson-gomes-400x280.png) [ Entrevistas ](https://www.treinaweb.com.br/blog/categoria/entrevistas) 8 anos atrás ## [ TW Entrevista 10: Jaydson Gomes ](https://www.treinaweb.com.br/blog/tw-entrevista-10-jaydson-gomes) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Jaydson Gomes, um dos fundadores da Nasc e BrazilJS. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/03/01111116/jogo-feito-400x280.png) [ Desenvolvimento de Jogos ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-de-jogos) 9 anos atrás ## [ Como um jogo digital é criado? ](https://www.treinaweb.com.br/blog/como-um-jogo-digital-e-criado) Veja nesse artigo como um jogo digital é criado e os principais conceitos envolvidos. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/11/06104639/TW-ENTREVISTAS-FABIO-400x280.png) [ Desenvolvimento Web ](https://www.treinaweb.com.br/blog/categoria/entrevistas-desenvolvimento-web) 8 anos atrás ## [ TW Entrevista 08: Fabio Costa ](https://www.treinaweb.com.br/blog/tw-entrevista-08-fabio-costa) Fizemos uma série de entrevistas chamada "TW Entrevista". O entrevistado de hoje é o Fabio Costa, desenvolvedor que já trabalhou na Globo.com, no Facebook e agora está na GoDaddy. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/mobile-coding-400x280.jpg) [ Desenvolvimento Mobile ](https://www.treinaweb.com.br/blog/categoria/desenvolvimento-mobile) 10 anos atrás ## [ Saiba como se tornar um Desenvolvedor Mobile ](https://www.treinaweb.com.br/blog/saiba-como-se-tornar-um-desenvolvedor-mobile) Veja dicas sobre como se tornar um Desenvolvedor Mobile e sobre quais tecnologias estudar. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/08/javascript-comandos-do-console-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 6 anos atrás ## [ JavaScript - Comandos do Console ](https://www.treinaweb.com.br/blog/javascript-comandos-do-console) Conheça os comandos do console do navegador e domine essa ferramenta para melhorar seus testes ou caça aos bugs do seu JavaScript! Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/03/13164211/JAVASCRIPT-COISAS-ESTRANHAS-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Entendendo as partes estranhas ](https://www.treinaweb.com.br/blog/javascript-entendendo-as-partes-estranhas) Conheça o motivo por trás de vários comportamentos considerados estranhos que o JavaScript possui. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2020/01/03075049/Ordenação-de-Cores-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 7 anos atrás ## [ JavaScript - Ordenando Elementos por Cores ](https://www.treinaweb.com.br/blog/javascript-ordenando-elementos-por-cores) Aprenda a ordenar cores e fazer conversões entre os formatos RGB, Hexadecimal e HSL usando JavaScript. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2019/06/27155937/js-symbol-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 8 anos atrás ## [ JavaScript: você sabe o que são e por que usar Symbols? ](https://www.treinaweb.com.br/blog/javascript-voce-sabe-o-que-sao-e-por-que-usar-symbols) Descubra a utilidade dos Symbols no JavaScript, novo tipo primitivo introduzido no ES2015. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2018/07/31131011/funções-js-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 8 anos atrás ## [ JavaScript: métodos de Arrays que você precisa conhecer ](https://www.treinaweb.com.br/blog/javascript-metodos-de-arrays-que-voce-precisa-conhecer) Trabalha com JavaScript? Então você precisa conhecer estes métodos para trabalhar com Arrays. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2017/06/javascript-generators-e-onde-usa-los-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JavaScript Generators e onde usá-los ](https://www.treinaweb.com.br/blog/javascript-generators-e-onde-usa-los) Veja como e onde podemos aproveitar os Generators no JavaScript para melhorar o nosso código. Ler artigo - ![](https://dkrn4sk0rn31v.cloudfront.net/uploads/2021/05/javascript_generators-400x280.png) [ Javascript ](https://www.treinaweb.com.br/blog/categoria/javascript) 10 anos atrás ## [ JavaScript Assíncrono com Generators ](https://www.treinaweb.com.br/blog/javascript-assincrono-com-generators) Generators são uma funcionalidade que veio no ES2015 para nos auxiliar no desenvolvimento de código assíncrono. Ler artigo ## Um ano de acesso total para você viver de programação. Todos os cursos e formações da TreinaWeb numa única assinatura, com professores que atuam no mercado, suporte direto e certificados. Do primeiro `console.log` ao mercado de trabalho. - **1 ano** de acesso a **todos os cursos** - Cursos novos **toda semana** - Suporte **direto com professores** - Plano de carreira **personalizado** - **Certificados digitais** inclusos - **Aplicativos** para Android e iOS, com **acesso offline** **Garantia incondicional de satisfação** Teste por 7 dias e, se não fizer sentido para você, devolvemos seu dinheiro. ### Acesso completo a todos os cursos e dezenas de Formações. 12 meses Economize R$ 840,00 54% OFF de 12x R$ 129,00 por apenas 12x R$ 59,00 sem juros no cartão de crédito ou R$ 599,00 à vista Oferta termina em **01h 06min 02s** - Acesso imediato e ilimitado durante 1 ano. - Plano de carreira personalizado. - Suporte direto com professores. - E muito mais! [Matricule-se agora](https://www.treinaweb.com.br/checkout/pagamento/plano/anual?cupom=TW-SCLIENTE26) [ ](https://www.treinaweb.com.br) Escola online de programação, tecnologia e IA. - [ ](https://www.facebook.com/TreinaWeb/) - [ ](https://www.instagram.com/treinaweb/) - [ ](https://www.youtube.com/user/TreinaWeb) - [ ](https://twitter.com/treinaweb) - [ ](https://www.linkedin.com/company/treinaweb) - [ ](https://github.com/treinaweb) ## Inscreva-se em nossa newsletter Receba lançamentos, promoções e novidades. Seu nome Seu WhatsApp Seu melhor e-mail Inscrever-se ## Cursos - [ Base para Devs ](https://www.treinaweb.com.br/categoria/base-para-devs) - [ Front-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-front-end) - [ Back-end ](https://www.treinaweb.com.br/categoria/desenvolvimento-back-end) - [ Mobile ](https://www.treinaweb.com.br/categoria/desenvolvimento-mobile) - [ Bancos de Dados ](https://www.treinaweb.com.br/categoria/bancos-de-dados) - [ Cloud ](https://www.treinaweb.com.br/categoria/cloud-computing) - [ IA ](https://www.treinaweb.com.br/categoria/ia) - [ E mais ](https://www.treinaweb.com.br/categoria/e-mais) - [ Ver todos os cursos ](https://www.treinaweb.com.br/cursos) ## Conteúdo - [ Formações ](https://www.treinaweb.com.br/formacoes) - [ Projetos práticos ](https://www.treinaweb.com.br/projetos-praticos) - [ Direto ao ponto ](https://www.treinaweb.com.br/direto-ao-ponto) - [ Planos ](https://www.treinaweb.com.br#assinatura) - [ Depoimentos ](https://www.treinaweb.com.br#depoimentos) - [ Comunidade ](https://www.treinaweb.com.br#comunidade) - [ Corpo docente ](https://www.treinaweb.com.br#docente) ## A empresa - [ Sobre a TreinaWeb ](https://www.treinaweb.com.br#sobre) - [ Perguntas frequentes ](https://www.treinaweb.com.br#faq) - [ Vantagens de estudar na TreinaWeb ](https://www.treinaweb.com.br/vantagens-de-estudar-na-treinaweb) - [ Cursos para empresas ](https://www.treinaweb.com.br/empresas) - [ Sugira um novo curso ](https://www.treinaweb.com.br/sugerir-curso) - [ Trabalhe conosco ](https://www.treinaweb.com.br/trabalhe-conosco) - [ Artigos ](https://www.treinaweb.com.br/blog) - [ Desenvolvedores e agentes ](https://www.treinaweb.com.br/developers) - [ Contato ](https://www.treinaweb.com.br/contato) - [ Política de privacidade ](https://www.treinaweb.com.br/politica-de-privacidade) - [ Termos de uso ](https://www.treinaweb.com.br/termos-de-uso) ## Baixe nosso aplicativo [ Disponível na **App Store** ](https://apps.apple.com/us/app/treinaweb/id1322729447) [ Disponível no **Google Play** ](https://play.google.com/store/apps/details?id=br.com.treinaweb.mobile) Av. Paulista, 1765, Conj 71 e 72 · Bela Vista · São Paulo · SP · 01311-200 © 2004 – 2026 TreinaWeb Tecnologia LTDA · CNPJ 06.156.637/0001-58