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 | |
19 | class SeMueve { |
20 | muevete() { |
21 | throw new Error("intf") |
22 | } |
23 | } |
24 | |
25 | |
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 | |
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> |