Resolução no VS Code

Aproveitei que finalizei recentemente o curso de Lógica de programação II: pratique com desenhos, animações e um jogo e resolvi praticar a atividade do Gui Lima no VS Code em vez do p5.js. Segue a resolução abaixo:

<meta charset="UTF-8" />
<canvas width="600" height="400"></canvas>

<script>
  let cenario = document.querySelector('canvas')
  let pincel = cenario.getContext('2d')
  pincel.fillRect(0, 0, 600, 400)

  let xBolinha = 300
  let yBolinha = 200

  function desenhaBolinha(xBolinha, yBolinha) {
    pincel.fillStyle = 'white'
    pincel.beginPath()
    pincel.arc(xBolinha, yBolinha, 10, 0, 2 * Math.PI)
    pincel.fill()
  }

  let velocidadeX = 2
  let velocidadeY = 2

  function moveBolinha() {
    pincel.fillStyle = 'black'
    pincel.clearRect(0, 0, 600, 400)
    pincel.fillRect(0, 0, 600, 400)
    desenhaBolinha(xBolinha, yBolinha)
    xBolinha += velocidadeX
    yBolinha += velocidadeY

    if (xBolinha > 600 || xBolinha < 0) {
      velocidadeX *= -1
    }

    if (yBolinha > 400 || yBolinha < 0) {
      velocidadeY *= -1
    }
  }

  setInterval(moveBolinha, 5)
</script>