La Cara de Creeper | Lógica de programación: Practicando con juegos y animaciones | Alura Latam

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Creeper</title>
  </head>
  <body>
    <canvas width="350" height="300"></canvas>
  </body>
  <script>
    var pantalla = document.querySelector("canvas");
    var pincel = pantalla.getContext("2d");

    pincel.fillStyle = "pink";
    pincel.fillRect(0, 0, 350, 300);

    pincel.fillStyle = "black";
    pincel.fillRect(60, 35, 90, 90);

    pincel.fillStyle = "black";
    pincel.fillRect(200, 35, 90, 90);

    pincel.fillStyle = "black";
    pincel.fillRect(148, 120, 52, 100);

    pincel.fillStyle = "black";
    pincel.fillRect(108, 170, 40, 90);

    pincel.fillStyle = "black";
    pincel.fillRect(200, 170, 40, 90);
  </script>
</html>