82 lines
3.5 KiB
HTML
82 lines
3.5 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 class="pill">Physics</span>
|
||
<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="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>
|
||
<div class="hud-bar">
|
||
<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 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>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>Scene</strong>
|
||
<select id="scene-select" class="selector"></select>
|
||
</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="./scenes.js"></script>
|
||
<script src="./main.js"></script>
|
||
</body>
|
||
</html>
|