J. Usa custom element

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

<!DOCTYPE html>
<html lang="es">

<head>
 <meta charset="UTF-8">
 <meta name="viewport"
   content="width=device-width">
 <title>Custom Elements</title>
 <style>
  figura-web {
   position: fixed;
   font-size: 60px;
  }
 </style>
 <script>
  class FiguraWeb
   extends HTMLElement {
   connectedCallback() {
    this.x = 0
    const attrY =
     this.getAttribute("y")
    const attrVel =
     this.getAttribute("velocidad")
    this.y = parseInt(attrY, 10)
    this.velocidad =
     parseInt(attrVel, 10)
   }
   muevete() {
    this.style.right =
     `${this.x}px`
    this.style.top = `${this.y}px`
    this.x =
     (this.x + this.velocidad) %
     innerWidth
   }
  }
  customElements.define(
   "figura-web", FiguraWeb)
 </script>
</head>

<body>
 <h1>Custom Elements</h1>
 <figura-web id="fantasma"
   y="0" velocidad="20">
  👻
 </figura-web>
 <figura-web id="sonrisa"
   y="100" velocidad="10">
  😁
 </figura-web>
 <script>
  setInterval(anima, 120)

  function anima() {
   fantasma.muevete()
   sonrisa.muevete()
  }
 </script>
</body>

</html>