1
resposta

Minha solução (incrementei uma paisagem e um personagem)

<canvas width="600" height="400"></canvas>
<script>
    var tela= document.querySelector("canvas");
    var pincel= tela.getContext("2d");
    //personagem variáveis
    var xPersonagem= 300;
    var yPersonagem= 200;
    var alturaDoPersonagem= 50;
    var larguraDoPersonagem= 30;
    //teclas de movimentação
    var esquerda= 37;
    var cima= 38;
    var direita= 39;
    var baixo= 40;
    var taxa= 10;

    function mostrarCodigo(evento){

        alert(evento.keyCode);
    }

    function atualizarTela (){
        pincel.clearRect(0,0,600,40);
        paisagem();
        personagem();

    }

    function leTeclado(evento){

        if(evento.keyCode == direita){
            xPersonagem= xPersonagem + taxa;
        }
        if(evento.keyCode == esquerda){
            xPersonagem= xPersonagem - taxa;
        }

    }

    function paisagem(){
        //fundo ou céu
        pincel.fillStyle= "lightblue";
        pincel.fillRect(0,0,600,400);
        //nuvem esquerda
        pincel.fillStyle= "white";
        pincel.fillRect(50,50,100,50);
        pincel.fillStyle= "white";
        pincel.fillRect(40,60,120,30);
        //nuvem direita
        pincel.fillStyle= "white";
        pincel.fillRect(400,50,100,50);
        pincel.fillStyle= "white";
        pincel.fillRect(390,60,120,30);
        //nuvem centro
        pincel.fillStyle= "white";
        pincel.fillRect(250,100,50,25);
        pincel.fillStyle= "white";
        pincel.fillRect(243,105,67,15);
        //terra ou chão
        pincel.fillStyle= "brown";
        pincel.fillRect(0,300,600,100);
        //grama ou mato
        pincel.fillStyle= "green";
        pincel.fillRect(0,280,600,20);    
    }

    function personagem(){
        //tronco
        pincel.fillStyle= "red";
        pincel.beginPath();
        pincel.moveTo(xPersonagem, yPersonagem);
        pincel.lineTo(xPersonagem-(larguraDoPersonagem/2),yPersonagem+alturaDoPersonagem);
        pincel.lineTo(xPersonagem+(larguraDoPersonagem/2),yPersonagem+alturaDoPersonagem);
        pincel.fill();
        //cabeça
        pincel.beginPath();
        pincel.arc(xPersonagem,yPersonagem-((alturaDoPersonagem/100)*4),(alturaDoPersonagem/100)*20,0,2*Math.PI);
        pincel.fill();




    }


    setInterval(atualizarTela,1);
    document.onkeydown= leTeclado;



</script>
1 resposta

Oi, Felipe! Tudo bem por aí?

Parabéns pela sua dedicação, sua solução ficou genial!

Qualquer dúvida estamos à disposição.

Continue praticando e bons estudos!

Até mais!

Quer mergulhar em tecnologia e aprendizagem?

Receba a newsletter que o nosso CEO escreve pessoalmente, com insights do mercado de trabalho, ciência e desenvolvimento de software