1
resposta

Jogo do alvo

<canvas width="600" height="400"></canvas>

<script>
  var tela = document.querySelector("canvas");
  var pincel = tela.getContext("2d");

  pincel.fillStyle = "lightgray";
  pincel.fillRect(0, 0, 600, 400);

  var raio = 10;
  var xAleatorio;
  var yAleatorio;

  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"); // maior círculo
    desenhaCirculo(x, y, raio + 10, "white");
    desenhaCirculo(x, y, raio, "red"); // menor circulo
  }
  function sorteiaPosição(maximo) {
    return Math.floor(Math.random() * maximo);
  }
  function limpaTela() {
    pincel.clearRect(0, 0, 600, 400);
  }

  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)) {
      alert("ACERTOUU!!!");
    }
  }
  function atualizaTela() {
    limpaTela();
    xAleatorio = sorteiaPosição(600);
    yAleatorio = sorteiaPosição(400);
    desenhaAlvo(xAleatorio, yAleatorio);
  }
  tela.onclick = dispara;
  setInterval(atualizaTela, 1500);
</script>
1 resposta

Oi, Victor! Tudo bem?

Parabéns pelo seu empenho, seu projeto ficou excelente!

Caso tenha alguma dúvida não deixe de compartilhar.

Continue praticando, bons estudos e até mais.

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software