Mercurial

annotate birthday_page/pages/index.html @ 38:cf9caa4abc3e

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[Love] FE and BE. Can chat and render images. Also created MCP for powerpoint generations.
author MrJuneJune <me@mrjunejune.com>
date Mon, 01 Dec 2025 20:35:56 -0800
parents 6c322f9c2cb9
children 6639f5389f47
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
rev   line source
34
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
1 <!DOCTYPE html>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
2 <html lang="en">
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
3 <head>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
4 <meta charset="UTF-8">
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
6 <link rel="preload" href="/punpun.png" as="image">
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
7 <link rel="preload" href="/random_1.jpeg" as="image">
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
8 <link rel="preload" href="/random_2.png" as="image">
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
9 <link rel="preload" href="/random_3.jpeg" as="image">
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
10 <title>Dino Birthday Game</title>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
11 <style>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
12 * {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
13 margin: 0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
14 padding: 0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
15 box-sizing: border-box;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
16 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
17
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
18 body {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
19 font-family: Arial, sans-serif;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
20 display: flex;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
21 justify-content: center;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
22 align-items: center;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
23 min-height: 100vh;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
24 background: linear-gradient(to bottom, #87CEEB 0%, #E0F6FF 100%);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
25 touch-action: manipulation;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
26 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
27
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
28 #gameContainer {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
29 position: relative;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
30 width: 100%;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
31 max-width: 800px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
32 height: 400px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
33 background-image: url('/background.avif'); /* Replace with your actual image path */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
34 background-size: cover; /* Ensures the image covers the entire element */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
35 background-repeat: no-repeat; /* Prevents tiling */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
36 overflow: hidden;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
37 border: 3px solid #333;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
38 box-shadow: 0 10px 30px rgba(0,0,0,0.3);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
39 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
40
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
41 #ground {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
42 position: absolute;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
43 bottom: 0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
44 width: 100%;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
45 height: 50px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
46 background: #c2b280;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
47 border-top: 3px solid #8b7355;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
48 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
49
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
50 #dino {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
51 position: absolute;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
52 bottom: 50px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
53 left: 50px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
54 width: 40px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
55 height: 50px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
56 background-image: url('/punpun.png'); /* Replace with your actual image path */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
57 background-size: cover; /* Ensures the image covers the entire element */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
58 background-repeat: no-repeat; /* Prevents tiling */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
59 border-radius: 5px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
60 transition: none;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
61 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
62
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
63 .obstacle {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
64 position: absolute;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
65 bottom: 50px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
66 width: 100px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
67 height: 50px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
68 background: #8b4513;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
69 border-radius: 3px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
70 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
71
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
72 .random_1 {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
73 background-image: url('/random_1.jpeg'); /* Replace with your actual image path */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
74 background-size: cover; /* Ensures the image covers the entire element */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
75 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
76
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
77 .random_2 {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
78 background-image: url('/random_2.png'); /* Replace with your actual image path */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
79 background-size: cover; /* Ensures the image covers the entire element */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
80 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
81
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
82 .random_3 {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
83 background-image: url('/random_3.jpeg'); /* Replace with your actual image path */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
84 background-size: cover; /* Ensures the image covers the entire element */
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
85 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
86
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
87
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
88
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
89 #goal {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
90 position: absolute;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
91 bottom: 50px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
92 width: 50px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
93 height: 60px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
94 background: linear-gradient(45deg, #ff69b4, #ff1493);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
95 border-radius: 10px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
96 display: none;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
97 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
98
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
99 #score {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
100 position: absolute;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
101 top: 20px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
102 right: 20px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
103 font-size: 24px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
104 font-weight: bold;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
105 color: #333;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
106 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
107
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
108 #message {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
109 position: absolute;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
110 top: 50%;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
111 left: 50%;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
112 transform: translate(-50%, -50%);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
113 font-size: 32px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
114 font-weight: bold;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
115 color: #ff1493;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
116 text-align: center;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
117 display: none;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
118 background: rgba(255, 255, 255, 0.9);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
119 padding: 30px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
120 border-radius: 15px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
121 box-shadow: 0 5px 20px rgba(0,0,0,0.3);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
122 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
123
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
124 #startBtn {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
125 position: absolute;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
126 top: 50%;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
127 left: 50%;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
128 transform: translate(-50%, -50%);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
129 padding: 15px 40px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
130 font-size: 24px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
131 background: #4CAF50;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
132 color: white;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
133 border: none;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
134 border-radius: 10px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
135 cursor: pointer;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
136 font-weight: bold;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
137 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
138 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
139
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
140 #startBtn:hover {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
141 background: #45a049;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
142 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
143
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
144 .confetti {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
145 position: absolute;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
146 width: 10px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
147 height: 10px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
148 background: #ff0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
149 animation: fall 3s linear;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
150 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
151
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
152 @keyframes fall {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
153 to {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
154 transform: translateY(400px) rotate(360deg);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
155 opacity: 0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
156 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
157 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
158
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
159 @media (max-width: 600px) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
160 #gameContainer {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
161 height: 300px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
162 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
163
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
164 #score {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
165 font-size: 18px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
166 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
167
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
168 #message {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
169 font-size: 24px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
170 padding: 20px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
171 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
172 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
173 </style>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
174 </head>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
175 <body>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
176 <div id="gameContainer">
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
177 <div id="ground"></div>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
178 <div id="dino"></div>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
179 <div id="goal"></div>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
180 <div id="score">Distance: 0m</div>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
181 <div id="message"></div>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
182 <button id="startBtn">START GAME</button>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
183 </div>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
184
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
185 <script>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
186 const dino = document.getElementById('dino');
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
187 const gameContainer = document.getElementById('gameContainer');
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
188 const scoreEl = document.getElementById('score');
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
189 const messageEl = document.getElementById('message');
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
190 const startBtn = document.getElementById('startBtn');
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
191 const goal = document.getElementById('goal');
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
192
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
193 let isJumping = false;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
194 let gameRunning = false;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
195 let obstacles = [];
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
196 let distance = 0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
197 let gameSpeed = 5;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
198 const goalDistance = 500;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
199
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
200 function jump() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
201 if (isJumping || !gameRunning) return;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
202
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
203 isJumping = true;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
204 let jumpHeight = 0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
205 let jumpUp = setInterval(() => {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
206 if (jumpHeight >= 120) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
207 clearInterval(jumpUp);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
208 let jumpDown = setInterval(() => {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
209 if (jumpHeight <= 0) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
210 clearInterval(jumpDown);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
211 isJumping = false;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
212 jumpHeight = 0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
213 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
214 jumpHeight -= 5;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
215 dino.style.bottom = (50 + jumpHeight) + 'px';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
216 }, 20);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
217 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
218 jumpHeight += 5;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
219 dino.style.bottom = (50 + jumpHeight) + 'px';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
220 }, 20);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
221 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
222
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
223 document.addEventListener('keydown', (e) => {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
224 if (e.code === 'Space' || e.code === 'ArrowUp') {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
225 e.preventDefault();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
226 jump();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
227 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
228 });
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
229
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
230 gameContainer.addEventListener('click', jump);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
231 gameContainer.addEventListener('touchstart', (e) => {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
232 e.preventDefault();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
233 jump();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
234 });
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
235
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
236 function createObstacle() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
237 const randomVal = Math.floor(Math.random() * 3) + 1;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
238 const obstacle = document.createElement('div');
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
239 obstacle.classList.add(`obstacle`);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
240 obstacle.classList.add(`random_${randomVal}`);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
241 obstacle.style.right = '-80px';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
242 gameContainer.appendChild(obstacle);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
243 obstacles.push(obstacle);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
244 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
245
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
246 function createConfetti() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
247 for (let i = 0; i < 50; i++) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
248 setTimeout(() => {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
249 const confetti = document.createElement('div');
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
250 confetti.classList.add('confetti');
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
251 confetti.style.left = Math.random() * 100 + '%';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
252 confetti.style.background = `hsl(${Math.random() * 360}, 100%, 50%)`;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
253 gameContainer.appendChild(confetti);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
254 setTimeout(() => confetti.remove(), 3000);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
255 }, i * 50);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
256 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
257 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
258
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
259 function checkCollision(obstacle) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
260 const dinoRect = dino.getBoundingClientRect();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
261 const obstacleRect = obstacle.getBoundingClientRect();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
262
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
263 return !(dinoRect.right < obstacleRect.left ||
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
264 dinoRect.left > obstacleRect.right ||
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
265 dinoRect.bottom < obstacleRect.top ||
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
266 dinoRect.top > obstacleRect.bottom);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
267 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
268
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
269 function checkGoalReached() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
270 const dinoRect = dino.getBoundingClientRect();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
271 const goalRect = goal.getBoundingClientRect();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
272
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
273 return !(dinoRect.right < goalRect.left ||
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
274 dinoRect.left > goalRect.right);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
275 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
276
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
277 function gameOver() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
278 gameRunning = false;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
279 messageEl.textContent = 'Game Over! Click START to try again';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
280 messageEl.style.display = 'block';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
281 startBtn.style.display = 'block';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
282 obstacles.forEach(obs => obs.remove());
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
283 obstacles = [];
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
284 goal.style.display = 'none';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
285 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
286
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
287 function winGame() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
288 gameRunning = false;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
289 messageEl.innerHTML = '🎉 HAPPY BIRTHDAY! 🎉<br>You made it to the end!<br> Also I didnt buy any present ^_^';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
290 messageEl.style.display = 'block';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
291 createConfetti();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
292 obstacles.forEach(obs => obs.remove());
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
293 obstacles = [];
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
294 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
295
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
296 function gameLoop() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
297 if (!gameRunning) return;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
298
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
299 distance += 0.1;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
300 scoreEl.textContent = `Distance: ${Math.floor(distance)}m`;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
301
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
302 if (distance >= goalDistance && goal.style.display === 'none') {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
303 goal.style.display = 'block';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
304 goal.style.right = '-50px';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
305 goal.style.color = 'dodgerblue';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
306 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
307
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
308 obstacles.forEach((obstacle, index) => {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
309 let right = parseInt(window.getComputedStyle(obstacle).right);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
310 obstacle.style.right = (right + gameSpeed) + 'px';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
311
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
312 if (right > gameContainer.offsetWidth) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
313 obstacle.remove();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
314 obstacles.splice(index, 1);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
315 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
316
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
317 if (checkCollision(obstacle)) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
318 gameOver();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
319 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
320 });
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
321
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
322 if (goal.style.display === 'block') {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
323 let goalRight = parseInt(window.getComputedStyle(goal).right);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
324 goal.style.right = (goalRight + gameSpeed) + 'px';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
325
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
326 if (checkGoalReached()) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
327 winGame();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
328 return;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
329 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
330 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
331
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
332 requestAnimationFrame(gameLoop);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
333 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
334
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
335 function startGame() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
336 gameRunning = true;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
337 distance = 0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
338 gameSpeed = 5;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
339 gracePeriod = 15;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
340 startBtn.style.display = 'none';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
341 messageEl.style.display = 'none';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
342 goal.style.display = 'none';
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
343
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
344 let obstacleInterval = setInterval(() => {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
345 if (!gameRunning || distance < gracePeriod) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
346 clearInterval(obstacleInterval);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
347 return;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
348 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
349
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
350 if (Math.random() > 0.3) {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
351 createObstacle();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
352 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
353 }, 1500);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
354
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
355 gameLoop();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
356 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
357
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
358 startBtn.addEventListener('click', startGame);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
359 </script>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
360 </body>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
361 </html>