Кабель, Вода и Корабль

<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Кабель, Вода и Корабль</title>
<style>
  body {
    margin: 0;
    background: #0f172a;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    font-family: Arial, sans-serif;
    color: #fff;
  }
  #game {
    position: relative;
    width: 800px;
    height: 600px;
    background: linear-gradient(#87ceeb 0%, #bfe3f5 55%, #1e6fa8 55%, #0d3f66 100%);
    border: 4px solid #1e293b;
    border-radius: 8px;
    overflow: hidden;
    user-select: none;
  }
  /* Кабель */
  .cable {
    position: absolute;
    width: 10px;
    height: 90px;
    background: linear-gradient(90deg, #222, #555, #222);
    border-radius: 5px;
    z-index: 20;
    box-shadow: 0 0 10px rgba(0,255,255,0.4);
  }
  .cable::before, .cable::after {
    content: "";
    position: absolute;
    left: -3px;
    width: 16px;
    height: 16px;
    background: #d4af37;
    border-radius: 50%;
  }
  .cable::before { top: -6px; }
  .cable::after { bottom: -6px; }
  /* Корабль */
  .ship {
    position: absolute;
    width: 160px;
    height: 70px;
    z-index: 10;
    transition: none;
  }
  .ship .hull {
    position: absolute;
    bottom: 0;
    width: 160px;
    height: 45px;
    background: #8b4513;
    border-radius: 8px 8px 40px 40px / 8px 8px 20px 20px;
    border: 3px solid #5d2e0a;
    box-sizing: border-box;
  }
  .ship .cabin {
    position: absolute;
    bottom: 42px;
    left: 55px;
    width: 50px;
    height: 28px;
    background: #f4f4f4;
    border: 3px solid #999;
    border-radius: 4px 4px 0 0;
    box-sizing: border-box;
  }
  .ship .cabin::after {
    content: "";
    position: absolute;
    top: 6px; left: 8px;
    width: 10px; height: 10px;
    background: #4fc3f7;
    border-radius: 2px;
    box-shadow: 18px 0 0 #4fc3f7;
  }
  .ship .mast {
    position: absolute;
    bottom: 70px;
    left: 78px;
    width: 4px;
    height: 40px;
    background: #5d2e0a;
  }
  .ship .flag {
    position: absolute;
    bottom: 100px;
    left: 82px;
    width: 0; height: 0;
    border-left: 22px solid #e63946;
    border-top: 10px solid transparent;
    border-bottom: 10px solid transparent;
  }
  /* Волны */
  .wave {
    position: absolute;
    bottom: 265px;
    width: 100%;
    height: 6px;
    background: rgba(255,255,255,0.35);
    border-radius: 50%;
  }
  /* HUD */
  .hud {
    position: absolute;
    top: 10px; left: 10px;
    background: rgba(0,0,0,0.65);
    padding: 10px 16px;
    border-radius: 8px;
    font-size: 14px;
    line-height: 1.6;
    z-index: 100;
  }
  .hud b { color: #4fc3f7; }
  .msg {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    background: rgba(0,0,0,0.88);
    padding: 28px 46px;
    border-radius: 14px;
    font-size: 26px;
    text-align: center;
    display: none;
    z-index: 200;
    border: 2px solid #4fc3f7;
  }
  .msg.show { display: block; }
  button {
    margin-top: 16px;
    padding: 10px 26px;
    font-size: 16px;
    background: #4fc3f7;
    border: none;
    border-radius: 8px;
    cursor: pointer;
    color: #06263b;
    font-weight: bold;
  }
  button:hover { background: #81d4fa; }
</style>
</head>
<body>
<div id="game">
  <div class="hud">
    🎯 <b>ПРОБЕЛ</b> — сбросить кабель<br>
    🚢 Корабль плывёт сам<br>
    💧 Не попал — кабель утонул<br>
    ⭐ Попаданий: <span id="score">0</span> / Провалов: <span id="misses">0</span>
  </div>

  <div class="wave" style="left:0;   opacity:0.5;"></div>
  <div class="wave" style="left:40%; opacity:0.3; bottom: 250px;"></div>

  <div class="msg" id="msg"></div>
</div>

<script>
  const game = document.getElementById('game');
  const msgEl = document.getElementById('msg');
  const scoreEl = document.getElementById('score');
  const missesEl = document.getElementById('misses');

  // ===== Корабль =====
  const ship = document.createElement('div');
  ship.className = 'ship';
  ship.innerHTML = `
    <div class="hull"></div>
    <div class="cabin"></div>
    <div class="mast"></div>
    <div class="flag"></div>
  `;
  game.appendChild(ship);

  let shipX = 620;
  let shipSpeed = 1.6;
  const SHIP_Y = 600 - 70 - 180; // палуба над водой (вода начинается с y≈270)

  // ===== Состояние игры =====
  let score = 0;
  let misses = 0;
  let cable = null;
  let cableX = 0, cableY = 0, cableVY = 0;
  let falling = false;
  let resolved = false;

  // ===== Игровой цикл =====
  function update() {
    // Движение корабля (туда-обратно)
    shipX += shipSpeed;
    if (shipX > 800 - 160) { shipX = 800 - 160; shipSpeed *= -1; }
    if (shipX < 0)         { shipX = 0;         shipSpeed *= -1; }
    ship.style.left = shipX + 'px';
    ship.style.top  = SHIP_Y + 'px';

    // Падение кабеля
    if (falling && cable) {
      cableVY += 0.7;
      cableY += cableVY;
      cable.style.top = cableY + 'px';

      const cableBottom = cableY + 90;

      // Попал на палубу корабля?
      if (!resolved &&
          cableX + 10 > shipX &&
          cableX < shipX + 160 &&
          cableBottom >= SHIP_Y + 10 &&
          cableBottom <= SHIP_Y + 60) {
        resolved = true;
        falling = false;
        score++;
        scoreEl.textContent = score;
        showMsg('⭐ Попал на корабль! Отлично!', '#4fc3f7');
        cable.style.transition = 'opacity 0.4s';
        cable.style.opacity = '0';
        setTimeout(() => { if (cable) { cable.remove(); cable = null; } }, 420);
      }

      // Упал в воду (утопление)
      if (!resolved && cableBottom >= 330) {
        resolved = true;
        falling = false;
        misses++;
        missesEl.textContent = misses;
        showMsg('💧 Кабель утонул в воде...', '#ff6b6b');
        // Анимация погружения
        cable.style.transition = 'top 0.8s ease-in, opacity 0.8s';
        cable.style.top = '500px';
        cable.style.opacity = '0';
        setTimeout(() => { if (cable) { cable.remove(); cable = null; } }, 850);
      }

      // Улетел за пределы
      if (cableY > 700 && cable) {
        cable.remove();
        cable = null;
        falling = false;
      }
    }

    requestAnimationFrame(update);
  }

  function showMsg(text, color) {
    msgEl.textContent = text;
    msgEl.style.borderColor = color;
    msgEl.classList.add('show');
    clearTimeout(showMsg._t);
    showMsg._t = setTimeout(() => msgEl.classList.remove('show'), 1200);
  }

  function dropCable() {
    if (falling || cable) return;
    cable = document.createElement('div');
    cable.className = 'cable';
    cableX = 100 + Math.random() * 600;
    cableY = -100;
    cableVY = 0;
    cable.style.left = cableX + 'px';
    cable.style.top = cableY + 'px';
    game.appendChild(cable);
    falling = true;
    resolved = false;
  }

  // ===== Управление =====
  document.addEventListener('keydown', (e) => {
    if (e.code === 'Space') {
      e.preventDefault();
      dropCable();
    }
  });
  game.addEventListener('click', dropCable);

  update();
</script>
</body>
</html>