Mercurial

comparison birthday_page/pages/index.html @ 39:6639f5389f47

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
[Amu Birthday] changed the logic and output when they lose.
author MrJuneJune <me@mrjunejune.com>
date Mon, 01 Dec 2025 20:37:22 -0800
parents 6c322f9c2cb9
children
comparison
equal deleted inserted replaced
38:cf9caa4abc3e 39:6639f5389f47
5 <meta name="viewport" content="width=device-width, initial-scale=1.0"> 5 <meta name="viewport" content="width=device-width, initial-scale=1.0">
6 <link rel="preload" href="/punpun.png" as="image"> 6 <link rel="preload" href="/punpun.png" as="image">
7 <link rel="preload" href="/random_1.jpeg" as="image"> 7 <link rel="preload" href="/random_1.jpeg" as="image">
8 <link rel="preload" href="/random_2.png" as="image"> 8 <link rel="preload" href="/random_2.png" as="image">
9 <link rel="preload" href="/random_3.jpeg" as="image"> 9 <link rel="preload" href="/random_3.jpeg" as="image">
10 <title>Dino Birthday Game</title> 10 <title>Amu Birthday Game</title>
11 <style> 11 <style>
12 * { 12 * {
13 margin: 0; 13 margin: 0;
14 padding: 0; 14 padding: 0;
15 box-sizing: border-box; 15 box-sizing: border-box;
132 color: white; 132 color: white;
133 border: none; 133 border: none;
134 border-radius: 10px; 134 border-radius: 10px;
135 cursor: pointer; 135 cursor: pointer;
136 font-weight: bold; 136 font-weight: bold;
137 z-index: 1000;
137 box-shadow: 0 5px 15px rgba(0,0,0,0.3); 138 box-shadow: 0 5px 15px rgba(0,0,0,0.3);
138 } 139 }
139 140
140 #startBtn:hover { 141 #startBtn:hover {
141 background: #45a049; 142 background: #45a049;
171 } 172 }
172 } 173 }
173 </style> 174 </style>
174 </head> 175 </head>
175 <body> 176 <body>
177 <button id="startBtn">START GAME</button>
176 <div id="gameContainer"> 178 <div id="gameContainer">
177 <div id="ground"></div> 179 <div id="ground"></div>
178 <div id="dino"></div> 180 <div id="dino"></div>
179 <div id="goal"></div> 181 <div id="goal"></div>
180 <div id="score">Distance: 0m</div> 182 <div id="score">Distance: 0m</div>
181 <div id="message"></div> 183 <div id="message"></div>
182 <button id="startBtn">START GAME</button>
183 </div> 184 </div>
184 185
185 <script> 186 <script>
186 const dino = document.getElementById('dino'); 187 const dino = document.getElementById('dino');
187 const gameContainer = document.getElementById('gameContainer'); 188 const gameContainer = document.getElementById('gameContainer');
274 dinoRect.left > goalRect.right); 275 dinoRect.left > goalRect.right);
275 } 276 }
276 277
277 function gameOver() { 278 function gameOver() {
278 gameRunning = false; 279 gameRunning = false;
279 messageEl.textContent = 'Game Over! Click START to try again'; 280 messageEl.textContent = 'Game Over! YOU SUCK';
280 messageEl.style.display = 'block'; 281 messageEl.style.display = 'block';
281 startBtn.style.display = 'block';
282 obstacles.forEach(obs => obs.remove()); 282 obstacles.forEach(obs => obs.remove());
283 obstacles = []; 283 obstacles = [];
284 goal.style.display = 'none'; 284 goal.style.display = 'none';
285 } 285 }
286 286
340 startBtn.style.display = 'none'; 340 startBtn.style.display = 'none';
341 messageEl.style.display = 'none'; 341 messageEl.style.display = 'none';
342 goal.style.display = 'none'; 342 goal.style.display = 'none';
343 343
344 let obstacleInterval = setInterval(() => { 344 let obstacleInterval = setInterval(() => {
345 if (!gameRunning || distance < gracePeriod) { 345 if (!gameRunning) {
346 clearInterval(obstacleInterval); 346 clearInterval(obstacleInterval);
347 return; 347 return;
348 } 348 }
349 349 if (distance < gracePeriod) return; // just skip early
350 if (Math.random() > 0.3) { 350
351 createObstacle(); 351 if (Math.random() > 0.3) {
352 } 352 createObstacle();
353 }
353 }, 1500); 354 }, 1500);
354 355
355 gameLoop(); 356 gameLoop();
356 } 357 }
357 358