Add Space Jump mini-game

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
2026-07-11 22:43:51 +03:00
parent 966d3733b5
commit e0240ff942
3 changed files with 291 additions and 0 deletions
@@ -0,0 +1,130 @@
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  min-height: 100vh;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: #12121c;
+  font-family: "Segoe UI", system-ui, sans-serif;
+}
+
+.game {
+  position: relative;
+  width: 800px;
+  max-width: 95vw;
+  height: 300px;
+  overflow: hidden;
+  border-radius: 12px;
+  background: linear-gradient(#1b2340, #2c3e66 70%, #3a5080);
+  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
+}
+
+.score {
+  position: absolute;
+  top: 14px;
+  right: 20px;
+  font-size: 28px;
+  font-weight: bold;
+  color: #fff;
+  text-shadow: 0 2px 4px rgba(0, 0, 0, 0.4);
+  z-index: 5;
+}
+
+.hint {
+  position: absolute;
+  top: 40%;
+  width: 100%;
+  text-align: center;
+  color: rgba(255, 255, 255, 0.85);
+  font-size: 20px;
+  letter-spacing: 1px;
+  z-index: 5;
+  animation: pulse 1.2s ease-in-out infinite;
+}
+
+@keyframes pulse {
+  0%, 100% { opacity: 0.5; }
+  50% { opacity: 1; }
+}
+
+.ground {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  height: 50px;
+  background: #263238;
+  border-top: 4px solid #4caf7d;
+}
+
+.player {
+  position: absolute;
+  left: 80px;
+  bottom: 50px;
+  width: 36px;
+  height: 36px;
+  border-radius: 8px;
+  background: #ffca3a;
+  box-shadow: 0 0 12px rgba(255, 202, 58, 0.6);
+  z-index: 3;
+}
+
+.player::before,
+.player::after {
+  content: "";
+  position: absolute;
+  top: 9px;
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background: #12121c;
+}
+
+.player::before { left: 7px; }
+.player::after { right: 7px; }
+
+.obstacle {
+  position: absolute;
+  bottom: 50px;
+  width: 22px;
+  border-radius: 4px 4px 0 0;
+  background: #e5484d;
+  box-shadow: 0 0 10px rgba(229, 72, 77, 0.5);
+  z-index: 2;
+}
+
+.game-over {
+  position: absolute;
+  inset: 0;
+  display: none;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: 8px;
+  background: rgba(10, 10, 20, 0.75);
+  color: #fff;
+  z-index: 10;
+}
+
+.game-over.visible {
+  display: flex;
+}
+
+.game-over h1 {
+  font-size: 34px;
+  margin-bottom: 6px;
+}
+
+.game-over p {
+  font-size: 18px;
+  color: rgba(255, 255, 255, 0.9);
+}
+
+.restart-hint {
+  margin-top: 10px;
+  animation: pulse 1.2s ease-in-out infinite;
+}