M. Jueguito 1

Salida


1	<!DOCTYPE html>
2	<html>
3
4	<head>
5	<meta charset="utf-8">
6	<meta name="viewport"
7	content="width=device-width">
8	<title>Jueguito 1</title>
9	<style>
10	body {
11	/* Rompe el flujo normal para
12	* poder hacer swipe hacia
13	* abajo. */
14	position: fixed;
15	top: 0px;
16	left: 0px;
17	/* ocupa todo el espacio. */
18	width: 100%;
19	height: 100%;
20	/* Elimina márgenes. */
21	margin: 0;
22	/* Evita el scroll */
23	overflow: hidden;
24	}
25
26	.sprite {
27	position: fixed;
28	}
29	</style>
30	<script>
31	//@ts-check
32	class JugadorPaloma
33	extends HTMLElement {
34	connectedCallback() {
35	this.classList.add("sprite")
36	this.innerHTML += "🕊"
37	this.style.fontSize = "60px"
38	/* Coloca el elemento a la
39	* mitad de la pantalla. */
40	const raiz =
41	document.documentElement
42	/* Obtiene las coordenadas del
43	* element. */
44	const r =
45	this.getBoundingClientRect()
46	const left =
47	(raiz.clientWidth - r.width) /
48	2
49	const top =
50	(raiz.clientHeight -
51	r.height) /
52	2
53	this.style.left = `${left}px`
54	this.style.top = `${top}px`
55	}
56
57	sube() {
58	const top =
59	this.getBoundingClientRect().
60	top -
61	20
62	this.style.top = `${top}px`
63	}
64
65	baja() {
66	const top =
67	this.getBoundingClientRect().
68	top +
69	20
70	this.style.top = `${top}px`
71	}
72
73	izquierda() {
74	const left =
75	this.getBoundingClientRect().
76	left -
77	20
78	this.style.left = `${left}px`
79	}
80
81	derecha() {
82	const left =
83	this.getBoundingClientRect().
84	left +
85	20
86	this.style.left = `${left}px`
87	}
88	}
89	customElements.define(
90	"jugador-paloma", JugadorPaloma)
91
92	class FiguraAguila
93	extends HTMLElement {
94	connectedCallback() {
95	this.classList.add("sprite")
96	this.innerHTML = "🦅"
97	this.style.fontSize = "40px"
98	const r =
99	this.getBoundingClientRect()
100	this.style.left = `${r.left}px`
101	this.style.top = `${r.top}px`
102	this.style.bottom = "auto"
103	this.style.right = "auto"
104	}
105
106	/**
107	* Mueve la figura para que se
108	* acerque al jugador, usando la
109	* ecuación de la recta.
110	* @param {HTMLElement} jugador
111	* el jugador que es
112	* perseguido.
113	*/
114	muevete(jugador) {
115	const r =
116	this.getBoundingClientRect()
117	const rJ = jugador.
118	getBoundingClientRect()
119	const y2 = rJ.top
120	const y1 = r.top
121	const x2 = rJ.left
122	const x1 = r.left
123	const pendiente = x2 === x1 ?
124	0 :
125	(y2 - y1) / (x2 - x1)
126	const dirección =
127	x2 > x1 ? 1 : -1
128	const x = x1 + dirección * 5
129	const y =
130	pendiente * (x - x1) + y1
131	this.style.left = `${x}px`
132	this.style.top = `${y}px`
133	}
134	}
135	customElements.define(
136	"figura-aguila", FiguraAguila)
137	</script>
138	</head>
139
140	<body>
141	<div>
142	<jugador-paloma></jugador-paloma>
143	<figura-aguila
144	style="right: 0; top: 0;">
145	</figura-aguila>
146	<figura-aguila
147	style="right: 0; bottom: 0;">
148	</figura-aguila>
149	</div>
150	<script>
151	//@ts-check
152	class Juego {
153	constructor() {
154	/** @type {JugadorPaloma} */
155	this.jugador = document.
156	querySelector(
157	"jugador-paloma")
158	/** @type {FiguraAguila[]} */
159	this.figuras = Array.from(
160	document.querySelectorAll(
161	"figura-aguila"))
162	this.iniciaX = null
163	this.iniciaY = null
164	this.interval = null
165	this.activo = true
166	}
167
168	inicia() {
169	document.addEventListener(
170	"keydown",
171	evt => this.teclas(evt))
172	this.interval = setInterval(
173	() => this.mueveFiguras(), 60)
174	}
175
176	mueveFiguras() {
177	for (const f of this.figuras) {
178	f.muevete(this.jugador)
179	}
180	}
181
182	/** @param {KeyboardEvent} ev*/
183	teclas(ev) {
184	if (this.activo) {
185	switch (ev.key) {
186	case "ArrowLeft":
187	this.jugador.izquierda()
188	break
189	case "ArrowRight":
190	this.jugador.derecha()
191	break
192	case "ArrowUp":
193	this.jugador.sube()
194	break
195	case "ArrowDown":
196	this.jugador.baja()
197	break
198	}
199	}
200	}
201	}
202
203	const juego = new Juego()
204	juego.inicia()
205	</script>
206	</body>
207
208	</html>

skip_previous skip_next