Skip to content

Latest commit

 

History

History
128 lines (91 loc) · 8.32 KB

File metadata and controls

128 lines (91 loc) · 8.32 KB


jogo2d-javascript

◦ Código fonte da minha série "Como programar um jogo 2D em JavaScript" no Youtube

SVG JavaScript HTML5

GitHub top language GitHub code size in bytes GitHub commit activity GitHub license

📒 Sumário


📍 Visão Geral

Este projeto é um jogo de luta 2D implementado em JavaScript. As funcionalidades principais incluem renderizar elementos do jogo em um canvas, capturar a entrada do usuário para movimento e ataques do jogador, e lidar com atualizações de animação. O propósito do jogo é proporcionar uma experiência interativa e divertida para os jogadores, permitindo que eles controlem um personagem de luta e participem de batalhas. Sua proposta de valor está na simplicidade e acessibilidade, bem como no potencial de personalização e expansão pelos desenvolvedores.


⚙️ Recursos

Recurso Descrição
⚙️ Arquitetura O código segue uma arquitetura simples em que o arquivo index.html serve como ponto de entrada para o jogo. O arquivo game.js lida com a configuração do canvas e o loop de animação. Sprites.js define as classes Sprite e Fighter. Controls.js captura a entrada do usuário e lida com o movimento e ataques do jogador. Em geral, a arquitetura promove a separação de preocupações e a reutilização de componentes.
📖 Documentação O código carece de documentação abrangente. Embora os comentários dentro do código forneçam algumas informações, há a necessidade de explicações mais detalhadas e exemplos de uso para melhorar a clareza e a facilidade de entendimento pelos desenvolvedores.
🔗 Dependências O sistema não depende de bibliotecas ou sistemas externos. Ele é construído puramente em JavaScript e HTML/CSS.

🧩 Módulos

Arquivo Resumo
index.html Este código é o esqueleto HTML de um jogo de luta. Ele importa arquivos CSS e JavaScript necessários e fornece um canvas vazio para renderizar o jogo. Os arquivos JavaScript lidam com a lógica do jogo, controlando sprites e entrada do usuário por meio do controls.js.
style.css Este trecho de código define alguns estilos iniciais para uma página da web. Ele remove margens e preenchimentos padrão e define a propriedade box-sizing como border-box, o que ajuda no manuseio das larguras e alturas dos elementos. A cor de fundo do corpo é definida como #1c1c1c, criando um fundo escuro visualmente atraente.
controls.js Este código captura eventos de teclado e lida com o movimento e os ataques do jogador em um jogo. Ele rastreia pressionamentos e liberações de teclas usando o objeto keys e atualiza um objeto jogador com base nesses inputs. A função handleControls lida com a lógica de movimento e ataque do jogador, atualizando o sprite e a velocidade do jogador de acordo.
game.js Este código configura um canvas e um loop de animação, atualizando elementos do jogo a uma taxa de quadros desejada. Ele controla a entrada do usuário, atualiza o canvas e os objetos do jogo. O loop garante uma animação suave, levando em consideração a variação de lag entre os quadros.
sprites.js Este código define uma classe Sprite que representa um objeto de imagem no canvas, capaz de ter diferentes sprites e animações. Também inclui uma classe Fighter que estende Sprite, com funcionalidades adicionais específicas de um personagem de luta. O código também cria instâncias das classes Fighter e Sprite para representar um personagem jogador e um objeto de fundo no canvas.

🚀 Começando

✔️ Pré-requisitos

Antes de começar, certifique-se de que você possui os seguintes pré-requisitos instalados:

npm install http-server -g

📦 Instalação

  1. Clone o repositório jogo2d-javascript:
git clone https://github.com/zF4ke/jogo2d-javascript
  1. Navegue até o diretório do projeto:
cd jogo2d-javascript

🎮 Usando jogo2d-javascript

npx http-server

🤝 Contribuindo

Contribuições são sempre bem-vindas! Siga estas etapas:

  1. Faça um fork do repositório do projeto. Isso cria uma cópia do projeto em sua conta que você pode modificar sem afetar o projeto original.
  2. Clone o repositório forkado para a sua máquina local usando um cliente Git como Git ou GitHub Desktop.
  3. Crie um novo branch com um nome descritivo (por exemplo, new-feature-branch ou bugfix-issue-123).
git checkout -b new-feature-branch
  1. Faça alterações no código do projeto.
  2. Comite suas alterações para o seu branch local com uma mensagem de commit clara que explique as alterações que você fez.
git commit -m 'Implementado nova funcionalidade.'
  1. Envie suas alterações para o repositório forkado no GitHub usando o seguinte comando
git push origin new-feature-branch
  1. Crie uma nova pull request para o repositório do projeto original. Na pull request, descreva as alterações que você fez e por que são necessárias. Os mantenedores do projeto revisarão suas alterações e fornecerão feedback ou as mesclarão no branch principal.

📄 Licença

Este projeto está licenciado sob a Licença MIT. Veja o arquivo LICENSE para obter informações adicionais.


👏 Agradecimentos

  • ℹ️ Chris Courses - https://www.youtube.com/@ChrisCourses