Solucionado (ver solução)
Solucionado
(ver solução)
2
respostas

Turma ainda não terminei de ver as aulas

Mas já tentei fazer o código todo. Me diz o que acham!

<div class="container">
  <h1>Acerte o Alvo</h1>
  <canvas></canvas>
  <h3 data-placar></h3>
</div>

<script>
  const tela = document.querySelector('canvas')
  const container = document.querySelector('.container')
  const pincel = tela.getContext('2d')
  const placar = document.querySelector('[data-placar]')

  const width = 600
  const height = 400
  const FPS = 60
  const velAlvo = 1200

  container.style.width = width
  container.style.display = 'flex'
  container.style.flexDirection = 'column'
  container.style.alignItems = 'center'
  container.style.justifyContent = 'center'

  tela.setAttribute('width', width)
  tela.setAttribute('height', height)

  var acertos = 0
  var xAlvo = Math.round(Math.random() * width)
  var yAlvo = Math.round(Math.random() * height)

  //tela
  function desenhaTela() {
    pincel.fillStyle = 'lightgrey'
    pincel.fillRect(0, 0, width, height)
    pincel.strokeRect(0, 0, width, height)
  }

  function limpaTela() {
    pincel.clearRect(0, 0, width, height)
  }

  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, 30, 'red')
    desenhaCirculo(x, y, 20, 'white')
    desenhaCirculo(x, y, 10, 'red')
  }

  function mudaAlvo() {
    xAlvo = Math.floor(Math.random() * width)
    yAlvo = Math.floor(Math.random() * height)
  }

  function atirar(evento) {
    let xTiro = evento.pageX - tela.offsetLeft
    let yTiro = evento.pageY - tela.offsetTop

    if (
      xTiro >= xAlvo - 10 &&
      xTiro <= xAlvo + 10 &&
      yTiro >= yAlvo - 10 &&
      yTiro <= yAlvo + 10
    ) {
      acertos++
    }
  }

  function atualizaPlacar() {
    placar.textContent = `Placar: ${acertos}`
  }

  function atualizaTela() {
    limpaTela()
    desenhaTela()

    desenhaAlvo(xAlvo, yAlvo)
    atualizaPlacar()
  }

  setInterval(atualizaTela, FPS / 1000)
  setInterval(mudaAlvo, velAlvo)

  tela.onclick = atirar
</script>

Com o código desta forma já posso fazer diferentes níveis de dificuldade apenas mudando a velocidade do alvo.

Eu pensei em começar com tempo de 1,5 segundos e ir diminuindo o tempo (aumentando a velocidade do alvo) a cada 15 acertos, até chegar o mínimo de 0.5 segundos. Aí depois pode colocar 2 alvos na tela com tempo de 2,5 segundos e ir diminuindo até 1 segundo.

2 respostas

https://tiro-ao-alvo.vercel.app/

solução!

Olá Antonio, tudo bem? Espero que sim.

Meus parabéns!!!

Ficou muito legal, mesmo!

Tanto o game que ficou muito divertido e o tópico que além de enviar o código completinho ainda subiu o site facilitando muito a visualização do mesmo, fiz alguns teste e de fato tá bem redondinho facilitando novas implementações.

Antonio continue assim, parabéns pelo seu esforço! Quanto tiver alguma dúvida me coloco à disposição.

Além disso, se você se sentir confortável, deixo aqui a recomendação de que entre na nossa comunidade no Discord e compartilhe o que desenvolveu, assim você pode aprender mais, colaborar no aprendizado de outras pessoas e até fazer novos amigos. Segue os links para um artigo e um Alura+ que falam um pouquinho sobre essa comunidade do Discord da Alura:

Mais uma vez, meus parabéns pelo empenho! Continue assim!

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