K. Asociaciones

Salida


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>Asociaciones</title>
9	<script>
10	/**
11	* Devuelve un número
12	* aleatorio entre el valor
13	* menor y el valor mayor.
14	* @param {number} menor el
15	* menor valor que se puede
16	* generar
17	* @param {number} mayor el
18	* mayor valor que se puede
19	* generar
20	* @returns {number} un
21	* número aleatorio entre
22	* menor y mayor.
23	*/
24	function
25	aleatorio(menor, mayor) {
26	/* Math.floor(x): elimina
27	* los decimales.
28	* Math.random(): genera
29	* un número aleatorio
30	* >= 0 y < 1. */
31	return menor +
32	Math.floor(
33	Math.random() *
34	(mayor - menor + 1))
35	}
36
37	class PerroWeb
38	extends HTMLElement {
39	connectedCallback() {
40	this.x = 0
41	this.y = 0
42	this.innerHTML = "🐕"
43	this.style.position = "fixed"
44	this.style.fontSize = "2rem"
45	this.style.right =
46	`${this.x}px`
47	this.style.bottom =
48	`${this.y}px`
49	}
50
51	muevete() {
52	this.x = (this.x + 30) %
53	innerWidth
54	this.style.right =
55	`${this.x}px`
56	}
57	}
58	customElements.define(
59	"perro-web", PerroWeb)
60
61	class AguilaWeb
62	extends HTMLElement {
63	connectedCallback() {
64	this.x = aleatorio(0,
65	Math.floor(innerWidth))
66	this.y = aleatorio(0,
67	Math.floor(innerHeight))
68	this.innerHTML = "🦅"
69	this.style.position = "fixed"
70	this.style.fontSize = "2.5rem"
71	this.style.left = `${this.x}px`
72	this.style.top = `${this.y}px`
73	}
74
75	muevete() {
76	this.y = (this.y + 10) %
77	innerHeight
78	this.style.top = `${this.y}px`
79	}
80	}
81	customElements.define(
82	"aguila-web", AguilaWeb)
83
84	class ControladorWeb
85	extends HTMLElement {
86	connectedCallback() {
87	this.muevete =
88	this.muevete.bind(this)
89	this.innerHTML = /* html */
90	`<button onclick="this.
91	parentElement.muevete()">
92	Mueve
93	</button>`
94	this.perro = new PerroWeb()
95	this.aguilas = [
96	new AguilaWeb(),
97	new AguilaWeb()]
98	this.append(this.perro)
99	for (const a of this.aguilas) {
100	this.append(a)
101	}
102	}
103
104	muevete() {
105	this.perro.muevete()
106	for (let a of this.aguilas) {
107	a.muevete()
108	}
109	}
110	}
111	customElements.define(
112	"controlador-web",
113	ControladorWeb)
114	</script>
115	</head>
116
117	<body>
118	<h1>Asociaciones</h1>
119	<controlador-web>
120	</controlador-web>
121	</body>
122
123	</html>

skip_previous skip_next