<!DOCTYPE html>
<html>
<head>
<title>Acerte o Alvo</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="alvo.css">
</head>
<body>
<h1>Acerte o Alvo</h1>
<h2>SCORE</h2>
<input type="text" value="0"disabled><br>
<canvas width="400" height="400"></canvas>
<div id="time"></div>
<script>
var placar = document.querySelector('input');
var tela = document.querySelector('canvas');
var pincel = tela.getContext('2d');
pincel.fillStyle = 'white';
pincel.fillRect(0, 100, 400, 400);
pincel.strokeStyle= 'blue';
var raio = 10;
var raio2=raio+10;
var raio3= raio+20;
var xAleatorio;
var yAleatorio;
var score = 0;
var incremento = 100;
const timeLimit = 60;
var novoJogo = document.createElement('button');
novoJogo.innerHTML = 'Novo Jogo';
document.body.appendChild(novoJogo);
let timeLeft = timeLimit;
const timeDisplay = document.querySelector('#time');
const timer = setInterval(() => {
timeLeft--;
timeDisplay.textContent = `Tempo restante: ${timeLeft}s`;
if (timeLeft === 0) {
clearInterval(timer);
alert('Tempo esgotado!');
}
}, 1000);
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, 400, 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(400);
yAleatorio = sorteiaPosicao(400);
desenhaAlvo(xAleatorio, yAleatorio);
}
function aumentaPlacar() {
placar.value = score + incremento;
}
function diminuiTempo() {
tempoRestante--;
if (tempoRestante == 0) {
fimDeJogo();
}
}
function reiniciarJogo() {
window.location.reload();
novoJogo;
}
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)) {
incremento++;
aumentaPlacar(score + incremento);
alert('Acertou! na mosca 100 pontos!');
inicio();
}
if((x > xAleatorio - raio2)
&& (x < xAleatorio + raio2)
&& (y > yAleatorio - raio2)
&& (y < yAleatorio + raio2)
&& (x > xAleatorio - raio3)
&& (x < xAleatorio + raio3)
&& (y > yAleatorio - raio3)
&& (y < yAleatorio + raio3)) {
alert('Quase, continue tentando, você consegue');
inicio();
}
else
{
alert('Errou, tente de novo');
inicio();
}
}
setInterval(atualizaTela, 2000)
tela.onclick = dispara;
</script>
</body>
</html>
