Point counter and difficulty increase in simple Javascript play

Question

Point counter and difficulty increase in simple Javascript play

Asked 5 years, 4 months ago

Viewed 288 times

2

This is a very simple code where balls appear on the screen and one must click on them to "pop them". I’m learning the language, please understand the lack of skill in it. I would like to do a point counter to know how many of them the user clicked, but I don’t even know where to start. I tried to make a canvas where every time the user "misses" the balls (clicking off them), another one would appear, but, it didn’t work as it should so I removed it from the code. Also, I can’t make the balls appear faster as they’re eliminated, causing some kind of difficulty increase.

<!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>

From now on I thank you, any help will be welcome.

1 answer

Browser other questions tagged javascript

You are not signed in. Login or sign up in order to post.

by Sam • **79,597** points · Answer 1 · 2019-05-21T21:31:44+00:00

One idea would be to count the burst balls creating a variable that starts from scratch:

var estouradas = 0;

And put a span on the body that will receive the variable value to print the count:

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

Also declare two more variables:

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

Done that, in function estourar() you put a if to check how many balls have been popped and do something (e.g. increase the difficulty by reducing the time the balls appear).

For example, every 5 balls burst, the time they appear decreases 100ms (of course these values you adjust as you want) increasing the difficulty:

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

And in function inicia(), you receive as parameter the time of the setInterval:

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

And in the body you call the function with the same variable value timer, which is the initial time:

<body onload="iniciar(1000)">

I also put one more variable nivel beginning from 1 and a span to go counting the level of difficulty.

In short, every 5 balls burst the time they appear decreasing, making the task more difficult and increasing the level:

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>

You can also set a maximum number of balls on the screen to know when the player lost and stop the game.