[Projeto] Fiz um pouco diferente do projeto original,mas n consegui pensar em uma forma de apagar a bolinha anterior sem apagar tudo,qualquer ajuda é bem vinda | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

<canvas width="1280" height="1024"></canvas>

<script>

    function quadrado(x, y, cor) {
        pincel.fillStyle = cor
        pincel.fillRect(x, y, 100, 100)
        pincel.stroke = "black"
        pincel.strokeRect(x, y, 100, 100)
    }



    var tela = document.querySelector("canvas");
    var pincel = tela.getContext('2d');

    function triangulo(x1, y1, x2, y2, x3, y3, cor) {
        pincel.moveTo(x1, y1)
        pincel.lineTo(x2, y2)
        pincel.lineTo(x3, y3)
        pincel.fillStyle = cor
        pincel.fill()
        pincel.stroke = "black"
    }
    var xq = 0
    var yq = 0
    while (xq < 1280 && yq < 1024) {
        quadrado(xq, yq, 'purple')
        var xq = xq + 100
        var yq = yq + 100
    }

    var xt1 = 100
    var yt1 = 0
    var xt2 = 200
    var yt2 = 100
    var xt3 = 100
    var yt3 = 100

    while (xt1 < 1280 && yt1 < 1024) {
        triangulo(xt1, yt1, xt2, yt2, xt3, yt3, 'yellow')
        var xt1 = xt1 + 100
        var yt1 = yt1 + 100
        var xt2 = xt2 + 100
        var yt2 = yt2 + 100
        var xt3 = xt3 + 100
        var yt3 = yt3 + 100
    }

    function tirobolinha(evento) {
        var x = evento.pageX - tela.offsetLeft
        var y = evento.pageY - tela.offsetTop
        pincel.fillStyle = "black"
        pincel.beginPath()
        pincel.arc(x, y, 20, 0, 2 * 3.14)
        pincel.fill()

    }

    tela.onclick = tirobolinha

    function desenhabolinha(x, y, raio) {
        pincel.fillStyle = "blue"
        pincel.beginPath()
        pincel.arc(x, y, raio, 0, 2 * Math.PI)
        pincel.fill()
    }

    var x = 120
    var y = 0
    function atualizatela() {

        desenhabolinha(x, y, 10)
        x++
        y++
    }

   function borracha() {
        pincel.clearRect()                        ?????????
   }

    setInterval(atualizatela, (20))





</script>

Oi, Matheus! Tudo certo por aí?

Antes de partirmos para a solução, gostaria de te parabenizar pelo projeto. De verdade, ele ficou muito bonito, parabéns pela criatividade!

Para termos a impressão de que a bolinha está se movimentando, podemos, por exemplo, criar uma bolinha branca antes da criação das bolinhas azuis. Dessa forma, estaremos “apagando” os desenhos anteriores. Para fazer isso, será necessário modificar as funções desenhabolinha(), atualizatela() e borracha().

Inicialmente, iremos tornar a função desenhabolinha() mas dinâmica, adicionando um parâmetro para adição de cores, observe:

function desenhabolinha(x, y, raio, cor) {
    pincel.fillStyle = cor
    pincel.beginPath()
    pincel.arc(x, y, raio, 0, 2 * Math.PI)
    pincel.fill()
}

O parâmetro cor foi adicionando e ele corresponderá ao valor atribuído à pincel.fillStyle, fazendo com que, a partir da cor passada por parâmetro (azul, vermelho, branco, etc.), será desenhado um círculo em nossa tela com a cor correspondente.

Feito isso, podemos partir para a função borracha(). Dentro dela, iremos remover o trecho de código pincel.clearRect() e então chamar a função desenhabolinha():

function borracha() {
  desenhabolinha(x, y, 12, "white")
}

Com a chamada de desenhabolinha(), construímos um novo desenho, uma bolinha branca. Para uma melhor compreensão dos valores passados, segue abaixo uma explicação sobre cada um deles:

x: corresponde à posição horizontal da bolinha azul;
y: corresponde à posição vertical da bolinha azul;
12: raio da nova bolinha (branca);
"white": coloração da nova bolinha, a qual será branca.

Por fim, iremos modificar a função atualizatela():

function atualizatela() {
  borracha()
  desenhabolinha(x, y, 10, "blue")
  x++
  y++
}

Na primeira linha do bloco de atualizatela(), chamamos a função borracha(). Após isso, chamamos a função desenhabolinha(), passando os parâmetros para desenhar bolinha azul (note que o parâmetro referente à coloração azul foi adicionado).

Com isso, toda vez que executarmos atualizatela(), parecerá que a bolinha azul está caindo, visto que, antes de criar um novo círculo azul, é criado um círculo branco, “cobrindo” o que foi desenhado anteriormente. Esse efeito também ocorre, pois a bolinha branca tem o raio maior que o da azul.

Matheus, abaixo estou deixando a parte do seu código com as três funções que modificamos:

function desenhabolinha(x, y, raio, cor) {
  pincel.fillStyle = cor
  pincel.beginPath()
  pincel.arc(x, y, raio, 0, 2 * Math.PI)
  pincel.fill()
}

var x = 120
var y = 0

function atualizatela() {
  borracha()
  desenhabolinha(x, y, 10, "blue")
  x++
  y++
}

function borracha() {
  desenhabolinha(x, y, 12, "white")
}

Espero ter ajudado! Caso surja alguma dúvida após minha explicação ou ao longo dos seus estudos, conte comigo!

Forte abraço e até mais.

Caso este post tenha lhe ajudado, por favor, marcar como solucionado ✓.

PRORROGAMOS O DESCONTO!