Шутер

by NovaNinja65
113 lines4.0 KB
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Шутер</title>
    <style>
      body { margin: 0; padding: 0; background: #050510; overflow: hidden; }
      #game { position: relative; width: 100vw; height: 100vh; }
      .player { position: absolute; bottom: 20px; left: 50%; width: 40px; height: 40px; background: #4affc3; transform: translateX(-50%); }
      .bullet { position: absolute; width: 6px; height: 14px; background: white; }
      .enemy { position: absolute; top: -40px; width: 36px; height: 36px; background: #ff3b3b; border-radius: 50%; }
      #score { position: absolute; top: 20px; left: 20px; color: white; font: bold 24px Arial; text-shadow: 0 0 4px black; }
      #message { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); color: white; font-size: 32px; font-weight: bold; text-align: center; display: none; text-shadow: 0 0 8px black; }
    </style>
  </head>
  <body>
    <div id="game">
      <div id="score">Счёт: 0</div>
      <div class="player" id="player"></div>
      <div id="message">
        Игра окончена!<br>
        <button onclick="location.reload()" style="margin-top:15px; padding:10px 20px; font-size:18px; cursor:pointer;">Играть снова</button>
      </div>
    </div>

    <script>
      const game = document.getElementById('game');
      const player = document.getElementById('player');
      const scoreEl = document.getElementById('score');
      const message = document.getElementById('message');

      let score = 0;
      let playerX = window.innerWidth / 2;
      const speed = 10;

      window.addEventListener('keydown', e => {
        if (e.key === 'ArrowLeft') playerX -= speed;
        if (e.key === 'ArrowRight') playerX += speed;
        if (e.code === 'Space') shoot();
        if (playerX < 20) playerX = 20;
        if (playerX > window.innerWidth - 20) playerX = window.innerWidth - 20;
        player.style.left = (playerX - 20) + 'px';
      });

      const bullets = [];
      const enemies = [];

      function shoot() {
        const b = document.createElement('div');
        b.className = 'bullet';
        b.style.left = (playerX - 3) + 'px';
        b.style.top = (window.innerHeight - 50) + 'px';
        game.appendChild(b);
        bullets.push({ el: b, y: window.innerHeight - 50 });
      }

      function spawnEnemy() {
        const e = document.createElement('div');
        e.className = 'enemy';
        e.style.left = Math.random() * (window.innerWidth - 40) + 'px';
        e.style.top = '-40px';
        game.appendChild(e);
        enemies.push({ el: e, y: -40 });
      }

      setInterval(spawnEnemy, 700);

      function update() {
        for (let i = bullets.length - 1; i >= 0; i--) {
          const b = bullets[i];
          b.y -= 12;
          b.el.style.top = b.y + 'px';
          if (b.y < 0) {
            b.el.remove();
            bullets.splice(i, 1);
          }
        }

        for (let i = enemies.length - 1; i >= 0; i--) {
          const e = enemies[i];
          e.y += 4;
          e.el.style.top = e.y + 'px';

          if (e.y > window.innerHeight - 60 && Math.abs(e.el.offsetLeft - playerX) < 35) {
            message.style.display = 'block';
            cancelAnimationFrame(anim);
          }

          for (let j = bullets.length - 1; j >= 0; j--) {
            const b = bullets[j];
            if (b.el.getBoundingClientRect().intersects(e.el.getBoundingClientRect())) {
              e.el.remove();
              enemies.splice(i, 1);
              b.el.remove();
              bullets.splice(j, 1);
              score++;
              scoreEl.textContent = 'Счёт: ' + score;
              break;
            }
          }

          if (e.y > window.innerHeight) {
            e.el.remove();
            enemies.splice(i, 1);
          }
        }
        const anim = requestAnimationFrame(update);
      }
      requestAnimationFrame(update);
    </script>
  </body>
</html>
Game Source: Шутер

Creator: NovaNinja65
Libraries: none
Complexity: moderate (113 lines, 4.0 KB)
The full source code is displayed above on this page.
Remix Instructions

To remix this game, copy the source code above and modify it. Add a ARCADELAB header at the top with "remix_of: game-novaninja65" to link back to the original. Then publish at arcadelab.ai/publish.