Afie suas habilidades de JavaScript com estes 9 vídeos divertidos de tutoriais de projetos de jogos

O fato de 98,4% de todos os sites usarem JavaScript é o motivo pelo qual você deve conhecê-lo como desenvolvedor. Em retrospecto, fazer um jogo com JavaScript não apenas ajuda você a aprender rápido. Ele também permite que você domine como aplicar seus conceitos simples a complexos em diferentes situações no trabalho — seja você um iniciante ou um atualizador.

Se você aprender melhor com demonstrações visuais, esses tutoriais de jogos baseados em JavaScript no YouTube valem o seu tempo.

1. Jogo de cartas com JavaScript

Este jogo de cartas JavaScript com Gavin Lon mostra como virar as cartas com mais de 600 linhas de código JavaScript. Embora o foco principal seja ensinar JavaScript, você também aprenderá a combinar o poder de design do CSS com a estruturação DOM do HTML para obter capacidade de resposta com JavaScript.

O objetivo final do projeto é virar algumas cartas, e o jogador adivinha o Ás quando as cartas finalmente trocam de lugar. Cada carta é uma imagem de quatro funções de cartas diferentes. Portanto, embora você não crie as cartas sozinho, aprenderá a manipular suas posições de forma responsiva, incrementar as rodadas do jogo, adicionar ou remover pontuações conforme os níveis mudam e armazenar as pontuações do jogo no

armazenamento local do navegador— tudo usando JavaScript.

O tutorial é passo a passo e fácil de seguir, apesar do trabalho pesado que você fará nos bastidores. É perfeito para iniciantes e atualizadores. Embora se trate da construção de um jogo de cartas, ele expõe você à maioria das técnicas de fiação do JavaScript em situações da vida real. Além disso, desvenda sua capacidade de raciocínio.

2. Jogo 2D Breakout com JavaScript

​​​

Se você quiser aprender a controlar intervalos de ação e mover elementos DOM dinamicamente usando JavaScript, Ania Kubów mostra como isso fica divertido com este tutorial de jogo inovador usando JavaScript. Além disso, o vídeo também demonstra como hospedar e apresentar seu projeto a potenciais empregadores.

Pense em todas as possibilidades em um jogo de fuga; uma plataforma móvel com uma bola atingindo as paredes tangencialmente para quebrar os tijolos acima dela. E você codificará o sistema de recompensa neste também. No geral, vale a pena considerar este tutorial de jogo inovador se você quiser criar algo do zero sem usar agentes de terceiros ou imagens de origem.

Ao conectar sua lógica dentro das funções, o vídeo ensina mais sobre classe JavaScript e conceitos de objeto em etapas fáceis, incluindo melhores práticas de instrução condicional como o switch-case.

3. Jogo da Serpente Javascript

Desvende a nostalgia do jogo Snake II do seu Nokia 3310 criando este jogo de cobra JavaScript com Kyle. Você provavelmente já jogou isso antes e provavelmente jogará muito mais vezes ao longo da vida, pois codificará um usando o JavaScript vanilla.

Ao ensinar você a conectar o DOM dinamicamente, este vídeo demonstra como você pode criar e usar módulos personalizados em JavaScript. Portanto, abre uma oportunidade para você aprender a separar preocupações usando o princípio de não se repetir (DRY).

Nos bastidores, você dominará os conceitos mais avançados de JavaScript. Tarefas, incluindo criar uma grade de jogador, colocação de comida, construir o corpo da cobra, alongar a cobra, codificar o lógica de navegação, criando um esquema de recompensa e penalidade e controlando a velocidade da cobra, irá expor você ao núcleo JavaScript.

4. Jogo da velha com JavaScript

​​​​​

Talvez sua jogabilidade Tic Tac Toe seja aprimorada à medida que você cria uma com JavaScript em outro vídeo com Kyle. Este é um simples, mas valioso projeto para iniciantes em JavaScript para mastigar enquanto você resolve problemas complexos.

O vídeo não termina apenas com JavaScript. Ele também demonstra como controlar o design da interface do usuário usando CSS. Com consistência e comprometimento, você pode aprender quase todas as técnicas necessárias para iniciar sua jornada de desenvolvimento web neste vídeo.

Ao manipular o DOM com JavaScript, o vídeo envolve o trabalho pesado em torno da codificação de decisões de vitória e empate, decisão dos turnos dos jogadores e alinhamento de objetos. Funções, loops e condições de JavaScript são alguns dos conceitos avançados que você aprenderá neste vídeo tutorial de jogo da velha de JavaScript.

5. Jogo de quebra-cabeça de slides com JavaScript

Os quebra-cabeças podem ser tarefas de pensamento. Mas construir um com JavaScript vanilla parece uma maneira divertida de explorar sua criatividade e aprender conceitos básicos a complexos de JavaScript.

Você deseja codificar neste tutorial - se quiser ver como usar os conceitos de JavaScript, incluindo opções condicionais e manipulação dinâmica de posição do DOM usando funções personalizadas e integradas.

Embora o tutor coloque o JavaScript dentro de uma tag de script no arquivo HTML, você pode girar seu script em um arquivo JavaScript dedicado e vinculá-lo ao DOM no seu caso para maior clareza. Independentemente disso, é melhor focar na lógica central e no processo de pensamento para atingir seu objetivo, incluindo como aplicar o que você aprendeu aqui em cenários mais reais.

6. Jogo de corrida de carros com JavaScript

Construir um jogo de corrida de carros usando JavaScript vanilla pode não fornecer a melhor saída gráfica. Mas conectar um jogo de corrida de carros enquanto segue este tutorial irá ensiná-lo a aproveitar o poder de imbuição de funcionalidade do JavaScript em qualquer aplicativo.

Este tutorial envolve a colocação de dois carros (um vermelho e um azul) em uma pista de corrida. O carro azul aparece aleatoriamente de qualquer direção, e o veículo vermelho, representando o jogador, tenta evitar uma colisão. O jogo termina assim que houver contato entre os dois carros.

Embora seja uma descrição simples do que você criará neste, você aprenderá alguma lógica avançada de JavaScript para manipulação e estilo de DOM. Você também obterá informações sobre operadores JavaScript ao criar recompensas e penalidades para jogadores.

Ao adicionar funcionalidades à faixa, alguns conceitos que você aprenderá incluem eventos JavaScript, condições, funções anônimas, animação JavaScript, controle de intervalo e muito mais.

7. Jogo do Mario com JavaScript

Este tutorial do jogo JavaScript Mario é tudo o que você precisa para mergulhar de cabeça no âmago da questão do JavaScript. Embora fazer um jogo Mario com JavaScript pareça complexo, Chris, seu tutor, mostra que é mais do que possível neste vídeo do YouTube. Portanto, você pode querer se divertir e explorar sua capacidade de pensamento crítico construindo junto.

Embora os iniciantes possam achar o tutorial um pouco avançado, é uma busca brilhante para os atualizadores levarem suas habilidades de JavaScript para o próximo nível.

Além de aprender sobre manipulações de elementos, você usará o poder do JavaScript puro na construção de um padrão de tela responsivo para a interface do jogo usando programação orientada a objetos (OOP). Como o jogador está ativamente móvel, a aplicação de controle de teclado JavaScript, manipulação de eventos, loops, operadores, condições e funções integradas e personalizadas estão entre as experiências entre projetos que você ganho.

8. Construir Campo Minado com JavaScript

Deseja explorar o poder das funções recursivas e métodos de matriz na multiplicação de elementos DOM com JavaScript? Você pode querer começar com este tutorial JavaScript Minesweeper por Ania Kubów na Traversy Media.

Envolve muita atenção aos detalhes. Mas é um tutorial amigável para iniciantes e um dos melhores para entender o sistema de layout de grade usando JavaScript. O objetivo final é criar um modelo de grade onde os jogadores evitem pisar em uma mina.

Por mais simples que pareça, você escreverá muita lógica de programação envolvendo a maioria das técnicas básicas de JavaScript para conectar a funcionalidade do jogo nos bastidores.

9. Tutorial de jogo Pokemon JavaScript com tela HTML

Pokemon é um dos projetos de jogo mais complexos que você pode construir usando JavaScript. No entanto, se você passar longas horas de codificação rigorosa com JavaScript e estiver pronto para sair renovado com mais confiança, é melhor entrar neste tutorial.

Além de scripts DOM e animação com JavaScript, o vídeo ensina como mover e renderizar recursos, incluindo áudio e imagens, usando JavaScript. Há muito que o tutorial revela sobre JavaScript que você achará valioso em qualquer problema de codificação da vida real.

Além de outras técnicas de manipulação básicas do JavaScript, o tutorial também usa fortemente os conceitos de OOPs; isso é valioso se você planeja se aprofundar mais tarde no TypeScript. Um dos fatores simplificadores deste tutorial é como o tutor descreve as tarefas.

É fácil recuar quando você imagina o sistema complexo que criará para fazer isso funcionar. Mas pense no que você ganha no final.

Aprenda os aplicativos de solução de problemas do JavaScript

Os jogos usam algumas das lógicas mais responsivas e intuitivas da programação. Portanto, vale a pena aprender JavaScript fazendo um. Embora esses tutoriais sejam baseados em jogos, eles expõem você aos principais conceitos do JavaScript aplicáveis ​​a muitos outros problemas de codificação, incluindo desenvolvimento da Web e criação de aplicativos móveis. Mesmo que planeje recorrer a estruturas posteriormente, você aplicará esses conceitos de qualquer maneira.