trabalho feito ! ainda com um olhinho no meu mostro dentro do quadrado . | JavaScript e HTML: pratique lógica com desenhos, animações e um jogo

professor eu coloquei um olho no meu monstrinho dentro do quadrado kkk. ver se assim mesmo só que eu foi fazendo fora da caixa depois eu foi movendo .


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

<script>
    var tela = document.querySelector('canvas');
    var pincel = tela.getContext("2d");

    // cabeca
    pincel.fillStyle = "darkgreen";
    pincel.fillRect(200, 50, 350, 300);

    // olho
    pincel.fillStyle = "white"
    pincel.fillRect(250, 110, 90, 90);
    pincel.fillRect(410, 110, 90, 90);

    // olho dentro do quadrado 
    pincel.fillStyle = "black"
    pincel.arc(295, 155, 30, 0, 2 * 3.14);
    pincel.arc(455, 155, 30, 0, 2 * 3.14);
    pincel.fill()

    // nariz
    pincel.fillStyle = "black"
    pincel.fillRect(340, 200, 70, 100);

    // boca
    pincel.fillStyle = "black"
    pincel.fillRect(290, 250, 50, 100);
    pincel.fillRect(410, 250, 50, 100);
</script>

Oi Cleiton tudo bem?

Gostei do seu monstro!!!

Fiquei uns 52 minutos pra fazer o olhinho do seu monstro mecher seguindo o mouse no eixo X. Fiquei inspirado. Dá uma olhada.

<canvas onmousemove="desenhar(event)" width="600" height="400"></canvas>

<script>
    desenhar(event);
    function desenhar(event) {


        if (event == null) {
            var event = {};
            event.clientX = 300;
        }


        var tela = document.querySelector('canvas');
        var pincel = tela.getContext("2d");
        pincel.clearRect(0, 0, tela.width, tela.height);


        // cabeca
        pincel.fillStyle = "darkgreen";
        pincel.fillRect(200, 50, 350, 300);

        // olho
        pincel.fillStyle = "white"
        pincel.fillRect(250, 110, 90, 90);
        pincel.fillRect(410, 110, 90, 90);


        // olho dentro do quadrado 
        console.log(event.clientX);
        if (event.clientX < 560 && event.clientX > 205) {

            pincel.fillStyle = "white"
            pincel.fillRect(250, 110, 90, 90);
            pincel.fillRect(410, 110, 90, 90);

            pincel.beginPath();
            pincel.fillStyle = "white";
            pincel.arc(295 , 155, 30, 0, 2 * 3.14);
            pincel.arc(455 , 155, 30, 0, 2 * 3.14);
            pincel.fill();


            pincel.beginPath();
            pincel.fillStyle = "black";
            pincel.arc(295, 155, 30, 0, 2 * 3.14);
            pincel.arc(455, 155, 30, 0, 2 * 3.14);
            pincel.fill();



        } else {


            if (event.clientX < 205) {



                pincel.fillStyle = "white"
                pincel.fillRect(250, 110, 90, 90);
                pincel.fillRect(410, 110, 90, 90);


                pincel.beginPath();
                pincel.fillStyle = "white";
                pincel.arc(295, 155, 30, 0, 2 * 3.14);
                pincel.arc(455, 155, 30, 0, 2 * 3.14);
                pincel.fill();

                pincel.beginPath();
                pincel.fillStyle = "black";
                pincel.arc(295 - 10, 155, 30, 0, 2 * 3.14);
                pincel.arc(455 - 10, 155, 30, 0, 2 * 3.14);
                pincel.fill();
            } else {


                pincel.fillStyle = "white"
                pincel.fillRect(250, 110, 90, 90);
                pincel.fillRect(410, 110, 90, 90);


                pincel.beginPath();
                pincel.fillStyle = "white";
                pincel.arc(295, 155, 30, 0, 2 * 3.14);
                pincel.arc(455, 155, 30, 0, 2 * 3.14);
                pincel.fill();

                pincel.beginPath();
                pincel.fillStyle = "black";
                pincel.arc(295 +10, 155, 30, 0, 2 * 3.14);
                pincel.arc(455 +10, 155, 30, 0, 2 * 3.14);
                pincel.fill();

            }
        }




        // nariz
        pincel.fillStyle = "black"
        pincel.fillRect(340, 200, 70, 100);

        // boca
        pincel.fillStyle = "black"
        pincel.fillRect(290, 250, 50, 100);
        pincel.fillRect(410, 250, 50, 100);

    }
</script>