Aprenda Desenvolvimento de Jogos com JavaScript

Sim! JavaScript é uma ótima linguagem para desenvolvimento de jogos, dependendo do tipo de jogo que você deseja criar, fazer Jogos com JavaScript é ainda mais fácil e rápido do que usar uma engine como Unity (site oficial) e Unreal Engine (site oficial).

JavaScript é melhor para jogos baseados na web e para dispositivos móveis. Também é uma ótima linguagem para as crianças aprenderem porque geralmente é fácil de entender e tem muitos recursos para programadores disponíveis online.

Antes dos smartphones, os celulares que usavam Java como sistema operacional tinham uma incrível biblioteca de games em Java. A desenvolvedora Gameloft, que produziu o sucesso Disney Dreamlight Valley, nasceu desenvolvendo jogos mobile em Java.

Os jogos JavaScript podem ser jogados no navegador ou no celular, então, se você quer ser um desenvolvedor de jogos e esse é o seu objetivo, aprender JavaScript para jogos é uma excelente opção. O uso de plataformas e ferramentas pode ajudar a criar jogos 2D e 3D que podem ser executados diretamente no seu navegador.

Mas se você quer criar o próximo grande jogo AAA, como Call of Duty ou FIFA, usando JavaScript, poderá achar isso um desafio. Embora a linguagem seja muito versátil, o JavaScript é muito mais lento que linguagens como C++ e consome muito mais memória. Jogos avançados exigem cálculos pesados de GPU e é uma quantidade substancial de peso para carregar, para a qual o JavaScript não foi feito. Para isso, temos uma dica logo abaixo!

Você também vai gostar:
Jogos em Unreal Engine
Tudo sobre Pixel Art
Aprenda a Criar Games 2D
Melhor Curso de Criação de Jogos
Criando Jogos no GameMaker

Torne-se um Desenvolvedor de Jogos AAA

Jogos com Java vs Jogos com JavaScript

Frequentemente ouvimos pessoas comparando JavaScript e Java e às vezes até mesmo usando incorretamente essas palavras de forma intercambiável. Na verdade, JavaScript e Java não têm nenhuma relação e a principal coisa que eles têm em comum é que ambos são linguagens de programação que contêm a palavra “Java”.

JavaScript é uma linguagem de script interpretada, enquanto Java é uma linguagem de compilação. Por ser uma linguagem de script interpretada, o código não precisa ser compilado. Em vez disso, os resultados são interpretados por um comando do usuário. É por isso que funciona tão bem na criação de sites. Os usuários geralmente clicam e navegam em um site, que é uma entrada que o JavaScript pode usar para executar uma ação adequada.

Java, entretanto, requer que o código seja compilado antes de poder ser executado. Isso significa que o código é traduzido em uma linguagem de máquina para ser compreendido pelo computador.

Agora que isso foi resolvido, qual é o potencial dessas linguagens quando se trata de jogos? Mais uma vez, se o seu objetivo é criar jogos para navegadores da web, JavaScript pode ser sua escolha ideal. Mas se o seu tipo ideal de jogo é algo que pode rodar em um PC ou console, Java pode ser uma linguagem melhor. Um jogo muito popular desenvolvido com Java é o Minecraft.

Jogos populares em JavaScript

Muitos jogos online populares foram criados usando JavaScript. Crianças que desejam programar jogos em JavaScript podem usá-los como inspiração. Confira alguns deles abaixo!

Minecraft Java Edition foi lançado como a primeira versão do famoso game de construção de mundos para celulares, antes de unificar as versões mobile e PC na Bedrock Edition. Você pode ler mais sobre Minecraft em nosso artigo completo.

Tower Building é uma ótima maneira de começar com jogos JavaScript. O jogo permite aos jogadores empilhar blocos para criar uma torre muito alta. Este é um jogo fantástico de se ver porque não apenas inclui um código QR para você jogar no seu telefone, mas também pode navegar, bifurcar e clonar o repositório GitHub para ver como o jogo foi criado.

Bejeweled foi criado como um jogo para navegador no início dos anos 2000. É semelhante ao Candy Crush, onde você precisa combinar três joias seguidas para marcar pontos.

2048 é um jogo viciante que permite que você use as teclas de seta para mover as peças em uma grade. A ideia é mesclar os blocos até que sejam iguais a 2048. Curiosidade, um dos primeiros scripts Python que escrevi foi uma maneira de jogar este jogo automaticamente para mim!

Polycraft é um jogo 3D que pode ser jogado em seu navegador. Polycraft é cheio de aventura, exploração, construção de bases, coleta, elaboração e até luta. É um excelente exemplo de como você pode superar os jogos 2D com Javascript.

Words With Friends 2 é um jogo de aplicativo móvel que usa React Native, uma estrutura que utiliza JavaScript para criar aplicativos móveis. A Zynga escolheu usar React Native por sua capacidade de criar um jogo que pode ser jogado em múltiplas plataformas usando JavaScript com uma base de código.

Quais são os melhores game engines JavaScript

O código JavaScript é puramente texto e, embora seja poderoso, o JavaScript não pode fazer tudo sozinho. Ao desenvolver jogos com JavaScript é muito comum usar um motor de jogo ou uma biblioteca de renderização. As crianças que aprenderem a incorporar game engine em seus programas darão o próximo passo para dar vida ao jogo dos seus sonhos.

As game engine são softwares que permitem criar componentes extras para jogos, como som, animações, gráficos e física. Há uma infinidade de opções ao procurar um mecanismo de jogo ou biblioteca de renderização para o seu jogo que possa ser usado para suas necessidades específicas. Aqui estão alguns exemplos populares para você escolher.

PixiJS

PixiJS é um mecanismo de código aberto que se orgulha de sua velocidade e bela API. O renderizador 2D também possui suporte multiplataforma para que você possa fazer seu jogo para vários aplicativos. Ser de código aberto também permite que uma comunidade altamente solidária participe no fornecimento de melhorias consistentes ao mecanismo.

BabylonJS

BabylonJS é uma biblioteca de renderização que possui ferramentas muito poderosas que permitem criar qualquer coisa, desde simples animações até jogos 3D. Assim como o PixiJS, o BabylonJS também é de código aberto e possui uma grande comunidade de desenvolvedores para ajudá-lo a crescer.

Phaser

Phaser oferece suporte para jogos HTML5 para desktop e dispositivos móveis. Seu foco está no desenvolvimento de jogos 2D que podem ser compilados para múltiplas plataformas. Um benefício de usar o Phaser é a capacidade de usar plug-ins adicionais conforme necessário. Isso permite que você mantenha suas ferramentas pequenas para que você não tenha muitos componentes desnecessários.

melonJS

A estrutura melonJS é leve, mas oferece a capacidade de adicionar plug-ins conforme desejar. Ele permite adicionar recursos como colisões, sprites, física, efeitos de partículas e muito mais. Também é conhecido por ser muito amigável para iniciantes em comparação com outros game engine.

Three.js

Outra biblioteca popular para renderizar gráficos 3D em um navegador da web é Three.js . É bastante fácil de aprender e muito popular, o que significa que há uma infinidade de exemplos disponíveis. Seu renderizador padrão é WebGL, mas também oferece suporte para renderizadores SVG, Canvas 2D e CSS3D.

Criando um Joguinho em JavaScript

Vamos fazer um jogo em JavaScript, qual é a primeira coisa que precisamos? Que tal começarmos definindo uma engine. Nosso jogo vai ser em Phaser. Você sabe se é preciso instalar o Phaser no PC para fazer um jogo?

Não! digo, não é estritamente necessário instalar o Phaser no seu PC para começar a desenvolver um jogo usando essa engine. Você pode utilizar o Phaser diretamente através de um link CDN (Content Delivery Network), incluindo o script da biblioteca diretamente no seu arquivo HTML. Isso elimina a necessidade de instalações locais e permite que você comece a desenvolver rapidamente.

Para começar com Phaser usando um CDN, você pode simplesmente adicionar a seguinte linha de código dentro da tag <head> ou no final do corpo do seu arquivo HTML (<body>):

<script src="https://cdnjs.cloudflare.com/ajax/libs/phaser/3.55.2/phaser.min.js"></script>

Esta linha inclui a versão mais recente do Phaser (3.55.2 no momento), mas você pode verificar e utilizar a versão específica que melhor atenda às suas necessidades.

Depois de incluir o Phaser via CDN, você está pronto para começar a escrever o código do seu jogo, definindo cenas, objetos, lógicas de jogo, etc., usando JavaScript dentro do seu arquivo HTML ou em arquivos JS separados.

Criando um Jogo estilo Shooter

Vamos fazer um joguinho ao estilo Shooter. Pegamos um sprite de um bonequinho e vamos chamá-lo de “James Bond“. Ele está protegido por uma cerca e só pode se mover, através das setas, para cima e para baixo. Apertando o botão de Espaço, ele irá atirar um projetil. Como podemos fazer isso em um jogo de Phaser?

Para criar um jogo ao estilo “Shooter” utilizando a biblioteca Phaser 3 com um personagem chamado “James Bond”, que pode mover-se para cima e para baixo e atirar um projétil ao pressionar o botão Espaço, vamos seguir os seguintes passos.

1. Configuração Básica do Phaser: Inicialmente, configuramos o Phaser com uma cena que inclui as funções preload, create e update.
2. Carregando os Sprites: Carregaremos os sprites (imagens) do personagem e do projétil na função preload.
3. Criando os Sprites: Criaremos o sprite do personagem e controlaremos sua posição inicial na função create. Também criaremos um grupo para os projéteis para gerenciar todos os tiros disparados.
4. Movimentação e Ação de Atirar: Na função update, adicionaremos as funcionalidades de movimentação do personagem e a ação de disparar quando o botão Espaço é pressionado.

Modifique os ‘path/to/’ para os caminhos corretos dos seus assets. Com esse esqueleto, você poderá iniciar seu jogo e desenvolver ainda mais funcionalidades com base nesse início. Aqui está um esqueleto básico para o seu jogo:

• preload(): carrega os assets.
• create(): inicializa os sprites, o grupo de projéteis, e as variáveis de controle.
• update(): controla a movimentação e a ação de atirar.

// Configuração do jogo
var config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scene: {
        preload: preload,
        create: create,
        update: update
    }
};

var game = new Phaser.Game(config);

function preload() {
    // Carrega as imagens do James Bond e do Projétil
    this.load.image('jamesBond', 'path/to/jamesBond.png');
    this.load.image('bullet', 'path/to/bullet.png');
}

function create() {
    // Cria James Bond
    this.jamesBond = this.physics.add.sprite(100, 300, 'jamesBond');

    // Cria um grupo de projéteis
    this.bullets = this.physics.add.group({
        defaultKey: 'bullet',
        maxSize: 10
    });

    // Controles
    this.cursors = this.input.keyboard.createCursorKeys();
    this.spaceBar = this.input.keyboard.addKey(Phaser.Input.Keyboard.KeyCodes.SPACE);
}

function update() {
    // Movimentação do James Bond
    this.jamesBond.setVelocity(0);

    if (this.cursors.up.isDown) {
        this.jamesBond.setVelocityY(-200);
    } else if (this.cursors.down.isDown) {
        this.jamesBond.setVelocityY(200);
    }

    // Atirar projétil
    if (Phaser.Input.Keyboard.JustDown(this.spaceBar)) {
        var bullet = this.bullets.get(this.jamesBond.x, this.jamesBond.y);
        if (bullet) {
            bullet.setActive(true);
            bullet.setVisible(true);
            bullet.setVelocityX(300);
        }
    }

    // Recicla os projéteis
    this.bullets.children.each(function(b) {
        if (b.active && b.x > 800) {
            this.bullets.killAndHide(b);
        }
    }, this);
}

// Inicializa o jogo
var game = new Phaser.Game(config);

Agora, para fazermos a cerca que protege o nosso James Bond. Ela precisa ser um objeto sólido, que não impeça os projeteis disparados pelo nosso sprite de atingir os inimigos, mas ela precisa impedir que os inimigos cheguem ao James Bond.

Contudo, o nosso Bond precisa proteger a cerca e impedir que ela seja destruída pelos inimigos. Como podemos criar em Phaser uma cerca destas? Ela tem cerca de 10 pontos de vida, ou seja, se 10 inimigos tocarem nela, é Game Over.

Para criar uma cerca que proteja o seu personagem James Bond no Phaser, você vai precisar definir um objeto que interaja fisicamente de formas distintas com diferentes tipos de objetos no jogo. Aqui estão os passos detalhados sobre como você pode implementar isso:

1. Definição da Cerca: Crie uma classe para a cerca que inclua seu número de pontos de vida e lógica para interação com inimigos e projéteis.
2. Interagir com Inimigos: Quando um inimigo colide com a cerca, deve ser reduzido o ponto de vida da cerca e, possivelmente, destruir o inimigo ou fazer com que ele recue.
3. Interagir com Projéteis: Os projéteis disparados por James Bond devem ser capazes de passar pela cerca sem interagir com ela, permitindo que atinjam os inimigos.
4. Visualização e destruição da Cerca: A cerca deve ser visualizada no jogo e, quando seus pontos de vida chegarem a zero, deve ser destruída ou removida do jogo.

Aqui está um exemplo básico de como você pode implementar isso em código Phaser:

class Fence extends Phaser.GameObjects.Sprite {
    constructor(scene, x, y) {
        super(scene, x, y, 'fenceTexture');
        scene.add.existing(this);
        scene.physics.add.existing(this);

        this.health = 10;
        this.body.immovable = true;
        this.body.allowGravity = false;
    }

    takeDamage() {
        this.health -= 1;
        if (this.health <= 0) {
            this.destroy();
        }
    }
}

class Enemy extends Phaser.GameObjects.Sprite {
    // Implementação do inimigo...
    touchFence(fence) {
        fence.takeDamage();
        // Lógica para o que acontece com o inimigo após tocar a cerca...
    }
}

class GameScene extends Phaser.Scene {
    create() {
        this.fence = new Fence(this, 400, 300); // Posicione a cerca conforme necessário
        this.enemy = new Enemy(this, 500, 300, 'enemyTexture');

        this.physics.add.collider(this.enemy, this.fence, (enemy, fence) => {
            enemy.touchFence(fence);
        });

        // Certifique-se de permitir que os projéteis passem pela cerca sem colidir
        // Isso pode ser feito configurando grupos de colisão apropriados ou simplesmente não adicionando a cerca ao mesmo grupo que os projéteis
    }
}

Neste código, definimos uma classe Fence com uma propriedade de saúde que diminui quando um inimigo (representado pela classe Enemy) toca nela. A cerca é adicionada como um sprite imóvel e indestrutível de modo que projéteis possam passar por ela sem colidir. Você precisará ajustar a lógica para estar de acordo com a estrutura exata do seu jogo e as interações desejadas.

Precisamos dos inimigos, ou como vamos chamá-los, monstros. Eles vem andando da esquerda para direita, e surgem em diferentes posições do cenário sempre avançando contra a cerca. Eles se movem em diferentes velocidades, alguns mais rápido e outros mais lentos.

Os mais Monstros Rápidos morrem com um disparo do projétil do James Bond e os Monstros Lentos, precisam de três disparos. Monstros mais rápidos ou mais lentos surgem alternadamente de forma aleatória, avançando contra a cerca. Como podemos fazer eles funcionarem no Phaser?

Para implementar o comportamento dos monstros no jogo usando Phaser, você precisará criar objetos inimigos que surgem em várias posições e se movem em velocidades variadas. Aqui está um guia passo-a-passo sobre como configurar isso:

1. Definição das Classes dos Monstros: Você deve criar duas classes diferentes para os monstros: FastMonster e SlowMonster, cada uma com suas próprias propriedades e métodos correspondentes, incluindo a quantidade de dano que eles podem absorver antes de serem destruídos.
2. Criar Sprites e Animações: Use o método this.load.spritesheet para carregar as spritesheets dos monstros e this.anims.create para definir as animações de caminhada.
3. Gerar Monstros Aleatoriamente: Use a função Math.random() para decidir se um monstro rápido ou lento é gerado e em qual posição x (horizontal) ele aparecerá. Eles sempre se moverão em direção à cerca (lado direito da tela), para isso, ajuste suas velocidades de acordo.
4. Movimentação e Ataque: Os monstros precisarão de um método de atualização que altere suas posições na tela. Eles se moverão horizontalmente de acordo com suas velocidades definidas.
5. Gestão de Colisões e Dano: Implemente a lógica de colisão para detectar quando um projétil atinge um monstro e reduzir sua saúde de acordo. Use o sistema de física do Phaser para facilitar a detecção de colisões.

Aqui está um exemplo básico de código em JavaScript usando Phaser para ilustrar como você poderia começar:

class FastMonster extends Phaser.GameObjects.Sprite {
    constructor(scene, x, y) {
        super(scene, x, y, 'fastMonster');
        this.health = 1;  // precisa de um tiro para morrer
        this.speed = 200; // mais rápido
        scene.add.existing(this);
        scene.physics.world.enable(this);
    }

    update() {
        this.x += this.speed * scene.game.loop.delta; // Move o monstro
    }
}

class SlowMonster extends Phaser.GameObjects.Sprite {
    constructor(scene, x, y) {
        super(scene, x, y, 'slowMonster');
        this.health = 3;  // precisa de três tiros para morrer
        this.speed = 100; // mais lento
        scene.add.existing(this);
        scene.physics.world.enable(this);
    }

    update() {
        this.x += this.speed * scene.game.loop.delta; // Move o monstro
    }
}

class MainScene extends Phaser.Scene {
    create() {
        this.monsters = this.add.group(); // Grupo de todos os monstros

        // Criar e adicionar monstros periodicamente
        this.time.addEvent({
            delay: 1000,
            callback: () => {
                let x = 0;
                let y = Phaser.Math.Between(100, 400); // Posição Y aleatória
                let isFast = Math.random() > 0.5;
                let monster = isFast ? new FastMonster(this, x, y) : new SlowMonster(this, x, y);
                this.monsters.add(monster);
            },
            loop: true
        });
    }

    update() {
        this.monsters.children.each(monster => monster.update());
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    physics: {
        default: 'arcade',
        arcade: {
            gravity: { y: 0 },
            debug: false
        }
    },
    scene: MainScene
};

const game = new Phaser.Game(config);

Neste exemplo, tanto FastMonster quanto SlowMonster herdam de Phaser.GameObjects.Sprite. Eles são adicionados ao jogo em intervalos regulares com velocidades e saúde variáveis, dependendo do tipo de monstro.

E por último, uma pontuação. Monstros Lentos valem 30 pontos e Monstros Rápidos valem 10 pontos. A pontuação fica posicionada no canto superior esquerdo da tela. Como fazer isso no Phaser?

Para exibir uma pontuação no canto superior esquerdo da tela utilizando o Phaser, você pode seguir os seguintes passos:

1. Crie uma variável para a pontuação: Defina uma variável para armazenar a pontuação do jogador.
2. Crie um objeto de texto para a pontuação: Use o método add.text() para criar um objeto de texto onde você mostrará a pontuação na tela.
3. Atualize a pontuação: Quando um jogador derrota um monstro, atualize a pontuação adequadamente.
4. Mostre a pontuação atualizada na tela: Atualize o objeto de texto para refletir a pontuação atual sempre que ela mudar.

Aqui está um exemplo de código em Phaser que ilustra esses passos:

class MainScene extends Phaser.Scene {
    constructor() {
        super({ key: 'MainScene' });
        this.score = 0; // Inicializa a pontuação como 0
    }

    preload() {
        // Carregue seus recursos (sprites, imagens, sons, etc.)
    }

    create() {
        // Criação de objetos do jogo e texto de pontuação
        this.scoreText = this.add.text(10, 10, 'Score: 0', { fontSize: '16px', fill: '#000' });

        // Aqui você pode adicionar monstros e definir como eles interagem
    }

    update() {
        // Lógica de atualização do jogo (movimentação de personagens, etc.)
    }

    addPoints(points) {
        this.score += points; // Adiciona pontos à pontuação
        this.scoreText.setText(`Score: ${this.score}`); // Atualiza o texto da pontuação
    }

    defeatMonster(monster) {
        if (monster.type === 'slow') {
            this.addPoints(30);
        } else if (monster.type === 'fast') {
            this.addPoints(10);
        }
        monster.destroy(); // Destrua o monstro depois de derrotá-lo
    }
}

const config = {
    type: Phaser.AUTO,
    width: 800,
    height: 600,
    parent: 'game-container', // ID do contêiner HTML onde o jogo será exibido
    scene: [MainScene],
    // Outras configurações do jogo
};

const game = new Phaser.Game(config);

Esse é um exemplo básico. Você terá que adaptá-lo de acordo com as particularidades do seu jogo, como o método de spawn dos monstros e a lógica para detectar quando um monstro é derrotado. A função addPoints em MainScene é chamada quando um monstro é derrotado, e os pontos são adicionados conforme o tipo do monstro.

FAQ Rápido

Fale conosco nos comentários e diga oque achou dessa matéria e aproveite para ler mais notícias e matérias, como por exemplo, sobre criar jogo indie, no nosso site.