Passando pro javascript puro

Tentei passar o que aprendi aqui neste curso com o que já havia aprendido com professor Flávio. Aqui está o código, mas sem os sons infelizmente...

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

<script>



 function bolinha(xBolinha, yBolinha, raio){

     pincel.fillStyle = 'green';
     pincel.beginPath();
     pincel.arc(xBolinha, yBolinha, raio, 0, 2*Math.PI);
     pincel.fill();
 }

 function limpaTela(){
    pincel.fillStyle = 'black';

    pincel.fillRect(0, 0, 600, 400);

 }

 function atualizaTela(){

   limpaTela();

   moveBolinha();

   raquete(x, y, larguraRaquete, alturaRaquete);

   raquete(xDois, yDois, larguraRaquete, alturaRaquete);

   movimentaRaqueteDois();

   verificaColisao();

   verificaColisaoDois();

   desenhaPlacar(130, 10, 40, 20);

   desenhaPlacar(430, 10, 40, 20);

   verificaPlacar();

 }

 function moveBolinha(){

      bolinha(xBolinha, yBolinha, raio);

      xBolinha += velocidadeXBolinha;

      yBolinha += velocidadeYBolinha;

        if(xBolinha  > 580 || xBolinha < 20 ){

            velocidadeXBolinha *= -1;

      }


         if(yBolinha > 380 || yBolinha < 20){

              velocidadeYBolinha *= -1;

         } 

   } 


 function raquete(x, y, larguraRaquete, alturaRaquete ){

   pincel.fillStyle = "red";
   pincel.fillRect(x, y, larguraRaquete, alturaRaquete);

 } 

 function movimentaRaquete(evento){

   if( cima == evento.keyCode && y > 0 ){

         y -= taxa;

      }else if(baixo == evento.keyCode && y < 400){

            y += taxa;

         }



 }

 function movimentaRaqueteDois(){

     velocidadeRaqueteDois = yBolinha - yDois - larguraRaquete /2 - 30;

     yDois += velocidadeRaqueteDois;

   }

 function verificaColisaoDois(){

     if(xBolinha + raio > xDois - larguraRaquete && yBolinha + raio > yDois - alturaRaquete && yBolinha - raio > yDois && yBolinha - raio  < yDois + alturaRaquete){

       velocidadeXBolinha *= -1;

     }



 }

 function verificaColisao(){


    if(xBolinha - raio < x + larguraRaquete && yBolinha - raio < y + alturaRaquete && yBolinha + raio > y){

         velocidadeXBolinha *= -1;

      } 


 }

 function desenhaPlacar(x, y , largura , altura,){

   pincel.fillStyle = "orange";

   pincel.fillRect(x, y , largura , altura );

   pincel.strokeStyle = "white";

   pincel.strokeRect(x, y ,largura, altura );

   desenhaTexto(145, 25, pontos );

   desenhaTexto( 445, 25, pontos2 );

 }

 function desenhaTexto(x, y, pontos){

    pincel.font = "20px Georgia";

    pincel.fillStyle = "white";

    pincel.fillText(pontos, x, y);

 }

 function verificaPlacar(){

     if(xBolinha < 20){

            pontos2++;

         }else if(xBolinha > 580){

              pontos++;

            }

 }

 function calcularChanceErro(){

    if(pontos2 >= pontos){

         chanceErro++;

      }

         if(chanceErro >= 39){

             chanceErro = 40;

         }else{

            chanceErro -= 1;

            if(chanceErro <= 35){

               chanceErro = 35;
            }
         }
 }

 function destravandoBolinha(){

     if(xBolinha - raio < 0 ){

         xBolinha = 23;

      }

 }

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

 //variaveis bolinha

 let xBolinha = 300;

 let yBolinha = 200;

 let raio = 10; 

 let velocidadeXBolinha = 10;

 let velocidadeYBolinha = 10;

 //posição da raquete 1 

 let x = 10;

 let larguraRaquete = 10;

 let y = 150;

 let alturaRaquete = 100;

 //variáveis da raquete 2 

 let xDois = 580;

 let yDois = 150;

 let velocidadeRaqueteDois;

 //códigos do teclado

 let cima = 38;

 let baixo = 40;

 //Variável da taxa de incremento

 let taxa = 15;

 //variáveis do placar

 let pontos = 0;

 let pontos2 = 0;

 pincel.fillStyle = 'black';

 pincel.fillRect(0, 0, 600, 400); 

 setInterval(atualizaTela, 50); 

 document.onkeydown = movimentaRaquete;



</script>