133 lines
6.2 KiB
HTML
133 lines
6.2 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="UTF-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Physilinks</title>
|
||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||
<link
|
||
href="https://fonts.googleapis.com/css2?family=Manrope:wght@500;700&display=swap"
|
||
rel="stylesheet"
|
||
/>
|
||
<link rel="stylesheet" href="styles.css" />
|
||
</head>
|
||
<body>
|
||
<div class="shell">
|
||
<header>
|
||
<h1>Physilinks</h1>
|
||
<div class="meta">
|
||
<span>Link same-colored balls to clear them.</span>
|
||
</div>
|
||
<button class="pause-btn" id="pause-btn">Pause</button>
|
||
</header>
|
||
<div id="scene-wrapper">
|
||
<div class="legend" id="palette-legend"></div>
|
||
<div class="floating-messages" id="floating-messages"></div>
|
||
<div class="pause-overlay" id="pause-overlay">Paused</div>
|
||
<div class="game-over" id="game-over">
|
||
<div class="game-over__card">
|
||
<div class="title">Game Over</div>
|
||
<div class="score-line">
|
||
Final score: <span id="final-score">0</span>
|
||
</div>
|
||
<button id="restart-btn">Restart</button>
|
||
</div>
|
||
</div>
|
||
<div class="game-over win-overlay" id="win-overlay">
|
||
<div class="game-over__card">
|
||
<div class="title">Level complete!</div>
|
||
<div class="score-line" id="win-message"></div>
|
||
<div class="win-actions">
|
||
<button id="win-restart">Restart</button>
|
||
<button id="win-next">Next scene</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="hud-bar">
|
||
<div class="card">
|
||
<strong>Scene</strong>
|
||
<select id="scene-select" class="selector"></select>
|
||
</div>
|
||
<div class="card progress-card">
|
||
<strong>Goal</strong>
|
||
<span id="goal-label">—</span>
|
||
<div class="progress">
|
||
<div class="progress__bar" id="goal-progress"></div>
|
||
</div>
|
||
</div>
|
||
<div class="card progress-card timer-card" id="chain-timer-card">
|
||
<strong>Chain timer</strong>
|
||
<span id="chain-timer-label">—</span>
|
||
<div class="progress">
|
||
<div
|
||
class="progress__bar timer-bar"
|
||
id="chain-timer-progress"
|
||
></div>
|
||
</div>
|
||
</div>
|
||
<div class="card">
|
||
<strong>Score</strong> <span id="score">0</span>
|
||
</div>
|
||
<div class="card">
|
||
<strong>High score</strong> <span id="high-score">0</span>
|
||
</div>
|
||
<div class="card">
|
||
<strong>Active color</strong>
|
||
<span id="active-color">—</span>
|
||
</div>
|
||
<div class="card">
|
||
<strong>Chain length</strong>
|
||
<span id="chain-length">0</span>
|
||
</div>
|
||
<div class="card">
|
||
<strong>Spawn</strong> <span id="spawn-rate"></span>
|
||
</div>
|
||
<div class="card">
|
||
<strong>Min link</strong> <span id="min-link"></span>
|
||
</div>
|
||
</div>
|
||
<div class="instructions">
|
||
Click or touch a ball to start a chain. Drag through balls of
|
||
the same color to link them together. Drag back to the previous
|
||
ball to undo the last link. Release to finish: chains of fewer
|
||
than the minimum vanish; chains with enough balls clear all
|
||
linked balls (score: 10 × length²). If the entry gets blocked
|
||
and a new ball cannot drop in, the run ends—restart to try
|
||
again. Pause/resume with the Pause button or Escape key. Switch
|
||
scenes with the selector to try different layouts/configs
|
||
(resets the run).
|
||
</div>
|
||
</div>
|
||
|
||
<script src="https://unpkg.com/matter-js@0.19.0/build/matter.min.js"></script>
|
||
<script src="https://cdn.jsdelivr.net/npm/poly-decomp@0.3.0/build/decomp.min.js"></script>
|
||
<script src="./src/decomp-setup.js"></script>
|
||
<script src="./src/scenes/scene-grid.js"></script>
|
||
<script src="./src/scenes/scene-balanced.js"></script>
|
||
<script src="./src/scenes/scene-lowg.js"></script>
|
||
<script src="./src/scenes/scene-fastdrop.js"></script>
|
||
<script src="./src/scenes/scene-lavalamp.js"></script>
|
||
<script src="./src/scenes/scene-relax.js"></script>
|
||
<script src="./src/scenes/scene-christmas-calm.js"></script>
|
||
<script src="./src/scenes/scene-swirl-arena.js"></script>
|
||
<script src="./src/scenes/scene-storm-grid.js"></script>
|
||
<script src="./src/scenes/scene-stack-blocks-chaos.js"></script>
|
||
<script src="./src/scenes/scene-stack-blocks.js"></script>
|
||
<script src="./src/scenes/scene-stack-blocks-packed.js"></script>
|
||
<script src="./src/scenes/index.js"></script>
|
||
<script src="./src/config.js"></script>
|
||
<script src="./src/engine.js"></script>
|
||
<script src="./src/scene-registry.js"></script>
|
||
<script src="./src/ui.js"></script>
|
||
<script src="./src/storage.js"></script>
|
||
<script src="./src/spawn.js"></script>
|
||
<script src="./src/goals.js"></script>
|
||
<script src="./src/chain-controller.js"></script>
|
||
<script src="./src/loop.js"></script>
|
||
<script src="./src/input.js"></script>
|
||
<script src="./src/main.js"></script>
|
||
</body>
|
||
</html>
|