Animação - CANVAS

Aplicando alguns conceitos do curso de lógica de programação II, fiz uma animação simples, do Google Dinosaur Run Game

   <canvas width="600" height="400" style="background-color: rgb(137, 235, 252);"></canvas>

    <script>
        var canvas = document.querySelector('canvas');
        var dino = canvas.getContext('2d');
        var cactus = canvas.getContext('2d');

        //Criação de cada pixel do desenho
        function desenhaColuna(x, y, qtde, cor, objeto) {

            var unidades = 3;
            var espessura = 4;
            objeto.fillStyle = cor;
            objeto.fillRect(x + 150, y + 150, unidades, espessura * qtde);

        }
        var x = 50;
        var dx = 3;

        //Partes inalteradas do dino
        function partePrincipal() {
            desenhaColuna(x, 50, 6, 'black', dino);
            desenhaColuna(x + dx, 58, 5, 'black', dino);
            desenhaColuna(x + dx * 2, 62, 5, 'black', dino);
            desenhaColuna(x + dx * 3, 66, 5, 'black', dino);
            desenhaColuna(x + dx * 4, 66, 5, 'black', dino);
            desenhaColuna(x + dx * 8, 54, 9, 'black', dino);
            desenhaColuna(x + (dx * 7) + 1, 54, 1, 'black', dino);
            desenhaColuna(x + dx * 11, 22, 16, 'black', dino);
            desenhaColuna(x + dx * 12, 22, 15, 'black', dino);
            desenhaColuna(x + dx * 12, 26, 1, 'white', dino);
            desenhaColuna(x + dx * 13, 22, 14, 'black', dino);
            desenhaColuna(x + dx * 14, 22, 7, 'black', dino);
            desenhaColuna(x + dx * 14, 58, 1, 'black', dino);
            desenhaColuna(x + dx * 15, 58, 2, 'black', dino);
            desenhaColuna(x + dx * 15, 46, 1, 'black', dino);
            desenhaColuna(x + dx * 16, 46, 1, 'black', dino);
            desenhaColuna(x + dx * 17, 46, 1, 'black', dino);
            desenhaColuna(x + dx * 15, 22, 5, 'black', dino);
            desenhaColuna(x + dx * 16, 22, 5, 'black', dino);
            desenhaColuna(x + dx * 17, 22, 5, 'black', dino);
            desenhaColuna(x + dx * 18, 22, 5, 'black', dino);
            desenhaColuna(x + dx * 19, 26, 4, 'black', dino);
        }

        //Posição inicial
        function parado() {
            partePrincipal();
            desenhaColuna(x + dx * 5, 62, 11, 'black', dino);
            desenhaColuna(x + dx * 6, 58, 10, 'black', dino);
            desenhaColuna(x + dx * 6, 102, 1, 'black', dino);
            desenhaColuna(x + dx * 7, 58, 9, 'black', dino); 
            desenhaColuna(x + dx * 9, 50, 11, 'black', dino);
            desenhaColuna(x + dx * 10, 26, 20, 'black', dino);
            desenhaColuna(x + dx * 11, 102, 1, 'black', dino);
        }

        //Primeiro movimento
        function corridaParteUm() {

            partePrincipal();
            desenhaColuna(x + dx * 5, 62, 10, 'black', dino);
            desenhaColuna(x + dx * 6, 98, 1, 'black', dino);
            desenhaColuna(x + dx * 6, 58, 8, 'black', dino);
            desenhaColuna(x + dx * 6, 88, 1, 'black', dino);
            desenhaColuna(x + dx * 7, 58, 8, 'black', dino); 
            desenhaColuna(x + dx * 9, 50, 11, 'black', dino);
            desenhaColuna(x + dx * 10, 26, 20, 'black', dino);
            desenhaColuna(x + dx * 11, 102, 1, 'black', dino);
        }

        //Segundo movimento
        function corridaParteDois() {
            partePrincipal();
            desenhaColuna(x + dx * 5, 62, 11, 'black', dino);
            desenhaColuna(x + dx * 6, 58, 10, 'black', dino);
            desenhaColuna(x + dx * 6, 102, 1, 'black', dino);
            desenhaColuna(x + dx * 7, 58, 9, 'black', dino); 
            desenhaColuna(x + dx * 9, 50, 10, 'black', dino);
            desenhaColuna(x + dx * 10, 26, 18, 'black', dino);
            desenhaColuna(x + dx * 11, 94, 1, 'black', dino);
        }

        var xCactus = 400;
        function desenhaCactus() {
            desenhaColuna(xCactus - 3, 78, 4, 'green', cactus);
            desenhaColuna(xCactus - 6, 70, 4, 'green', cactus);
            desenhaColuna(xCactus, 62, 11, 'green', cactus);
            desenhaColuna(xCactus + 3, 62, 11, 'green', cactus);
            desenhaColuna(xCactus + 6, 78, 4, 'green', cactus);
            desenhaColuna(xCactus + 9, 70, 4, 'green', cactus);
        }

        var trocaDino = 1;

        setInterval(() => {
            dino.clearRect(0, 0, 600, 400);

            if (trocaDino == 1) {
                parado();
                trocaDino++;                
            } else if (trocaDino == 2) {
                corridaParteUm();
                trocaDino++;
            } else if (trocaDino == 3) {
                corridaParteDois();
                trocaDino = 1;
            }

            xCactus -= 10;
            desenhaCactus();

            if (xCactus < 110) {
                xCactus = 400;
            }

        }, 100);

    </script>