index.html

<!DOCTYPE html>
<html lang="en-AU">
  <head>
    <!-- WEB PAGE HEAD START -->
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="color-scheme" content="dark">
    <meta name="theme-color" content="#00ff44">
    <title>Drop Game | Colour Tile Party Game for AltspaceVR &amp; BanterVR | FireR.at</title>
    <meta name="description" content="Drop is a multiplayer colour tile party game room for AltspaceVR (altvr.app) and BanterVR. Find the target colour, stand on it, and survive as every other tile falls away.">
    <meta name="keywords" content="Drop Game, Colour Drop, Color Drop, block party game, AltspaceVR game, Banter game, altvr.app, VR party game, FireRat">
    <meta name="author" content="FireRat">
    <meta name="robots" content="index, follow">
    <meta property="og:type" content="website">
    <meta property="og:site_name" content="FireR.at">
    <meta property="og:title" content="Drop Game | Colour Tile Party Game for AltspaceVR &amp; BanterVR">
    <meta property="og:description" content="Drop is a multiplayer colour tile party game room for AltspaceVR (altvr.app) and BanterVR. Find the target colour, stand on it, and survive as every other tile falls away.">
    <meta property="og:url" content="https://drop.firer.at/">
    <meta property="og:image" content="https://cdn.sidequestvr.com/file/4151643/screenshot-2026-04-30-145810.png">
    <meta name="twitter:card" content="summary_large_image">
    <meta name="twitter:title" content="Drop Game | Colour Tile Party Game for AltspaceVR &amp; BanterVR">
    <meta name="twitter:description" content="Drop is a multiplayer colour tile party game room for AltspaceVR (altvr.app) and BanterVR. Find the target colour, stand on it, and survive as every other tile falls away.">
    <meta name="twitter:image" content="https://cdn.sidequestvr.com/file/4151643/screenshot-2026-04-30-145810.png">
    <link rel="canonical" href="https://drop.firer.at/">
    <link rel="icon" href="https://firer.at/files/favicon.ico" type="image/x-icon">
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "VideoGame",
      "name": "Drop Game",
      "url": "https://drop.firer.at/",
      "image": "https://cdn.sidequestvr.com/file/4151643/screenshot-2026-04-30-145810.png",
      "description": "Drop is a multiplayer colour tile party game room for AltspaceVR (altvr.app) and BanterVR. Find the target colour, stand on it, and survive as every other tile falls away.",
      "gamePlatform": [
        "AltspaceVR",
        "BanterVR"
      ],
      "applicationCategory": "GameApplication",
      "playMode": "MultiPlayer",
      "numberOfPlayers": {
        "@type": "QuantitativeValue",
        "minValue": 1,
        "maxValue": 30
      },
      "author": {
        "@type": "Person",
        "name": "FireRat",
        "url": "https://firer.at/"
      },
      "isPartOf": {
        "@type": "WebPage",
        "url": "https://firer.at/games.html"
      }
    }
    </script>
    <script>
      // In Altspace or Banter this page is the space itself, so the web page part is hidden.
      (function () {
        var hide = function () { document.documentElement.classList.add('in-space'); };
        if (window.isBanter || window.BS) hide();
        window.addEventListener('bs-loaded', hide);
      })();
    </script>
    <link rel="stylesheet" href="https://firer.at/pages/nstyle.css">
    <script src="https://firer.at/scripts/RandomBG.js"></script>
    <style>
      .in-space .fire-page, .in-space body::before, .in-space body::after { display: none !important; }
      .fire-page .info-block ul, .fire-page .info-block ol { color: var(--text-secondary); margin: 0 0 1.25rem 1.4rem; }
      .fire-page li { margin-bottom: 0.4rem; }
      .fire-page .info-block { margin-bottom: 3rem; }
      .fire-page .room-url { font-size: 1.15em; }
      .fire-page .hero-shot { width: 100%; max-height: 420px; object-fit: cover; border-radius: 16px; margin: 0 0 2rem; display: block; }
      .fire-page footer { text-align: center; }
    </style>
    <!-- WEB PAGE HEAD END -->
    <!-- The game: in Altspace or Banter this script builds the whole room -->
    <script src="./bullshcript.js?026"></script>
  </head>
  <body>
<!-- WEB PAGE START: shown in a normal browser, hidden in Altspace and Banter -->
<div class="fire-page">
  <div class="ambient-glow-2"></div>
  <div class="container">
    <header>
      <span class="eyebrow">Altspace &amp; Banter game room</span>
      <h1><span class="text-gradient">Drop</span></h1>
      <p><strong>Stand on the right colour before the floor falls away.</strong></p>
      <p>A big grid of coloured tiles hangs in space. Each round the screens show a colour and a countdown. Get to a tile of that colour in time, because every other tile drops. The countdown gets shorter every round, and the last player standing wins.</p>
    </header>

    <nav>
      <a href="https://firer.at/games.html" class="buttonG buttonss buttonActive">&larr; All games</a>
      <a href="https://firer.at/" class="buttonss buttonMain">FireR.at</a>
      <a href="https://sidequestvr.com/space/2471" class="buttonY buttonss" target="_blank">SideQuest page</a>
      <a href="https://github.com/FireRat666/Drop" class="buttonW buttonss" target="_blank">GitHub</a>
      <a href="https://ko-fi.com/FireRat666" class="buttonGY buttonss" target="_blank">Ko-fi</a>
    </nav>

    <main>
      <img class="hero-shot" src="https://cdn.sidequestvr.com/file/4151643/screenshot-2026-04-30-145810.png" alt="Drop in Altspace" loading="lazy">

      <section class="info-block" id="play">
        <h2>Play it</h2>
        <p>Drop is a whole room, not a game you add to your own world. Open it as a space in VR or on desktop:</p>
        <ul>
          <li><strong>Altspace:</strong> type <code class="room-url">drop.firer.at</code> into the search bar, or join it from its <a href="https://sidequestvr.com/space/2471" target="_blank">SideQuest page</a>.</li>
          <li><strong>Banter:</strong> open <code class="room-url">https://drop.firer.at</code> as a space.</li>
        </ul>
        <p>The game runs entirely in the space, so there is no server and nothing to install.</p>
      </section>

      <section class="info-block" id="how">
        <h2>How to play</h2>
        <ol><li>The host clicks <strong>START GAME</strong>. Everyone in the lobby is teleported onto the grid.</li><li>Watch the big screens above the arena for the <strong>target colour</strong> and the countdown.</li><li>Stand on any tile of that colour before the countdown ends.</li><li>Every other tile drops. If you were on one, you fall back to the lobby.</li><li>The tiles rise again and the next round starts, with less time.</li><li>The last player standing wins. Playing alone? See how long you can last.</li></ol>
      </section>

      <section class="info-block" id="controls">
        <h2>Controls</h2>
        <p>The control panels are in the lobby. Host controls only show for the host, and anyone can claim host.</p>
        <ul><li><strong>Claim Host</strong>: take over the game settings. If the host is still here, it takes 30 seconds.</li><li><strong>Tile size</strong>: big 8x8 tiles or small 12x12 tiles (lobby only).</li><li><strong>Initial timer</strong>: the first round lasts 10, 7 or 5 seconds.</li><li><strong>Hard mode</strong>: the colours reshuffle every round and the timer speeds up faster.</li><li><strong>Reset</strong>: end the game and go back to the lobby.</li><li><strong>Muted</strong>: turn the countdown ticks off, just for you.</li></ul>
      </section>

      <section class="info-block" id="scores">
        <h2>Scoreboard</h2>
        <p>The scoreboard in the lobby keeps <strong>most falls</strong>, and <strong>best survival times</strong> for normal and hard mode, for each tile size. Scores stay with the room.</p>
      </section>
    </main>

    <footer>
      <p>Drop Game by FireRat. Open <a href="https://drop.firer.at">drop.firer.at</a> as a space in Altspace or Banter to play.</p>
      <p>&copy; <span class="fire-year"></span> <a href="https://firer.at/">FireR.at</a></p>
    </footer>
  </div>
  <script>
    document.querySelectorAll('.fire-year').forEach(el => { el.textContent = new Date().getFullYear(); });
  </script>
</div>
<!-- WEB PAGE END -->
  </body>
</html>