<meta charset="utf-8">
<hr>
<h1>Tente acertar o alvo!</h1>
<hr>
<big>Esse minijogo é ótimo para treinar sua mira para jogos de tiro!</big>
<hr>
<canvas width="600" height="400"></canvas>
<br>
<button>Mudar velocidade</button>
<script>
function desenhaBordas()
{
pincel.strokeStyle = "black";
pincel.strokeRect(0 , 0 , 600 , 400);
}
function desenhaCirculo(x , y , raio , cor)
{
pincel.fillStyle = cor;
pincel.beginPath();
pincel.arc(x, y, raio, 0, 2 * Math.PI);
pincel.fill();
}
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 dispara(evento)
{
var xClick = evento.pageX - tela.offsetLeft;
var yClick = evento.pageY - tela.offsetTop;
auxDispara(xAlvo , yAlvo , xClick , yClick);
}
function auxDispara(xAlvo , yAlvo , xClick , yClick)
{
var xAlvoMin = xAlvo - 10;
var xAlvoMax = xAlvo + 10;
var yAlvoMin = yAlvo - 10;
var yAlvoMax = yAlvo + 10;
if(xClick < xAlvoMax && xClick > xAlvoMin)
{
if(yClick < yAlvoMax && yClick > yAlvoMin)
{
score++;
alert("Você acertou! | Pontos: " + score);
}
}
}
function atualizaTela()
{
pincel.clearRect(0 , 0 , 600 , 400);
desenhaBordas();
xAlvo = sorteiaPosicao(600);
yAlvo = sorteiaPosicao(400);
desenhaAlvo(xAlvo , yAlvo);
}
var botao = document.querySelector("button");
var tela = document.querySelector("canvas");
var pincel = tela.getContext("2d");
pincel.fillStyle = "lightgray";
pincel.fillRect(0 , 0 , 600 , 400);
var raio = 10;
var score = 0;
var xAlvo;
var yAlvo;
var velocidade = 1000;
var auxVel = 3;
if(auxVel == 0){auxVel = 3;}
if(auxVel == 1){velocidade = 500;}
if(auxVel == 2){velocidade = 750;}
if(auxVel == 3){velocidade = 1000;}
botao.onclick = function(){auxVel = aux + 1;}
setInterval(atualizaTela, velocidade);
tela.onclick = dispara;
document.write(" | Velocidade: " + auxVel);
</script>