Udemy
    •  
    •  
    •  
    •  
    •  
    •  
    •  
    •  
Subscribe
Turn what you know into an opportunity and reach millions around the world.
Learn More
Your cart is empty.
Keep shopping
Games in JS
Highest Rated
Rating: 4.9 out of 5(36 ratings)
296 students

Games in JS

Suba de nível criando jogos em JavaScript
Highest Rated
Created byWillian Justen de Vasconcellos, Bruna Grassi
Last updated 5/2025
Portuguese
Portuguese [Auto],

What you'll learn

  • Configurar projetos com Vite e ReactJS
  • Estilizar com Tailwind v3 e v4
  • Criar aplicação dinâmica com NextJS
  • Trabalhar com inteligência artificial usando OpenAI
  • Criar animações fluidas com Motion
  • Como funciona a Canvas API
  • Trabalhar com TypeScript para um código mais seguro
  • Implementar efeitos sonoros com a Audio API
  • Criar animações com SVG
  • Manipular sprites
  • Aplicar efeitos de Parallax para criar profundidade
  • Seguir melhores práticas no desenvolvimento de aplicações

Course content

7 sections • 128 lectures • 17h 58m total length

  • Introdução2:55
  • Requisitos e Inicialização do projeto3:45

    Comandos usados nessa aula:

    npm create vite@6.1.0 tic-tac-toe

    cd tic-tac-toe

    npm i

    npm run dev

  • Entendendo a estrutura do Vite4:51
  • Configurando o Tailwind7:36

    Comandos usados nessa aula:

    npx tailwindcss@3.4.17 init -p

    npm install -D tailwindcss@3.4.17 postcss@8.4.49 autoprefixer@10.4.20

  • Extensões e plugins Tailwind4:59

    Comandos usados nessa aula:

    npm install -D prettier prettier-plugin-tailwindcss


    // .prettierrc

    {

      "plugins": ["prettier-plugin-tailwindcss"]

    }

  • Customizando cores no Tailwind7:15
  • Inicializando o layout11:37

    Comandos usados nessa aula:

    npm install lucide-react@0.469.0

  • Criando o Board7:57
  • Gerando board state10:29
  • Preenchendo o Board6:25
  • Definindo player atual usando módulo7:38
  • Estilizando players3:21
  • Criando a lógica do Winner13:01
  • Mostrando empate e estilizando o Winner9:28
  • Adicionando botão restart7:09
  • Adicionando método restart0:55
  • Adicionando animações7:31

    Comandos usados nessa aula:

    npm i motion@11.15.0

Requirements

  • Conhecimento básico de JavaScript
  • Conhecimento básico de React

Description

Desenvolva jogos clássicos e modernos usando JavaScript. Aprenda práticas modernas de programação através de projetos práticos como Jogo da Velha, Memória, Forca, Trivia, Snake e Runner.


Se você já domina HTML, CSS, JavaScript e tem algum conhecimento de React, esta é a chance de fortalecer sua lógica e explorar bibliotecas amplamente usadas no dia a dia, mas de formas totalmente novas.


Para os programadores experientes, essa é a oportunidade perfeita para redescobrir a diversão no código, criando projetos diferentes do que se vê no trabalho. Então prepare-se, porque aqui você não apenas aprende, mas também joga, experimenta e evolui!


Jogo da Velha (Tic Tac Toe)

Configure um boilerplate com Vite e React e aprenda a criar um jogo da velha funcional e interativo.


Jogo da Memória

Desenvolva um jogo da memória dinâmico trabalhando com arrays, animações e hooks customizados.


Jogo da Forca

Crie um jogo da forca completo explorando strings, arrays e animações com SVG do zero.


Trivia

Construa um quiz interativo utilizando a OpenAI para gerar perguntas sobre qualquer assunto.


Snake Game

Desenvolva o famoso jogo da cobrinha usando Canvas e aprenda sobre animações e colisões.


Infinite Runner

Monte um jogo endless runner com sprites, animações e interação através da Audio API.


Há algum requisito ou pré-requisito para o curso?

  • Conhecimento básico de JavaScript

  • Conhecimento básico de React

Who this course is for:

  • Se você já domina HTML, CSS, JavaScript e tem algum conhecimento de React, esta é a chance de fortalecer sua lógica e explorar bibliotecas amplamente usadas no dia a dia, mas de formas totalmente novas.
  • Para os programadores experientes, essa é a oportunidade perfeita para redescobrir a diversão no código, criando projetos diferentes do que se vê no trabalho.

Report abuse