Construindo um jogo de carros com JavaScript

Domine as Ruas com "Street Cars"! Um Jogo Incrível de Velocidade e Habilidade!

Você já sonhou em dominar as ruas com seu carro em alta velocidade? Bem, agora você pode! Apresentamos "Street Cars" - um emocionante jogo onde você pilota seu carro pela cidade enquanto desvia de obstáculos e conquista carros pelas ruas!

Sobre o Jogo

"Street Cars" é um jogo de navegador simples, mas viciante, onde você controla um carro em uma movimentada via urbana. Seu objetivo? Desviar dos carros que descem em sua direção e evitar colisões a todo custo!

Como Jogar

Usando as teclas de seta direita e esquerda do seu teclado, você pode mover o seu carro para os lados, desviando habilmente dos carros que descem em sua direção. Mantenha-se alerta e mantenha suas habilidades afiadas!

Elementos do Jogo

Os Carros

Os carros descem em sua direção e é seu dever desviar deles. Cada carro que você desvia aumenta sua pontuação e te aproxima de se tornar o verdadeiro rei das ruas!

Velocidade Crescente

À medida que você conquista mais carros, a velocidade do jogo aumenta! Isso significa que você terá que agir mais rápido e tomar decisões mais precisas para sobreviver nas ruas movimentadas.

Desafio Infinito

O jogo continua enquanto você puder evitar colisões. A cada carro conquistado, você se aproxima de um desafio ainda maior!

Dicas Pro

Mantenha os olhos abertos e reaja rapidamente aos carros que descem em sua direção.
A cada 50 carros conquistados, a velocidade dos carros aumenta. Esteja preparado para um desafio ainda maior!
Pressione a barra de espaço para reiniciar o jogo se você falhar.

Lembre-se, a prática leva à perfeição! 

"Street Cars" Divirta-se e boa sorte! ????????

Agora vamos por mão na massa (código)

Vamos lá o que é isso afinal? Brincando de codar é algo bem legal de fazer quando você está travado para construir algo que realmente precisa construir, então queria destravar meus pensamentos e resolvi construir um jogo de carros bem simples na linguagem JavaScript, tudo bem confesso...

...assim posso jogar um pouco. Hora de Codar!

Primeira coisa que fiz foi definir o player:

E fala a verdade, esse é o carrinho mais simpático que você já viu no mundo do desenvolvimento de jogos (humildade... Daniel), mas tudo bem agora já tenho o Player e cadê os adversários:

Justiça seja feita, não queria carros mais poderosos que o meu, então os adversários são carros iguais só que de cores diferentes (isso foi desculpa para não fazer carros diferentes), enfim só inverti a posição dos carros, e você vai saber o motivo agora.

Simples quero um jogo que não vou ultrapassar os carros, pois eles vão descer na contra-mão de direção, ou será que sou eu que estou indo na contra-mão, sei não, mas o jogo vai ser isso aí, eu subindo e os carros descendo na contra-mão, tenho que desviar deles e ir passando pelos carros para marcar pontos, mais ou menos isso, vamos ver se dá certo.

Agora sim, Hora de Codar! (isso parece até aqueles personagens de "Conan O Bárbaro")

Estrutura HTML

O código HTML começa definindo a estrutura básica do documento, com um <canvas> para renderizar o jogo e um <div> para exibir informações sobre os carros conquistados.

Estilização CSS

O CSS define um estilo simples para o <canvas>, garantindo que ele seja exibido corretamente no centro da página.

JavaScript

Variáveis Globais e Inicialização

1. Canvas e Contexto (canvas, ctx): O código JavaScript começa obtendo uma referência para o <canvas> e seu contexto 2D para renderização.
2. Imagens (playerImg, alvoImgs): Carrega as imagens do jogador e dos alvos para posterior uso.
3. Variáveis de Jogo: Define variáveis para controlar o jogador, o estado do jogo, a lista de alvos, contadores de carros conquistados, velocidade dos alvos, entre outros.

Funções de Desenho

1. drawPlayer() e drawAlvos(): Funções para desenhar o jogador e os alvos respectivamente no canvas.
2. drawText(): Desenha texto na tela, exibindo informações como "Game Over" e contagem de carros conquistados.
3. draw(): Função principal de desenho, limpa o canvas, desenha o jogador, os alvos, verifica entrada do usuário e colisões, e atualiza o texto exibido.

Funções de Controle

1. createAlvo(): Cria novos alvos com posição aleatória.
2. moveAlvos(): Move os alvos para baixo na tela, removendo-os quando saem do campo de visão e aumentando o contador de carros conquistados.
3. checkCollision(): Verifica colisões entre o jogador e os alvos.
4. keyDownHandler() e keyUpHandler(): Lidam com as teclas pressionadas pelo usuário, atualizando as variáveis de controle de movimento do jogador.
5. restartGame(): Reinicia o jogo, restaurando as variáveis para seus valores iniciais.

Event Listeners e Intervals

1. addEventListener(): Registra os eventos de pressionar e liberar teclas do teclado para controlar o jogador.
2. setInterval(): Inicia intervalos de tempo para chamar as funções draw() e createAlvo() repetidamente, garantindo a atualização contínua do jogo e a criação de novos alvos.

Intervals adicionais: São usados para aumentar a velocidade dos alvos conforme o jogador conquista mais carros e para atualizar o contador de carros conquistados.

Em resumo, o código cria um jogo simples de evasão de obstáculos em que o jogador controla um carro e deve desviar dos carros que descem na tela. O código JavaScript controla a lógica do jogo, incluindo a renderização, detecção de colisões e interação do usuário, enquanto o HTML e CSS fornecem a estrutura e o estilo necessários para exibir o jogo no navegador.

Agora que você já viu o que o jogo pode fazer, corra para o GitHub e conheça o código deste jogo simples, espero que te ajude no desenvolvimento de códigos JavaScript. 

Código completo no GitHub clique aqui