Exercício 08 - Movendo a bolinha pelo teclado...Minha resposta

Essa foi a minha solução com mais algumas modificações...

<canvas width="640" height="440"></canvas>

<script>

    var tela = document.querySelector('canvas');
    var pincel = tela.getContext('2d');
    pincel.fillStyle = 'white';
    pincel.fillRect(0, 0, 640, 440);
    pincel.strokeStyle = 'blue';
    pincel.strokeRect(0, 0, 621, 421);

    var x = 20;
    var y = 20;

    // códigos do teclado

    var esquerda = 37;
    var cima = 38;
    var direita = 39;
    var baixo = 40;

    // taxa de incremento
    var taxa = 10;

    function desenhaCirculo(x, y, raio) {

        pincel.fillStyle = 'blue';
        pincel.beginPath();
        pincel.arc(x, y, raio, 0, 2 * Math.PI);
        pincel.fill();
    }

    function limpaTela() {

        pincel.clearRect(0, 0, 620, 420);
    }

    function atualizaTela() {

        limpaTela();
        desenhaCirculo(x, y, 10);
    }

    setInterval(atualizaTela, 3);

    function leDoTeclado(evento) {

        if (evento.keyCode == '38') {
        // cima
            y = y - taxa;
            atualizaTela();
            if (y<0){
                y=0;    
            }

        }
        else if (evento.keyCode == '40') {
        // baixo
            y = y + taxa;
            atualizaTela();
            if (y>400){
                y=400;    
                alert("Fora da tela");
            }
        }
        else if (evento.keyCode == '37') {
       // esquerda
            x = x - taxa;
            atualizaTela();
            if (x<0){
                x=0;
            }
        }
        else if (evento.keyCode == '39') {
       // direita
            x = x + taxa;
            atualizaTela();
            if (x>600){
                x=600;    
                alert("Fora da tela");
            }
        }

    }

   document.onkeydown = leDoTeclado;

</script>