H. Haz algo si chocamos

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>Sonrie</title>
9 <style>
10 .sprite {
11 position: fixed;
12 font-size: 3rem;
13 }
14 </style>
15</head>
16
17<body>
18 <h1>Sonrie</h1>
19 <output id="abrazo"
20 class="sprite"
21 style="background-color:
22 greenyellow;">
23 🤗
24 </output>
25 <output id="triste"
26 class="sprite"
27 style="background-color:
28 grey;">
29 😪
30 </output>
31 <script>
32 let x = 0
33 const REFRESCO = 5
34 let intervalo =
35 setInterval(avanza, REFRESCO)
36
37 function avanza() {
38 const velocidad =
39 innerWidth / 2000
40 const x2 = innerWidth
41 const y = innerHeight / 2
42 triste.style.left =
43 `${innerWidth / 2}px`
44 triste.style.bottom = `${y}px`
45 abrazo.style.left = `${x}px`
46 abrazo.style.bottom = `${y}px`
47 if (seTocan(abrazo, triste)) {
48 triste.value = "😊";
49 triste.style.
50 backgroundColor = "pink";
51 clearInterval(intervalo);
52 } else {
53 x = (x + velocidad) % x2
54 }
55 }
56
57 /**
58 * Devuelve true si 2
59 * elementos se tocan.
60 * @param {HTMLElement} e1
61 * @param {HTMLElement} e2
62 * @returns {boolean} true
63 * si los elementos se
64 * tocan.
65 */
66 function seTocan(e1, e2) {
67 const rE1 =
68 e1.getBoundingClientRect()
69 const rE2 =
70 e2.getBoundingClientRect()
71 return (rE1.right >= rE2.left
72 && rE1.left <= rE2.right
73 && rE1.top <= rE2.bottom
74 && rE1.bottom >= rE2.top)
75 }
76 </script>
77</body>
78
79</html>
skip_previous skip_next