Creeper cambia el color usted. | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<html>
<head>
    <meta charset="UTF-8">
</head>
<body>


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

    </canvas>

    <script>
      var color;
    var colorCara;
    var colorCuerpo;

   color= prompt("Cambie color de un rango de 1-4  || f5 para recargar");
    switch(color){
        case "1":
          colorCara = "blue";
          colorCuerpo = "green";
        break;

        case "2":
          colorCara = "green";
          colorCuerpo = "blue";
        break;

        case "3":
          colorCara = "pink";
          colorCuerpo = "black";
        break;

        case "4":
          colorCara = "black";
          colorCuerpo = "pink";
        break;

        break;
        default:
        colorCara = "black";
          colorCuerpo = "green";
            break;

    }


function colorFace(){

pincel.fillStyle =colorCara;
                     }

function colorBody(){
pincel.fillStyle  = colorCuerpo;    
                }



        var pantalla = document.querySelector("canvas");
        var pincel = pantalla.getContext("2d");

        //------------> 1
        colorBody();
        pincel.fillRect(0, 0, 350, 300);

        //------------> 2
        colorFace();
        pincel.fillRect(50,60,90,90);

        //------------> 3
        colorFace();
        pincel.fillRect(210,60,90,90);

        //------------> 4
        colorFace();
        pincel.fillRect(140,150,70,100);
        pincel.fill();

        //------------> 5
        colorFace();
        pincel.fillRect(100,190,40,110);
        pincel.fill();

        //------------> 6
        colorFace();
        pincel.fillRect(210,190,40,110);
        pincel.fill();

    </script>

</body>
</html>