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.