rules.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Space Invaders Game Rules</title>
    <link rel="stylesheet" href="rules.css" />
    <link
      href="https://fonts.googleapis.com/css2?family=Roboto:wght@400;700&display=swap"
      rel="stylesheet"
    />
    <link
      rel="stylesheet"
      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css"
    />
  </head>
  <body>
    <header>
      <h1>Space Invaders Game Rules</h1>
    </header>

    <div class="gtranslate_wrapper"></div>
    <script>
      window.gtranslateSettings = {
        default_language: "en",
        native_language_names: true,
        languages: ["en", "fr", "de", "it", "es", "pl", "hi"],
        wrapper_selector: ".gtranslate_wrapper",
        alt_flags: { en: "usa" },
      };
    </script>
    <script
      src="https://cdn.gtranslate.net/widgets/latest/float.js"
      defer
    ></script>

    <div class="section">
      <h2>Game Controls & Rules:</h2>
      <ul>
        <li>
          <strong>Move Your Ship:</strong> Use Left/Right Arrow keys or swipe to
          navigate your ship horizontally across the screen.
        </li>
        <li>
          <strong>Shoot to Destroy:</strong> Press Spacebar (or tap) to shoot
          and destroy enemy alien ships.
        </li>
        <li>
          <strong>Target Red Alien Ships:</strong> Focus on destroying red alien
          ships to score points and keep the battlefield clear.
        </li>
        <li>
          <strong>Prevent Alien Invasion:</strong> Avoid letting alien ships
          reach the bottom of the screen, or it's game over!
        </li>
        <li>
          <strong>Endless Survival Challenge:</strong> Survive for as long as
          possible by outmaneuvering enemies and staying alive.
        </li>
      </ul>
    </div>

    <div class="section">
      <h2>Power-Up Benefits:</h2>
      <ul>
        <li>
          <strong>Health Boost:</strong> Collect Health Boost power-ups to
          increase lives and last longer in the game.
        </li>
        <li>
          <strong>Speed Boost:</strong> Grab the Speed Boost to enhance your
          movement speed, making it easier to dodge enemies.
        </li>
        <li>
          <strong>Shield Power-Up:</strong> Activate the Shield to become
          invincible for a short period and attack without fear.
        </li>
      </ul>
    </div>

    <div class="section score-table">
      <h2>Score Table</h2>
      <p>
        Earn points by defeating different types of alien ships. Each type has
        its unique score value:
      </p>
      <div class="score-grid">
        <div class="score-item">
          <img src="assets/images/greenMob.jpg" class="mob-img" />
          <span class="mob-name">Default Alien</span>
          <span class="mob-score">10 Points</span>
        </div>
        <div class="score-item">
          <img src="assets/images/cuteMob.jpg" class="mob-img" />
          <span class="mob-name">Cute Alien</span>
          <span class="mob-score">15 Points</span>
        </div>
        <div class="score-item">
          <img src="assets/images/terrifyMob.jpg" class="mob-img" />
          <span class="mob-name">Terrifying Alien</span>
          <span class="mob-score">20 Points</span>
        </div>

        <div class="score-item">
          <img src="assets/images/roboticMob.jpg" class="mob-img" />
          <span class="mob-name">Robotic Alien</span>
          <span class="mob-score">25 Points</span>
        </div>
        <div class="score-item">
          <img src="assets/images/ghostMob.jpg" class="mob-img" />
          <span class="mob-name">Ghostly Alien</span>
          <span class="mob-score">30 Points</span>
        </div>
      </div>
    </div>
  </body>
  <footer class="bg-body-tertiary text-center">
    <!-- Grid container -->
    <div class="container p-4">
      <!-- Section: Social media -->
      <section class="mb-4">
        <!-- Facebook -->
        <a
          data-mdb-ripple-init
          class="btn btn-outline btn-floating m-1"
          href="#!"
          style="margin: 15px"
          role="button"
          ><i class="fab fa-facebook-f"></i
        ></a>

        <!-- Twitter -->
        <a
          data-mdb-ripple-init
          class="btn btn-outline btn-floating m-1"
          href="#!"
          style="margin: 15px"
          role="button"
          ><i class="fab fa-twitter"></i
        ></a>

        <!-- Google -->
        <a
          data-mdb-ripple-init
          class="btn btn-outline btn-floating m-1"
          href="#!"
          style="margin: 15px"
          role="button"
          ><i class="fab fa-google"></i
        ></a>

        <!-- Instagram -->
        <a
          data-mdb-ripple-init
          class="btn btn-outline btn-floating m-1"
          href="#!"
          style="margin: 15px"
          role="button"
          ><i class="fab fa-instagram"></i
        ></a>

        <!-- Linkedin -->
        <a
          data-mdb-ripple-init
          class="btn btn-outline btn-floating m-1"
          href="#!"
          style="margin: 15px"
          role="button"
          ><i class="fab fa-linkedin-in"></i
        ></a>

        <!-- Github -->
        <a
          data-mdb-ripple-init
          class="btn btn-outline btn-floating m-1"
          href="#!"
          style="margin: 15px"
          role="button"
          ><i class="fab fa-github"></i
        ></a>
      </section>
      <section class="mx-4 mb-4">
        <p>
          Welcome to Alien Invasion Defense, a fast-paced space shooting game!
          Defend your base from waves of alien invaders and become the ultimate
          space defender. 🌌 With simple controls, sleek graphics, and exciting
          gameplay, get ready for an epic battle. Use your weapons to destroy
          alien ships, survive multiple waves, and protect your base with 3
          lives. 👾
        </p>
      </section>
    </div>

    <!-- Copyright -->
    <div class="text-center p-3" style="background-color: rgba(0, 0, 0, 0.05)">
      © <span id="currentYear"></span> Alien-Invasion-Defense. All rights reserved.
    </div>
    <!-- Copyright -->
  </footer>
  <script>
    document.getElementById("currentYear").textContent = new Date().getFullYear();
  </script>
</html>