Creeper

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

<h1>Creeper</h1>

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

  pincel.fillStyle = "#176400"; //cabeza
  pincel.fillRect(200, 50, 350, 300);

  pincel.fillStyle = "#000"; //ojo izq
  pincel.fillRect(250, 110, 90, 90);

  pincel.fillStyle = "#000"; //ojo der
  pincel.fillRect(410, 110, 90, 90);

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

  pincel.fillStyle = "#000";
  pincel.fillRect(300, 240, 40, 110); //labio1

  pincel.fillStyle = "#000";
  pincel.fillRect(410, 240, 40, 110); //labio2

  //explosion a la izquierda
  pincel.fillStyle = "#F44611";
  pincel.fillRect(150, 20, 40, 40);

  pincel.fillStyle = "#F8F32B";
  pincel.fillRect(160, 30, 20, 20);

  pincel.fillStyle = "#F44611";
  pincel.fillRect(130, 190, 40, 40);

  pincel.fillStyle = "#F8F32B";
  pincel.fillRect(140, 200, 20, 20);

  pincel.fillStyle = "#F44611";
  pincel.fillRect(150, 340, 40, 40);

  pincel.fillStyle = "#F8F32B";
  pincel.fillRect(160, 350, 20, 20);

  //explosion a la derecha
  pincel.fillStyle = "#F44611";
  pincel.fillRect(560, 20, 40, 40);

  pincel.fillStyle = "#F8F32B";
  pincel.fillRect(570, 30, 20, 20);

  pincel.fillStyle = "#F44611";
  pincel.fillRect(570, 190, 40, 40);

  pincel.fillStyle = "#F8F32B";
  pincel.fillRect(580, 200, 20, 20);

  pincel.fillStyle = "#F44611";
  pincel.fillRect(560, 340, 40, 40);

  pincel.fillStyle = "#F8F32B";
  pincel.fillRect(570, 350, 20, 20);
</script>