Solucionado
Olá Arthur, tudo bem?
Vou te dar algumas dicas de como fazer isso para você poder adaptar da maneira que você queira, ok?
Em nosso html irei criar um campo para ficar a pontuação, logo abaixo do canvas:
<canvas width="600" height="400"></canvas>
<h1 id="pontuacao">0</h1>E em nosso script irei fazer a seguinte mudança:
var pontuacao = 0;
var contador = document.getElementById("pontuacao");
contador.innerText = pontuacao
Estou chamando de contador o nosso h1 e estou dizendo que o conteúdo dele vai ser o valor da variável pontuação através do atributo innerText
Agora precisamos modificar algumas funções:
Dispara()Bem, a mudança que irei fazer é simples, irei trocar o alert para uma função chamada atualizaPlacar()
// Restante do código da função Dispara
&& (y < yAleatorio + raio)) {
atualizaPlacar();
}E a função atualizaPlacar() terá o seguinte formato:
function atualizaPlacar() {
pontuacao++;
contador.innerText = pontuacao;
verificaVelocidade();
}Ou seja, toda vez que o usuário acertar o alvo, irei aumentar a pontuação dele, trocar o valor do texto que está dentro do nosso contador e chamo uma função chamada verificaVelocidade()
function verificaVelocidade(){
velocidade = velocidade - 200;
}Bem, aqui pode entrar sua criatividade para definir os níveis do jogo com base na pontuação, no meu caso eu estou deixando o jogo 200 milissegundos mais rápido a cada acerto, você poderia fazer algo parecido como:
if(pontuacao == 5) {
velocidade = 2000;
} else if (pontuacao == 10) {
velocidade = 1500;
} E agora que temos todas nossas funções implementadas, vou criar a função que vai gerenciar tudo isso:
function atualizaJogo(){
atualizaTela();
setTimeout(atualizaJogo, velocidade);
}
atualizaJogo();O que eu faço é chamar a nossa função atualizaTela e dizer que é para essa função atualizaJogo ser chamada novamente esperando o valor da velocidade :)
Compreendeu? Abraços e Bons Estudos!
Opa Arthur, está aqui :)
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<canvas width="600" height="400"></canvas>
<h1 id="pontuacao">0</h1>
<script>
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
var contador = document.getElementById("pontuacao");
var pontuacao = 0;
var velocidade = 3000;
pincel.fillStyle = 'lightgray';
pincel.fillRect(0, 0, 600, 400);
var raio = 10;
var xAleatorio;
var yAleatorio;
contador.innerText = pontuacao;
function atualizaPlacar() {
pontuacao++;
contador.innerText = pontuacao;
verificaVelocidade();
}
function verificaVelocidade(){
// if(pontuacao == 5 ) {
// velocidade = 1500;
// console.log("Aqui");
// } else if (pontuacao == 8) {
// velocidade = 500;
// } else if(pontuacao == 15) {
// velocidade = 200;
// }
velocidade = velocidade - 200;
console.log(velocidade)
}
function desenhaCirculo(x, y, raio, cor) {
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
function limpaTela() {
pincel.clearRect(0, 0, 600, 400);
}
function desenhaAlvo(x,y) {
desenhaCirculo(x, y, raio+20, 'red');
desenhaCirculo(x, y, raio+10, 'white');
desenhaCirculo(x, y, raio, 'red');
}
function sorteiaPosicao(maximo) {
return Math.floor(Math.random() * maximo);
}
function atualizaTela() {
limpaTela();
xAleatorio = sorteiaPosicao(600);
yAleatorio = sorteiaPosicao(400);
desenhaAlvo(xAleatorio, yAleatorio);
}
function atualizaJogo(){
atualizaTela();
setTimeout(atualizaJogo, velocidade);
}
function dispara(evento) {
var x = evento.pageX - tela.offsetLeft;
var y = evento.pageY - tela.offsetTop;
if((x > xAleatorio - raio)
&& (x < xAleatorio + raio)
&& (y > yAleatorio - raio)
&& (y < yAleatorio + raio)) {
atualizaPlacar();
}
}
atualizaJogo();
tela.onclick = dispara;
</script>
</body>
</html>Abraços e Bons Estudos!
