Mini Game Mario

Como Criar um Mini Jogo do Mario: Um Guia Completo

Neste artigo, você aprenderá como criar um mini jogo do Mario do zero, usando o framework de jogos Phaser. Ao final deste tutorial, você terá um jogo simples, mas divertido, com o famoso encanador saltando e coletando moedas.

O que você precisa para criar um mini jogo do Mario

Um editor de código, como o Visual Studio Code ou o Atom;
O Node.js instalado em sua máquina;
O framework de jogos Phaser instalado (você aprenderá como fazer isso abaixo);
Paciência e vontade de aprender!

Como instalar o Phaser

Para instalar o Phaser, abra o terminal ou o prompt de comando e digite o seguinte comando:

npm install -g phaser

Depois de alguns segundos, o Phaser será instalado em sua máquina. Agora, você pode criar seu jogo do Mario!

Mini Mario Game 4 Alpha - release date, videos, screenshots, reviews on ...

Criando o projeto do mini jogo do Mario

Para criar um novo projeto Phaser, digite o seguinte comando no terminal:

phaser3-project my-mario-game

Este comando criará uma pasta chamada "my-mario-game" com todos os arquivos necessários para iniciar seu projeto.

Adicionando o personagem do Mario ao jogo

Para adicionar o personagem do Mario ao jogo, você precisará baixar ou criar uma sprite do Mario. Uma opção é usar a sprite do Mario disponível no site Spriters Resource.

Depois de baixar a sprite, cole-a na pasta "assets/images" do seu projeto. Em seguida, abra o arquivo "index.html" e adicione o seguinte código no final da tag <body>:

<script src="https://cdn.jsdelivr.net/npm/phaser@3.50.0/dist/phaser.min.js"></script>
<script src="js/boot.js"></script>
<script src="js/preload.js"></script>
<script src="js/game.js"></script>

Em seguida, crie os arquivos "boot.js", "preload.js" e "game.js" na pasta "js" e adicione o seguinte código a cada um deles:

boot.js

class BootScene extends Phaser.Scene {
  constructor() {
    super('boot');
  }

  preload() {}

  create() {
    this.scene.start('preload');
  }
}

preload.js

class PreloadScene extends Phaser.Scene {
  constructor() {
    super('preload');
  }

  preload() {
    this.load.image('mario', 'assets/images/mario.png');
  }

  create() {
    this.scene.start('game');
  }
}

game.js

class GameScene extends Phaser.Scene {
  constructor() {
    super('game');
  }

  create() {
    this.mario = this.physics.add.sprite(100, 100, 'mario');
    this.mario.setBounce(0.2);
    this.mario.setCollideWorldBounds(true);
  }

  update(time, delta) {
    const cursors = this.input.keyboard.createCursorKeys();

    if (cursors.left.isDown) {
      this.mario.setVelocityX(-160);
    } else if (cursors.right.isDown) {
      this.mario.setVelocityX(160);
    } else {
      this.mario.setVelocityX(0);
    }

    if (cursors.up.isDown && this.mario.body.touching.down) {
      this.mario.setVelocityY(-330);
    }
  }
}

Agora, quando você abrir o arquivo "index.html" em um navegador, você verá o personagem do Mario saltando e se movendo pela tela.

New Super mario bros (All minigames gameplay and DS game) - YouTube

Adicionando moedas ao jogo

Para adicionar moedas ao jogo, baixe uma sprite de moeda e cole-a na pasta "assets/images". Em seguida, abra o arquivo "preload.js" e adicione o seguinte código:

this.load.image('coin', 'assets/images/coin.png');

Em seguida, abra o arquivo "game.js" e adicione o seguinte código na função "create":

this.coins = this.physics.add.group();
for (let i = 0; i < 10; i++) {
  const coin = this.coins.create(Phaser.Math.Between(100, 500), 0, 'coin');
  coin.setBounceY(Phaser.Math.Between(0.4, 0.8));
}

Este código criará um grupo de 10 moedas que cairão da parte superior da tela e ricochetearão quando atingirem a parte inferior.

The 10 best Mario Party minigames of all time - Gamepur

Erros comuns na criação de jogos com Phaser

Esquecer de iniciar a cena certa no arquivo "boot.js".
Não carregar as sprites corretas no arquivo "preload.js".
Não configurar as colisões corretamente no arquivo "game.js".
Não testar o jogo em diferentes navegadores e dispositivos.

Conclusão

Neste tutorial, você aprendeu como criar um mini jogo do Mario usando o framework Phaser. Você aprendeu a instalar o Phaser, criar um projeto, adicionar o personagem do Mario, adicionar moedas e evitar alguns erros comuns. Com prática e experimentação, você pode criar jogos ainda mais complexos e divertidos.

Perguntas Frequentes

Preciso ter conhecimentos prévios em programação para criar jogos com Phaser?

Não é obrigatório, mas ter conhecimentos básicos de programação pode ajudar. O Phaser é construído em JavaScript, então ter conhecimentos nessa linguagem é útil.

Posso vender meu jogo criado com Phaser?

Sim, você pode vender jogos criados com Phaser. No entanto, é importante ler e concordar com a licença do Phaser antes de usá-lo em um projeto comercial.

Super Mario Party Preview: Hands-On With Mini-Games Galore In Mariothon ...