Creeper Resolución | 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>Prueba Creeper Luis Vargas</title>
  </head>
  <body>
    <canvas width="600" height="400"></canvas>
  </body>

  <script>
    const canvas = document.querySelector("canvas");
    const pencil = canvas.getContext("2d");
    // Size
    // Rectangulo 1
    const faceWidth = 350;
    const faceHeight = 300;
    // Rectangulo 2 y 3
    const eyesWidth = 90;
    const eyesHeight = eyesWidth;
    //Rectangulo 4
    const noseWidth = 70;
    const noseHeight = 100;
    //Rectangulo 5
    const mouthWidth = 40;
    const mouthHeight = 110;
    //Rectangulo 5

    pencil.fillStyle = "lightgrey";
    pencil.fillRect(0, 0, 600, 400);

    const margenWidth = 125;
    const margenHeight = 50;

    pencil.fillStyle = "darkgreen";
    pencil.fillRect(margenWidth, margenHeight, faceWidth, faceHeight);

    const spaceInitialHeight = margenHeight + 50;
    const spaceInitialWidth = margenWidth + 50;

    // EYES
    pencil.fillStyle = "black";
    pencil.fillRect(
      spaceInitialWidth,
      spaceInitialHeight,
      eyesWidth,
      eyesHeight
    );
    pencil.fillRect(
      eyesHeight + noseWidth + spaceInitialWidth,
      spaceInitialHeight,
      eyesWidth,
      eyesHeight
    );

    // NOSE
    pencil.fillRect(
      spaceInitialWidth + eyesWidth,
      spaceInitialHeight + eyesHeight,
      noseWidth,
      noseHeight
    );

    // MOUTH
    pencil.fillRect(
      spaceInitialWidth + eyesWidth + noseWidth,
      spaceInitialHeight + eyesHeight + noseHeight / 2,
      mouthWidth,
      mouthHeight
    );

    pencil.fillRect(
      spaceInitialWidth + eyesWidth - mouthWidth,
      spaceInitialHeight + eyesHeight + noseHeight / 2,
      mouthWidth,
      mouthHeight
    );
  </script>
</html>