Mercurial

annotate birthday_page/pages/index.html @ 71:75de5903355c

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
Giagantic changes that update Dowa library to be more align with stb style array and hashmap. Updated Seobeo to be caching on server side instead of file level caching. Deleted bunch of things I don't really use.
author June Park <parkjune1995@gmail.com>
date Sun, 28 Dec 2025 20:34:22 -0800
parents 6639f5389f47
children
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">
39
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
10 <title>Amu Birthday Game</title>
34
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;
39
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
137 z-index: 1000;
34
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
138 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
139 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
140
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
141 #startBtn:hover {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
142 background: #45a049;
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
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
145 .confetti {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
146 position: absolute;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
147 width: 10px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
148 height: 10px;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
149 background: #ff0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
150 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
151 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
152
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
153 @keyframes fall {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
154 to {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
155 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
156 opacity: 0;
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
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
160 @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
161 #gameContainer {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
162 height: 300px;
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
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
165 #score {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
166 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
167 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
168
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
169 #message {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
170 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
171 padding: 20px;
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 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
174 </style>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
175 </head>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
176 <body>
39
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
177 <button id="startBtn">START GAME</button>
34
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="gameContainer">
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="ground"></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="dino"></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="goal"></div>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
182 <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
183 <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
184 </div>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
185
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
186 <script>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
187 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
188 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
189 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
190 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
191 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
192 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
193
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
194 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
195 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
196 let obstacles = [];
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
197 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
198 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
199 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
200
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
201 function jump() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
202 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
203
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
204 isJumping = true;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
205 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
206 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
207 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
208 clearInterval(jumpUp);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
209 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
210 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
211 clearInterval(jumpDown);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
212 isJumping = false;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
213 jumpHeight = 0;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
214 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
215 jumpHeight -= 5;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
216 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
217 }, 20);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
218 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
219 jumpHeight += 5;
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
220 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
221 }, 20);
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
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
224 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
225 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
226 e.preventDefault();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
227 jump();
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
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('click', jump);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
232 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
233 e.preventDefault();
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
234 jump();
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
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
237 function createObstacle() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
238 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
239 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
240 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
241 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
242 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
243 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
244 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
245 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
246
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
247 function createConfetti() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
248 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
249 setTimeout(() => {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
250 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
251 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
252 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
253 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
254 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
255 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
256 }, i * 50);
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
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
260 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
261 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
262 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
263
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
264 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
265 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
266 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
267 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
268 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
269
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
270 function checkGoalReached() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
271 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
272 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
273
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
274 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
275 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
276 }
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
277
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
278 function gameOver() {
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
279 gameRunning = false;
39
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
280 messageEl.textContent = 'Game Over! YOU SUCK';
34
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
281 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
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(() => {
39
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
345 if (!gameRunning) {
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
346 clearInterval(obstacleInterval);
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
347 return;
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
348 }
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
349 if (distance < gracePeriod) return; // just skip early
34
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
350
39
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
351 if (Math.random() > 0.3) {
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
352 createObstacle();
6639f5389f47 [Amu Birthday] changed the logic and output when they lose.
MrJuneJune <me@mrjunejune.com>
parents: 34
diff changeset
353 }
34
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
354 }, 1500);
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
355
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
356 gameLoop();
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
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
359 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
360 </script>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
361 </body>
6c322f9c2cb9 [Birthday] I didn't have nay time to buy birhtday present so w/e/
MrJuneJune <me@mrjunejune.com>
parents:
diff changeset
362 </html>