Roadmap
Avançado

Text-based MMORPG com JavaScript

Entenda o processo de criação de um jogo MMORPG web com JavaScript

react
nextjs
javascript
prisma
trpc
tailwind

Iniciando a UI

Como estou utilizando NextJS nesse projeto, nosso código funciona com TSX e react, caso esteja utilizando outra framework você pode copiar os códigos e adaptar para o seu projeto.

Inicialmente eu vou copiar o arquivo index.tsx que esta na pasta src/pages e vou começar a criar meu código.

export default function Home() {
  return (
    <>
      <main className=""></main>
    </>
  );
}
Clique aqui para expandir

Depois de limpar o código do index.tsx nosso aquivo deve ficar como no exemplo acima, agora vamos começar a criar nossa UI.

Eu gosto de utilizar flexbox no meu css para facilitar na hora de tornar o design responsivo, para isso eu vou quebrar minha interface em colunas e linhas, assim eu posso enxergar exatamente como ela vai ficar.

Grid

Assim que eu imagino minhas divs, vamos começar a criar elas em nosso código.

Convertendo isso para Divs ficaria assim:

Grid

export default function Home() {
  return (
    <>
      <main className="flex h-screen w-screen bg-green-700 gap-2">
        <div className="flex h-full w-full bg-red-700 gap-2">
          <div className="h-full w-full bg-red-500">
            <h1 className="text-4xl font-bold text-white">Hello World</h1>
          </div>
          <div className="flex flex-col h-full w-full justify-between bg-red-500">
            <div className="w-full bg-red-200">
              <h1 className="text-4xl font-bold text-white">Hello World</h1>
            </div>
            <div className="w-full bg-red-200">
              <h1 className="text-4xl font-bold text-white">Hello World</h1>
            </div>
            <div className="w-full bg-red-200">
              <h1 className="text-4xl font-bold text-white">Hello World</h1>
            </div>
          </div>
        </div>
        <div className="flex flex-col h-full w-full bg-red-700 gap-2">
          <div className="h-full w-full bg-red-500">
            <h1 className="text-4xl font-bold text-white">Hello World</h1>
          </div>
          <div className="h-full w-full bg-red-500">
            <h1 className="text-4xl font-bold text-white">Hello World</h1>
          </div>
        </div>
      </main>
    </>
  );
}
Clique aqui para expandir

O ideal é que cada parte seja um componente diferente, pra não ter que ficar trabalhando com varios arquivos vou manter tudo aqui, mas você pode separar em arquivos diferentes.

Vamos mudar as cores agora e adicionar uns textos para ficar mais fácil de visualizar.

export default function Home() {
  return (
    <>
      <main className="flex h-screen w-screen bg-[#152724] gap-2">
        <div className="flex h-full w-full bg-[#152724] gap-2">
          <div className="h-full w-full bg-[#2C534A]">
            <h1 className="text-4xl font-bold text-white">
              Imagem do personagem
            </h1>
          </div>
          <div className="flex flex-col h-full w-full justify-between bg-[#1D2F2C]">
            <div className="w-full bg-[#2C534B]">
              <h1 className="text-4xl font-bold text-white">Menu 1</h1>
            </div>
            <div className="w-full bg-[#2C534B]">
              <h1 className="text-4xl font-bold text-white">Menu 2</h1>
            </div>
            <div className="w-full bg-[#2C534B]">
              <h1 className="text-4xl font-bold text-white">Menu 3</h1>
            </div>
          </div>
        </div>
        <div className="flex flex-col h-full w-full bg-[#152724] gap-2">
          <div className="h-full w-full bg-[#1D2F2C]">
            <h1 className="text-4xl font-bold text-white">Mapa</h1>
          </div>
          <div className="h-full w-full bg-[#1D2F2C]">
            <h1 className="text-4xl font-bold text-white">Atividades</h1>
          </div>
        </div>
      </main>
    </>
  );
}
Clique aqui para expandir

Grid

Agora que temos nosso grid pronto vamos começar a criar os nossos componentes, primeiro vamos criar a imagem do personagem a esquerda.

Caso não tenha familiariade com o NextJS, ele tem um componente de imagem proprio que ele sugere que você utilize, ele é otimizado para carregar imagens de forma mais eficiente, então vamos utilizar ele.

import Image from "next/image"; // Adicionaremos no topo do arquivo

// <h1 className="text-4xl font-bold text-white">Imagem do personagem</h1>
<Image
  src="/warrior.png"
  alt="Logo"
  width={0}
  height={0}
  sizes="100vw"
  style={{ width: "100%", height: "100%", objectFit: "cover" }}
/>;
Clique aqui para expandir

A principio não temos as imagens dos personagens, então vamos criar as classes no Midjourney para as classes do nosso jogo.

Se você for na aula 1 do primeiro modulo vai ver que no nosso mapa mental as classes que escolhemos foram:

  1. Warrior
  2. Mage
  3. Rouge
  4. Druid

Então vamos criar elas no Midjourney.

Os prompts que eu usei foram:

Warrior: A warrior of a RPG game, valiant knight, standing atop a desolate hill overlooking a grand battlefield, by Studio Ghibli --ar 2:3

Rouge: A hunter from a RPG game, an assassin, raining in the florest, night, in a dense tropical florest, closer to the camera, ready to kill, assassinating, by Studio Ghibli --ar 2:3

Mage: A sorcerer from a RPG game, a great wizard, golden shiny tunic, great white staff with a green gem on it, in the desert, conjuring a spell, wisdom, by Studio Ghibli --ar 2:3

Druid: A druid from a RPG game, long hair, very strong, celtic, stonehenge, animals near him, sit down, by Studio Ghibli --ar 2:3
Clique aqui para expandir

O Bernardo adora colocar by Studio Ghibli no final dos prompts dele, então eu coloquei também, mas você pode colocar qualquer coisa que quiser, ele vai ditar o traço do desenho.

Essas foram as imagens criadas:

WarriorRouge MageDruid

Honestamente eu gostei bastante então vou ficar com elas, pode usar no seu tbm ou criar suas proprias imagens.

A nossa ui com a imagem vai ficar assim:

Grid

esse é o código todo:

import Image from "next/image";

export default function Home() {
  return (
    <>
      <main className="flex h-screen w-screen bg-[#152724] gap-2">
        <div className="flex h-full w-full bg-[#152724] gap-2">
          <div className="h-full w-fit bg-[#2C534A]">
            <Image
              src="/druid.png"
              alt="Logo"
              width={0}
              height={0}
              sizes="100vw"
              style={{ width: "100%", height: "100%", objectFit: "cover" }}
            />
          </div>
          <div className="flex flex-col h-full w-full justify-between bg-[#1D2F2C]">
            <div className="w-full bg-[#2C534B]">
              <h1 className="text-4xl font-bold text-white">Menu 1</h1>
            </div>
            <div className="w-full bg-[#2C534B]">
              <h1 className="text-4xl font-bold text-white">Menu 2</h1>
            </div>
            <div className="w-full bg-[#2C534B]">
              <h1 className="text-4xl font-bold text-white">Menu 3</h1>
            </div>
          </div>
        </div>
        <div className="flex flex-col h-full w-full bg-[#152724] gap-2">
          <div className="h-full w-full bg-[#1D2F2C]">
            <h1 className="text-4xl font-bold text-white">Mapa</h1>
          </div>
          <div className="h-full w-full bg-[#1D2F2C]">
            <h1 className="text-4xl font-bold text-white">Atividades</h1>
          </div>
        </div>
      </main>
    </>
  );
}
Clique aqui para expandir
Opa, calma aí!

Parece que você não está logado, caso tenha interesse em salvar seu progresso de estudo faça login agora.