👨🏻💻 Sobre este projeto | 🛸 O Space Shooter | 🎮 O Controles | 💻 Desenvolvimento | 📝 Conclusão | 📚 Leitura e links recomendados | 📝 Licença
Este projeto foi desenvolvido durante o Bootcamp MRV Fullstack Developer, oferecido em conjunto com a MRV, a DIO (Digital Inovation One) e a Órbi Conecta. Durante a produção deste game foram utilizados vários conceitos apredendidos durante o curso, como o uso da orientação a objetos e o JQuery, com o intuito de facilitar o desenvolvimento.
O jogo produzido consiste em um game retrô semelhante ao Asteroids, desenvolvido em 1979 pela Atari. Sua gameplay consiste em destruir os asteroides antes que eles cheguem a nave, utilizando uma arma que lança bolas de energia. Conforme os asteroides são destruídos a pontuação total cresce, aumentando também a dificuldade do game de forma exponencial.
A movimentação e combate do game é feita exclusivamente pelo mouse, onde a movimentação da nave no eixo X é realizada pelo translado do mouse e o laser é lançado pelo botão esquerdo. Quando o game é iniciado o ponteiro do mouse é automaticamente ocultado, liberando toda a tela para visualização do combate com os asteroides.
O game foi desenvolvimento inteiramente com JavaScript (Vanilla e JQuery), CSS3 e HTML5, utilizando o conhecimento adquirido durante o bootcamp. O projeto original, ministrado pelo instrutor Denilson Bonatti, na atividade "Construindo o seu primeiro jogo de naves", também foi utilizado a biblioteca collision, para JQuery, que verifica a colisão entre dois elementos na tela. No entanto, a sua utilização se tornou problemática no desenvolvimento deste game, levando a construção de um colissor próprio.
O colisor desenvolvido utiliza as coordenadas em tempo real do elemento na tela para produzir um "box collider", que pode ser acrescido através do parâmetro de offsetBoxCollider, retornando um valor booleano true quando um elemento que contém a classe informada no parâmetro selectedClass é detectado. A verificação de detecção funciona através de um querySelectorAll, que seleciona todos os elementos com a classe informada na tela e testa a sua colisão com o objeto através de um laço de repetição.
function collider(object, selectedClass, offsetBoxCollider = 0, blackList = null){
const objectBoxCollider = object.getBoundingClientRect();
const topCollider = objectBoxCollider.top - offsetBoxCollider;
const bottomCollider = objectBoxCollider.bottom + offsetBoxCollider;
const leftCollider = objectBoxCollider.left - offsetBoxCollider;
const rightCollider = objectBoxCollider.right + offsetBoxCollider;
var elementList = document.querySelectorAll(selectedClass);
if(elementList.length > 0){
for (element of elementList){
const laserObject = document.getElementById(element.id);
const laserValues = laserObject.getBoundingClientRect();
if(
laserValues.top >= topCollider &&
laserValues.bottom <= bottomCollider &&
laserValues.left >= leftCollider &&
laserValues.right <= rightCollider &&
!blackListCheck(blackList, element.id)
){
return true;
}
}
}
return false;
}
Além disso, o sistema de colisão funciona em conjunto com uma blackList, que quando informada no parâmetro blackList, realiza a checagem do ID do elemento colidido, evitando múltiplas colisões com o mesmo objeto. Neste game esta função tem o objetivo de permitir que o player fique "invisível" para um asteroide que já foi detectado, eliminando as múltiplas colisões com um único asteroide.
function blackListCheck(blackList, objectID){
if(blackList != null){
if(blackList.length > 0){
for(element of blackList){
if(element == objectID){
return true;
}
}
}
blackList.push(objectID);
}
return false;
}
Além de um colisor próprio, também foi desenvolvido um sistema de pontuação, que salva maior pontuação utilizando o localStorage, que mantém os dados de score na máquina. Deste modo é possível observar a sua pontuação adquirida em game e a maior pontuação obtida entre as partidas.
function getHighScore(currentScore){
var highScore = localStorage.getItem("HighScore");
if (highScore == null){
localStorage.setItem("HighScore", currentScore);
return currentScore;
} else if (currentScore >= highScore){
localStorage.setItem("HighScore", currentScore);
return currentScore;
} else {
return highScore;
}
}
Durante o desenvolvimento do game pude aprofundar meus conhecimentos com o desenvolvimento web, utilizando o JavaScript, CSS3 e HTML5, de maneira a fixar o conhecimento adquirido durante parte do BootCamp MRV Fullstack Developer. Foi uma experiência bastante edificante e espero continuar estudando o desenvolvimento web ou com multiplataformas através de framework's como o React Native e o Flutter.
- Este projeto está sob a licença MIT.
- Todos as imagens e sons utilizados no game foram retirados do pacote de assets gratuítos KENNEY.
👋 Feito por JosManoel com ☕ , 🎧 e 💻.