Boa noite pessoal!!!
Sou iniciante em Javascript e estou tentando desenvolver um pequeno jogo utilizando HTML5, CSS3 e Javascript puro e gostaria que verificassem se há algum bug na aplicação.
Aplicação consiste no famoso Gênius, quando clico no botão iniciar ele deve exibir a mensagem “SorteandoCores” , quando for a vez do usuário deve ser exibida a mensagem “Sua vez” e quando o usuário errar a sequência deve exibir a mensagem “Vc perdeu”, se o usuário clicar no botão iniciar reinicia o jogo
Queria saber se há algum bug nesse código
Gostaria de sugestão para uma melhoria no código dessa aplicação, com menas linhas de código e um código mais legível
Não reparem na se houver uma má identação do código e também se o código tiver erros de sintaxe, pois programei utilizando um editor de texto do Android, então pode não rodar no navegador de vcs corretamente pois fiz ele para se adaptar ao tamanho da tela do celular
Segue o código da aplicação:
<!DOCTYPE html>
<html lang="pt">
<head>
<title>Genius</title>
<style type="text/css">
#container{
background-color:black;
width:300px;
height:300px;
margin:50px auto;
border-radius:150px;
display:flex;
flex-wrap:wrap;
}
#container div{
width:calc(50% - 20px);
height:calc(50% - 20px);
margin:10px;
opacity:0.5;
transition:opacity 0.6s,filter 0.6s;
}
#azul{
background-color:#08f;
border-radius:100% 0% 0% 0%;
}
#vermelho{
background-color:#f00;
border-radius:0% 100% 0% 0%;
}
#amarelo{
background-color:#ff0;
border-radius:0% 0% 0% 100%;
}
#verde{
background-color:#0f0;
border-radius:0% 0% 100% 0%;
}
input{
width:150px;
margin-left:100px;
background-color:#000;
color:#fff;
font-size:30px;
border:none;
}
h1{
visibility:hidden;
text-align:center;
}
</style>
</head>
<body>
<h1 id="exibição">Exibe status</h1>
<div id="container">
<div id="azul"></div>
<div id="vermelho"></div>
<div id="amarelo"></div>
<div id="verde"></div>
</div>
<input id="botão" type="button" value="iniciar"/>
<script>
var cores=["azul","vermelho","amarelo","verde"];
var sequenciaCoresAleatorias=[];
var sequenciaCoresJogador=[];
var iniciou=false;/*variável que controla se o jogo iniciou ou não*/
var tempo;
var luzAcesa=false;
var x=0;
var objsDv=document.querySelectorAll("#container>div");
var objH1=document.getElementById("exibição");
function iniciaJogo(){
if(!iniciou){
objH1.innerHTML="SorteandoCores";
objH1.style.color="#f80";
objH1.style.visibility="visible";
iniciou=true;
}
else{
clearInterval(tempo);
luzAcesa=false;
/*remove todos os elementos do arrays se o jogador perder ou jogo for resetado*/
sequenciaCoresAleatorias.splice(0,sequenciaCoresAleatorias.length);
sequenciaCoresJogador.splice(0,sequenciaCoresJogador.length);
x=0;
objH1.innerHTML="SorteandoCores";
objH1.style.color="#f80";
objH1.style.visibility="visible";
tempo=setInterval(piscaOuApaga,700);
}
}
/*Controla se a luz deve acender ou apagar*/
function piscaOuApaga(){
if(!luzAcesa){
piscaLuz();
luzAcesa=true;
}
else{
apagaLuz();
luzAcesa=false;
}
}
function piscaLuz(){
/*Se a variável x que varre o array para pintar for igual ao tamanho do array sequenciaCoresAleatorias então crie uma nova cor aleatória e adicione ao array*/
if(x==sequenciaCoresAleatorias.length){
var corRandom=Math.floor(Math.random()*4);
sequenciaCoresAleatorias.push(corRandom);
x=0;/*zera o índice do array de cores para começar a pintar o array de cores novamente do início a cada nova cor sorteada*/
}
/*esse loop escure o fundo antes que uma luz pisque assim garantimos que apenas uma luz estará acesa quando esta piscar*/
for(var i=0;i<objsDv.length;i++){
objsDv[i].style.opacity="0.5";
objsDv[i].style.filter="brightness(100%)";
}
/*pisca todas as cores que estão armazenada no array a cada nova cor selecionada*/
objsDv[sequenciaCoresAleatorias[x]].style.opacity="1.0";
/*filter regula brilho da imagem*/
objsDv[sequenciaCoresAleatorias[x]].style.filter="brightness(500%)";
x++; /*incrementa a variável x para varrer todo o array cores a cada piscada*/
}
function apagaLuz(){
for(var i=0;i<objsDv.length;i++){
objsDv[i].style.opacity="0.5";
objsDv[i].style.filter="brightness(100%)";
}
/*pausa o piscar das luzes,quando x tiver o tamanho do array sequenciaCoresAleatorias*/
if(x==sequenciaCoresAleatorias.length){
clearInterval(tempo);
luzAcesa=false;
objH1.innerHTML="Sua Vez!";
objH1.style.color="#80f";
adicionaEventosClickJogador();
}
}
function adicionaEventosClickJogador(){
for(var i=0;i<objsDv.length;i++){
objsDv[i].addEventListener("click",armazenaCoresJogador);
}
}
function removeEventosClickJogador(){
for(var i=0;i<objsDv.length;i++){
objsDv[i].removeEventListener("click",armazenaCoresJogador);
}
}
function armazenaCoresJogador(){
/*this identifica o elemento onde aconteceu o evento click e compara o id desse elemento que é o nome da cor com a cor do array cores,se for igual adiciona a cor clicada no array cores pelo jogador */
for(var i=0;i<cores.length;i++){
if(this.id==cores[i]){
sequenciaCoresJogador.push(i);
verificaSeAcertouSequencia() ;
}
}
/*se o vetores das cores do jogador e das cores aleatórias tiverem o mesmo tamanho remover os eventos de clique para que o jogador não consiga mais clicar enquanto novas cores são sorteadas*/
}
function verificaSeAcertouSequencia(){
for(var i=0;i<sequenciaCoresAleatorias.length;i++){
/*compara indice com indice as cores para
ver se o jogador acertou a sequencia caso tenha acertado,verifica se o indice verificado seja o último do array caso seja ,dispara o sorteador de cores novamente*/
if(sequenciaCoresJogador[i]==sequenciaCoresAleatorias[i]) {
if(i==sequenciaCoresAleatorias.length-1){
removeEventosClickJogador();
sequenciaCoresJogador.splice(0,sequenciaCoresJogador.length);
objH1.innerHTML="SorteandoCores";
objH1.style.color="#f80";
clearInterval(tempo);
tempo=setInterval(piscaOuApaga,700);
}
}
else{
objH1.innerHTML="Você Perdeu";
objH1.style.color="#f00";
luzAcesa=false;
removeEventosClickJogador();
}
}
}
var botao=document.getElementById("botão");
botao.addEventListener("click",iniciaJogo);
</script>
</body>
</html>