🎮 feat: мини-игра Space Jump — платформер с прыжками по пробелу

- физика прыжка с гравитацией - препятствия со случайной высотой - счёт, рекорд в localStorage, рост скорости - поддержка тапа на мобильных Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
📝 docs: новый README с описанием игры и управлением
2026-07-11 23:04:38 +03:00 · 2026-07-11 23:04:38 +03:00
4 changed files with 327 additions and 2 deletions
@@ -1,3 +1,37 @@
-# ed
+# 🟡 Space Jump
-Edddd
+Мини-игра-раннер на чистом HTML, CSS и JavaScript — без библиотек и сборки.
 Жёлтый квадратик бежит по платформе, навстречу летят красные препятствия.
 Перепрыгивай их и набирай очки — с каждым очком скорость растёт.
 ## 🎮 Управление
 | Действие | Клавиша |
 |---|---|
 | Старт / прыжок | **Пробел** |
 | На телефоне | Тап по экрану |
 ## ✨ Особенности
 - Счёт и рекорд (сохраняется в `localStorage`)
 - Плавная физика прыжка с гравитацией
 - Скорость растёт по мере игры
 - Работает на телефоне (тап вместо пробела)
 - Никаких зависимостей — просто открой `index.html`
 ## 🚀 Запуск
 ```bash
 git clone https://git.exest.fun/exest/ed.git
 cd ed
 open index.html
 ```
 ## 📁 Структура
 ```
 index.html  — разметка игры
 style.css   — оформление
 script.js   — логика: физика, препятствия, счёт
 ```
@@ -0,0 +1,27 @@
 <!DOCTYPE html>
 <html lang="ru">
 <head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Space Jump</title>
  <link rel="stylesheet" href="style.css">
 </head>
 <body>
  <div class="game" id="game">
    <div class="score" id="score">0</div>
    <div class="hint" id="hint">Нажми ПРОБЕЛ, чтобы начать</div>
    <div class="player" id="player"></div>
    <div class="ground"></div>
    <div class="game-over" id="gameOver">
      <h1>Игра окончена</h1>
      <p>Счёт: <span id="finalScore">0</span></p>
      <p>Рекорд: <span id="bestScore">0</span></p>
      <p class="restart-hint">Пробел — заново</p>
    </div>
  </div>
  <script src="script.js"></script>
 </body>
 </html>
@@ -0,0 +1,134 @@
 const game = document.getElementById("game");
 const player = document.getElementById("player");
 const scoreEl = document.getElementById("score");
 const hintEl = document.getElementById("hint");
 const gameOverEl = document.getElementById("gameOver");
 const finalScoreEl = document.getElementById("finalScore");
 const bestScoreEl = document.getElementById("bestScore");
 const GROUND = 50;        // высота земли
 const GRAVITY = 0.55;
 const JUMP_FORCE = 12;
 const START_SPEED = 5;
 let running = false;
 let gameOver = false;
 let playerY = 0;          // высота над землёй
 let velocity = 0;
 let speed = START_SPEED;
 let score = 0;
 let best = Number(localStorage.getItem("spaceJumpBest")) || 0;
 let obstacles = [];
 let spawnTimer = 0;
 let lastTime = 0;
 function startGame() {
  obstacles.forEach((o) => o.el.remove());
  obstacles = [];
  playerY = 0;
  velocity = 0;
  speed = START_SPEED;
  score = 0;
  spawnTimer = 0;
  running = true;
  gameOver = false;
  hintEl.style.display = "none";
  gameOverEl.classList.remove("visible");
  scoreEl.textContent = "0";
  lastTime = performance.now();
  requestAnimationFrame(loop);
 }
 function jump() {
  if (playerY === 0) {
    velocity = JUMP_FORCE;
  }
 }
 function spawnObstacle() {
  const el = document.createElement("div");
  el.className = "obstacle";
  const height = 30 + Math.random() * 35;
  el.style.height = height + "px";
  game.appendChild(el);
  obstacles.push({ el, x: game.clientWidth, height });
 }
 function endGame() {
  running = false;
  gameOver = true;
  best = Math.max(best, score);
  localStorage.setItem("spaceJumpBest", best);
  finalScoreEl.textContent = score;
  bestScoreEl.textContent = best;
  gameOverEl.classList.add("visible");
 }
 function loop(now) {
  if (!running) return;
  const dt = Math.min((now - lastTime) / 16.67, 3); // нормализация к 60 FPS
  lastTime = now;
  // физика игрока
  velocity -= GRAVITY * dt;
  playerY += velocity * dt;
  if (playerY <= 0) {
    playerY = 0;
    velocity = 0;
  }
  player.style.bottom = GROUND + playerY + "px";
  // спавн препятствий
  spawnTimer -= dt;
  if (spawnTimer <= 0) {
    spawnObstacle();
    spawnTimer = 60 + Math.random() * 70;
  }
  // движение препятствий и столкновения
  const playerLeft = 80;
  const playerRight = playerLeft + 36;
  for (let i = obstacles.length - 1; i >= 0; i--) {
    const o = obstacles[i];
    o.x -= speed * dt;
    o.el.style.left = o.x + "px";
    if (o.x + 22 < 0) {
      o.el.remove();
      obstacles.splice(i, 1);
      score++;
      scoreEl.textContent = score;
      speed += 0.15; // чуть быстрее с каждым очком
      continue;
    }
    const hitX = o.x < playerRight - 6 && o.x + 22 > playerLeft + 6;
    const hitY = playerY < o.height - 4;
    if (hitX && hitY) {
      endGame();
      return;
    }
  }
  requestAnimationFrame(loop);
 }
 document.addEventListener("keydown", (e) => {
  if (e.code !== "Space") return;
  e.preventDefault();
  if (!running) {
    startGame();
  } else {
    jump();
  }
 });
 // поддержка тапа/клика для мобильных
 game.addEventListener("pointerdown", () => {
  if (!running) {
    startGame();
  } else {
    jump();
  }
 });
@@ -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;
 }