L. Polimorfismo

Salida

Ábrelo en otra pestaña.

Revísalo en gilpgedit.

1<!DOCTYPE html>
2<html lang="es">
3
4<head>
5 <meta charset="UTF-8">
6 <meta name="viewport"
7 content="width=device-width">
8 <title>Polimorfismo</title>
9 <script>
10 function
11 aleatorio(menor, mayor) {
12 return menor +
13 Math.floor(
14 Math.random() *
15 (mayor - menor + 1))
16 }
17
18 /** @interface */
19 class SeMueve {
20 muevete() {
21 throw new Error("intf")
22 }
23 }
24
25 /** @implements {SeMueve} */
26 class PerroWeb
27 extends HTMLElement {
28 connectedCallback() {
29 this.x = 0
30 this.y = 0
31 this.innerHTML = "🐕"
32 this.style.position = "fixed"
33 this.style.fontSize = "2rem"
34 this.style.right =
35 `${this.x}px`
36 this.style.bottom =
37 `${this.y}px`
38 }
39
40 muevete() {
41 this.x = (this.x + 30) %
42 window.innerWidth
43 this.style.right =
44 `${this.x}px`
45 }
46 }
47 customElements.define(
48 "perro-web", PerroWeb)
49
50 /** @implements {SeMueve} */
51 class AguilaWeb
52 extends HTMLElement {
53 connectedCallback() {
54 this.x = aleatorio(0,
55 Math.floor(innerWidth))
56 this.y = aleatorio(0,
57 Math.floor(innerHeight))
58 this.innerHTML = "🦅"
59 this.style.position = "fixed"
60 this.style.fontSize = "2.5rem"
61 this.style.left = `${this.x}px`
62 this.style.top = `${this.y}px`
63 }
64
65 muevete() {
66 this.y = (this.y + 10) %
67 window.innerHeight
68 this.style.top = `${this.y}px`
69 }
70 }
71 customElements.define(
72 "aguila-web", AguilaWeb)
73 </script>
74</head>
75
76<body>
77 <h1>Polimorfismo</h1>
78 <p>
79 <button onclick="mueve()">
80 Mueve
81 </button>
82 </p>
83 <script>
84 const figuras = [
85 new AguilaWeb(),
86 new PerroWeb(),
87 new AguilaWeb()]
88 for (let f of figuras) {
89 document.body.append(f)
90 }
91 function mueve() {
92 for (var f of figuras) {
93 f.muevete()
94 }
95 }
96 </script>
97</body>
98
99</html>
skip_previous skip_next