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 | |
59 | |
60 | |
61 | |
62 | |
63 | |
64 | |
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> |