2

Este é um código bem simples onde bolinhas surgem na tela e a pessoa deve clicar nelas para "estoura-las". Estou aprendendo a linguagem, por favor entendam a falta de habilidade na mesma. Gostaria de fazer um contador de pontos para saber quantas delas o usuário clicou, mas não sei nem por onde começar. Tentei fazer um Canvas onde cada vez que o usuário "erra" as bolinhas (clicando fora das mesmas), outra apareceria, mas, não funcionou como deveria então eu retirei do código. Não consigo também fazer com que as bolinhas apareçam de maneira mais rápida conforme vão sendo eliminadas, fazendo com que haja algum tipo de aumento de dificuldade.

<!DOCTYPE html>
<html>
	<head>

		<style type="text/css">
			.bola {
				width: 50px;
				height: 50px;
				border-radius: 25px;
				position: absolute;
				cursor: pointer;
				
			}


		</style>

		<meta charset="UTF-8">
		<title> Teste Jogo da Bolinha </title>

	</head>

	<script>
		
		function cor_aleatoria(){
			var hexadecimais = '0123456789ABCDEF';
			cor = '#';
			for (var i = 0; i < 6; i++){
				cor = cor + hexadecimais[Math.floor(Math.random()*16)];
			}
			return cor;
		}

		function addBola(){
			let bola = document.createElement("div");
			bola.setAttribute("class","bola");
			let pX = Math.floor(Math.random() * 500);
			let pY = Math.floor(Math.random() * 500);
			bola.setAttribute("style", "background-color:" + cor_aleatoria() + "; " + "left:" + pX + "px; top:" + pY+ "px; " + bola.setAttribute("onclick","estourar(this)"));
			document.body.appendChild(bola);
		}

		function estourar(elemento){
			document.body.removeChild(elemento);
		}

		function iniciar(){
			setInterval(addBola, 1000);
		}
		
	</script>



	<body onload="iniciar()">

	</body>
</html>

Desde já Agradeço, qualquer ajuda será bem vinda.

1 Resposta 1

2

Uma ideia seria você contar as bolas estouradas criando uma variável que começa do zero:

var estouradas = 0;

E colocar um span no body que receberá o valor da variável para imprimir a contagem:

<span id="pontuacao">0</span>

Declare também mais duas variáveis:

var temporizador; // para o setInterval
var timer = 1000; // tempo inicial do setInterval, que será alterado dinamicamente

Feito isso, na função estourar() você coloca um if para verificar quantas bolas foram estouradas e fazer alguma coisa (ex., aumentar a dificuldade reduzindo o tempo em que as bolinhas aparecem).

Por exemplo, a cada 5 bolas estouradas, o tempo em que elas aparecem diminui 100ms (claro que esses valores você ajusta como quiser) aumentando a dificuldade:

if(estouradas%5 == 0){
  clearInterval(temporizador); // cancela o setInterval
  timer -= 100; // decrementa o tempo
  iniciar(timer); // inicia novamente com um novo tempo
}

E na função inicia(), você recebe como parâmetro o tempo do setInterval:

function iniciar(t){
   temporizador = setInterval(addBola, t);
}

E no body você chama a função com o mesmo valor da variável timer, que é o tempo inicial:

<body onload="iniciar(1000)">

Coloquei também mais uma variável nivel começando do 1 e um span para ir contando o nível de dificuldade.

Resumindo, a cada 5 bolas estouradas o tempo em que elas aparecem vai diminuindo, tornando a tarefa mais difícil e aumentando o nível:

var estouradas = 0;
var temporizador;
var timer = 1000;
var nivel = 1;
function cor_aleatoria(){
   var hexadecimais = '0123456789ABCDEF';
   cor = '#';
   for (var i = 0; i < 6; i++){
      cor = cor + hexadecimais[Math.floor(Math.random()*16)];
   }
   return cor;
}

function addBola(){
   let bola = document.createElement("div");
   bola.setAttribute("class","bola");
   let pX = Math.floor(Math.random() * 500);
   let pY = Math.floor(Math.random() * 500);
   bola.setAttribute("style", "background-color:" + cor_aleatoria() + "; " + "left:" + pX + "px; top:" + pY+ "px; " + bola.setAttribute("onclick","estourar(this)"));
   document.body.appendChild(bola);
}

function estourar(elemento){
   document.body.removeChild(elemento);
   estouradas++;
   document.getElementById("pontuacao").textContent = estouradas;
   if(estouradas%5 == 0){
      clearInterval(temporizador);
      timer -= 100;
      nivel++;
      document.getElementById("nivel").textContent = nivel;
      iniciar(timer);
   }
}

function iniciar(t){
   temporizador = setInterval(addBola, t);
}
.bola {
   width: 50px;
   height: 50px;
   border-radius: 25px;
   position: absolute;
   cursor: pointer;
}
<body onload="iniciar(1000)">
   Estouradas: <span id="pontuacao">0</span> Nível: <span id="nivel">1</span>
</body>

Você pode também definir um número máximo de bolas na tela para saber quando o jogador perdeu e parar o jogo.

3
  • 1
    Telepatia hein. Não é que estava a responder exatamente como tem haha, com % 5 e -= 100. Parece feitico lol.
    – Isac
    Commented 21/05/2019 às 21:33
  • :D nossa! rsrs... Mas posta aí, com certeza a sua sugestão será diferente em outros aspectos e vale como sugestão tb.
    – Sam
    Commented 21/05/2019 às 21:35
  • Não justifica só diferia no temporizador, que tinha trocado por setTimeout, o resto é tudo igual :D.
    – Isac
    Commented 21/05/2019 às 21:38

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .