Um jogo de corrida 2D desenvolvido em JavaScript puro, HTML5 Canvas e CSS3, com diversos modos de personalização, sistema de física, clima dinâmico, itens, HUD completo e minimapa.
Projeto desenvolvido como trabalho acadêmico.
| Campo | Descrição |
|---|---|
| Autor | João Gabriel Sabedra Vieira |
| Professor | Allison |
| Turma | 1º C — ADM |
| Linguagem principal | JavaScript |
Racing Game é um jogo de corrida em vista superior (top-down) onde o jogador pode:
- Escolher entre diferentes carros, cada um com estatísticas únicas (velocidade, aceleração, freio e aderência);
- Personalizar a cor do veículo;
- Selecionar diferentes pistas;
- Definir o nível de dificuldade dos adversários;
- Escolher condições climáticas que afetam a jogabilidade;
- Competir contra oponentes controlados por IA em corridas de múltiplas voltas.
- 🚗 Seleção de carros com estatísticas individuais (SPEED, ACCEL, BRAKE, GRIP)
- 🎨 Personalização de cor do veículo
- 🛣️ Múltiplas pistas para escolher
- 🌦️ Sistema de clima dinâmico (ensolarado, chuva, etc.)
- ⚙️ Níveis de dificuldade ajustáveis
- 📊 HUD completo com telemetria:
- Velocidade, RPM, Marcha
- Estado dos pneus
- Combustível, HP e Nitro
- 🏁 Painel de corrida com posição, voltas, tempo, melhor volta, pontuação e FPS
- 🗺️ Minimapa em tempo real
- 🌀 Tacômetro
- 🎁 Sistema de itens (3 slots disponíveis)
- ⏸️ Sistema de pausa
- 🏆 Tela de finalização com estatísticas da corrida
- 🔊 Controle de áudio
| Tecla | Ação |
|---|---|
W / A / S / D ou Setas |
Acelerar / Frear / Virar |
Space |
Freio de mão (Handbrake) |
Shift |
Nitro (turbo) |
E |
Usar item |
H |
Buzina |
P |
Pausar / Retomar |
Tab |
Visão traseira |
- HTML5 — Estrutura da página e elemento
<canvas>para renderização - CSS3 — Estilização do menu, HUD e telas
- JavaScript (Vanilla) — Toda a lógica do jogo, física, IA dos oponentes e renderização
Não foram utilizados frameworks ou bibliotecas externas — tudo foi feito com tecnologias web nativas.
RacingGame/
├── index.html # Estrutura HTML do jogo (menus, HUD, canvas)
├── style.css # Estilos visuais (menu, HUD, telas)
├── script.js # Lógica completa do jogo
└── README.md # Este arquivo
Não há necessidade de instalação ou dependências. Basta abrir o jogo no navegador:
- Clone ou baixe este repositório:
git clone https://github.com/JAOG1V1/RacingGame.git
- Acesse a pasta:
cd RacingGame - Abra o arquivo
index.htmlno seu navegador (Chrome, Edge, Firefox).
Acesse diretamente pela URL publicada do GitHub Pages:
👉 https://jaog1v1.github.io/RacingGame/
- Navegador moderno com suporte a HTML5 Canvas e JavaScript ES6+
- Recomendado: Google Chrome, Microsoft Edge ou Firefox atualizados
- Teclado para controle do veículo
- Abra o jogo no navegador;
- No menu principal, escolha:
- O carro desejado;
- A cor;
- A pista;
- A dificuldade;
- O clima;
- Clique em START RACE;
- Aguarde a contagem regressiva (3, 2, 1...);
- Use os controles para guiar seu carro até a vitória!
- Ao finalizar todas as voltas, será exibida a tela de resultado.
- Projeto desenvolvido com fins educacionais.
- Todo o código foi escrito em JavaScript puro, sem uso de engines de jogos.
- O jogo roda 100% no navegador, sem servidores ou dependências externas.
Este projeto foi desenvolvido como atividade acadêmica e está disponível para fins de estudo.
João Gabriel Sabedra Vieira 🎓 Turma: 1º C — ADM 👨🏫 Professor: Allison 🔗 GitHub: @JAOG1V1
A 2D racing game developed in pure JavaScript, HTML5 Canvas, and CSS3, featuring customization options, physics, dynamic weather, items, a complete HUD, and a minimap.
Project developed as an academic assignment.
| Field | Description |
|---|---|
| Author | João Gabriel Sabedra Vieira |
| Professor | Allison |
| Class | 1st C — Business Administration |
| Main language | JavaScript |
Racing Game is a top-down racing game where the player can:
- Choose between different cars, each with unique stats (speed, acceleration, brake, grip);
- Customize the car color;
- Pick different tracks;
- Set the AI difficulty level;
- Choose weather conditions that affect gameplay;
- Compete against AI opponents in multi-lap races.
- 🚗 Car selection with individual stats (SPEED, ACCEL, BRAKE, GRIP)
- 🎨 Car color customization
- 🛣️ Multiple tracks to choose from
- 🌦️ Dynamic weather system (sunny, rain, etc.)
- ⚙️ Adjustable difficulty levels
- 📊 Complete HUD with telemetry: speed, RPM, gear, tires, fuel, HP, nitro
- 🏁 Race panel: position, laps, time, best lap, score, FPS
- 🗺️ Real-time minimap
- 🌀 Tachometer
- 🎁 Item system (3 slots)
- ⏸️ Pause system
- 🏆 Finish screen with race stats
- 🔊 Audio control
| Key | Action |
|---|---|
W / A / S / D or Arrow Keys |
Accelerate / Brake / Steer |
Space |
Handbrake |
Shift |
Nitro (boost) |
E |
Use item |
H |
Horn |
P |
Pause / Resume |
Tab |
Rear view |
- HTML5 — Page structure and
<canvas>element - CSS3 — Menu, HUD, and screen styling
- Vanilla JavaScript — All game logic, physics, AI, and rendering
No frameworks or external libraries — built entirely with native web technologies.
Option 1 — Locally
git clone https://github.com/JAOG1V1/RacingGame.git
cd RacingGameThen open index.html in your browser.
Option 2 — GitHub Pages 👉 https://jaog1v1.github.io/RacingGame/
- Open the game in your browser;
- In the main menu, choose your car, color, track, difficulty, and weather;
- Click START RACE;
- Wait for the countdown (3, 2, 1...);
- Drive to victory!
- After finishing all laps, the result screen will be displayed.
This project was developed for educational purposes and is available for study.
João Gabriel Sabedra Vieira 🎓 Class: 1st C — Business Administration 👨🏫 Professor: Allison 🔗 GitHub: @JAOG1V1
⭐ Se gostou do projeto, deixe uma estrela no repositório! ⭐ ⭐ If you liked this project, give it a star! ⭐