Mind Codespaces — Solid Git Bridge

// loadingdecoding pod stream
Source
4.7 KB · main
1<!DOCTYPE html>
2<html lang="en">
3<head>
4  <meta charset="UTF-8">
5  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6  <title>Catch the Star ⭐</title>
7  <style>
8    * { margin: 0; padding: 0; box-sizing: border-box; }
9    body {
10      font-family: 'Segoe UI', system-ui, sans-serif;
11      background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
12      min-height: 100vh;
13      display: flex;
14      flex-direction: column;
15      align-items: center;
16      justify-content: center;
17      overflow: hidden;
18    }
19    h1 {
20      color: #fff;
21      font-size: 2.5rem;
22      margin-bottom: 1rem;
23      text-shadow: 0 0 20px #e94560;
24    }
25    #game-area {
26      width: 600px;
27      height: 400px;
28      background: rgba(255,255,255,0.05);
29      border-radius: 20px;
30      border: 2px solid #e94560;
31      position: relative;
32      cursor: crosshair;
33      box-shadow: 0 0 40px rgba(233,69,96,0.3);
34    }
35    .star {
36      position: absolute;
37      font-size: 2rem;
38      cursor: pointer;
39      transition: transform 0.1s;
40      user-select: none;
41    }
42    .star:hover { transform: scale(1.2); }
43    #score {
44      color: #fff;
45      font-size: 1.5rem;
46      margin: 1rem 0;
47    }
48    #score span { color: #e94560; font-weight: bold; }
49    #start-btn {
50      padding: 15px 40px;
51      font-size: 1.2rem;
52      background: linear-gradient(45deg, #e94560, #ff6b6b);
53      color: white;
54      border: none;
55      border-radius: 50px;
56      cursor: pointer;
57      transition: transform 0.2s, box-shadow 0.2s;
58      box-shadow: 0 5px 20px rgba(233,69,96,0.4);
59    }
60    #start-btn:hover {
61      transform: translateY(-3px);
62      box-shadow: 0 8px 30px rgba(233,69,96,0.6);
63    }
64    #start-btn:disabled {
65      opacity: 0.5;
66      cursor: not-allowed;
67    }
68    #timer {
69      color: #4ecca3;
70      font-size: 1.2rem;
71    }
72    .pop { animation: pop 0.3s ease-out; }
73    @keyframes pop {
74      0% { transform: scale(1); }
75      50% { transform: scale(1.5); }
76      100% { transform: scale(0); opacity: 0; }
77    }
78  </style>
79</head>
80<body>
81  <h1>Catch the Star ⭐</h1>
82  <div id="game-area">
83    <div id="message" style="color:white;font-size:1.5rem;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center;">
84      Press Start to Play!
85    </div>
86  </div>
87  <div id="score">Score: <span id="score-val">0</span></div>
88  <div id="timer">Time: <span id="time-val">30</span>s</div>
89  <br>
90  <button id="start-btn">Start Game</button>
91 
92  <script>
93    const gameArea = document.getElementById('game-area');
94    const scoreVal = document.getElementById('score-val');
95    const timeVal = document.getElementById('time-val');
96    const startBtn = document.getElementById('start-btn');
97    const message = document.getElementById('message');
98    
99    let score = 0;
100    let timeLeft = 30;
101    let gameRunning = false;
102    let timerInterval;
103    let starTimeout;
104 
105    const stars = ['⭐', '🌟', '✨', '💫', '⭐'];
106    
107    function createStar() {
108      if (!gameRunning) return;
109      
110      const star = document.createElement('div');
111      star.className = 'star';
112      star.textContent = stars[Math.floor(Math.random() * stars.length)];
113      
114      const x = Math.random() * (560 - 40);
115      const y = Math.random() * (360 - 40);
116      star.style.left = x + 'px';
117      star.style.top = y + 'px';
118      
119      star.onclick = () => {
120        if (!gameRunning) return;
121        score += 10;
122        scoreVal.textContent = score;
123        star.classList.add('pop');
124        setTimeout(() => star.remove(), 300);
125        createStar();
126      };
127      
128      gameArea.appendChild(star);
129      
130      starTimeout = setTimeout(() => {
131        if (star.parentNode) {
132          star.remove();
133          if (gameRunning) createStar();
134        }
135      }, 1500);
136    }
137 
138    function startGame() {
139      score = 0;
140      timeLeft = 30;
141      scoreVal.textContent = '0';
142      timeVal.textContent = '30';
143      gameRunning = true;
144      startBtn.disabled = true;
145      message.style.display = 'none';
146      
147      document.querySelectorAll('.star').forEach(s => s.remove());
148      
149      createStar();
150      
151      timerInterval = setInterval(() => {
152        timeLeft--;
153        timeVal.textContent = timeLeft;
154        if (timeLeft <= 0) {
155          endGame();
156        }
157      }, 1000);
158    }
159 
160    function endGame() {
161      gameRunning = false;
162      clearInterval(timerInterval);
163      clearTimeout(starTimeout);
164      startBtn.disabled = false;
165      message.style.display = 'block';
166      message.innerHTML = `Game Over!<br>Final Score: <span style="color:#e94560;font-weight:bold">${score}</span>`;
167      document.querySelectorAll('.star').forEach(s => s.remove());
168    }
169 
170    startBtn.onclick = startGame;
171  </script>
172</body>
173</html>