<!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>