added sys digger
This commit is contained in:
verboomp
@@ -1,5 +1,5 @@
|
||||
// ─── Game rules ──────────────────────────────────────────────────────────────
|
||||
const MAX_DOCKS = 8; // failed docks before game over
|
||||
const MAX_DOCKS = 6; // failed docks before game over
|
||||
const NUM_ANCHORS = 6; // anchor points around the central molecule
|
||||
const ANCHOR_RADIUS = 120; // px distance from center to anchor points
|
||||
const CLICK_RADIUS = 38; // px hit radius for clicking an anchor
|
||||
|
||||
@@ -79,6 +79,7 @@ function topScore() {
|
||||
let score = 0;
|
||||
let docks = 0;
|
||||
let gameOver = false;
|
||||
let gameStarted = false;
|
||||
let incomingAtoms = [];
|
||||
let anchorPoints = [];
|
||||
let particles = [];
|
||||
@@ -177,19 +178,26 @@ function submitScore() {
|
||||
function restartGame() {
|
||||
score = docks = 0;
|
||||
gameOver = false;
|
||||
gameStarted = false;
|
||||
incomingAtoms = [];
|
||||
particles = [];
|
||||
clickEffects = [];
|
||||
lastSpawn = 0;
|
||||
spawnInterval = SPAWN_INTERVAL_START;
|
||||
document.getElementById('score').textContent = 'Score: 0';
|
||||
document.getElementById('docks-count').textContent = '0 / 8 docks';
|
||||
document.getElementById('docks-count').textContent = `0 / ${MAX_DOCKS} docks`;
|
||||
document.getElementById('name-form').style.display = 'flex';
|
||||
document.getElementById('overlay').classList.remove('active');
|
||||
document.getElementById('intro').classList.remove('hidden');
|
||||
initAnchors();
|
||||
updateCystinstein();
|
||||
}
|
||||
|
||||
function startGame() {
|
||||
gameStarted = true;
|
||||
document.getElementById('intro').classList.add('hidden');
|
||||
}
|
||||
|
||||
function updateHudBest(best) {
|
||||
document.getElementById('highscore').textContent = best !== null ? `Best: ${best}` : 'Best: —';
|
||||
}
|
||||
@@ -203,7 +211,7 @@ document.getElementById('player-name').addEventListener('keydown', e => {
|
||||
function gameLoop(ts) {
|
||||
drawBackground();
|
||||
|
||||
if (!gameOver && ts - lastSpawn > spawnInterval) {
|
||||
if (gameStarted && !gameOver && ts - lastSpawn > spawnInterval) {
|
||||
spawnAtom();
|
||||
lastSpawn = ts;
|
||||
spawnInterval = Math.max(SPAWN_INTERVAL_MIN, spawnInterval - SPAWN_DIFFICULTY_STEP);
|
||||
@@ -221,6 +229,9 @@ function gameLoop(ts) {
|
||||
}
|
||||
|
||||
// ─── Boot ────────────────────────────────────────────────────────────────────
|
||||
// Fill dynamic value in intro text
|
||||
document.getElementById('intro').innerHTML =
|
||||
document.getElementById('intro').innerHTML.replace('${MAX_DOCKS}', MAX_DOCKS);
|
||||
updateHudBest(topScore());
|
||||
initAnchors();
|
||||
updateCystinstein();
|
||||
|
||||
@@ -15,7 +15,7 @@
|
||||
font-family: 'Courier New', monospace;
|
||||
overflow: hidden;
|
||||
}
|
||||
canvas { display: block; cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><circle cx='16' cy='16' r='12' fill='none' stroke='%2300ff88' stroke-width='1' opacity='0.45'/><circle cx='16' cy='16' r='6' fill='none' stroke='%2300ff88' stroke-width='1.5'/><line x1='16' y1='2' x2='16' y2='9' stroke='%2300ff88' stroke-width='1.5'/><line x1='16' y1='23' x2='16' y2='30' stroke='%2300ff88' stroke-width='1.5'/><line x1='2' y1='16' x2='9' y2='16' stroke='%2300ff88' stroke-width='1.5'/><line x1='23' y1='16' x2='30' y2='16' stroke='%2300ff88' stroke-width='1.5'/><circle cx='16' cy='16' r='1.5' fill='%2300ff88'/></svg>") 16 16, crosshair; }
|
||||
canvas { display: block; cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32'><g transform='translate(16,16) rotate(-45)'><path d='M 0 -5 L -6 -5 A 5 5 0 0 0 -6 5 L 0 5 Z' fill='%23ff4444'/><path d='M 0 -5 L 6 -5 A 5 5 0 0 1 6 5 L 0 5 Z' fill='%23f5f5f5'/><path d='M -6 -5 L 6 -5 A 5 5 0 0 1 6 5 L -6 5 A 5 5 0 0 0 -6 -5 Z' fill='none' stroke='%23222222' stroke-width='1.2'/><line x1='0' y1='-5' x2='0' y2='5' stroke='%23555555' stroke-width='0.8'/></g></svg>") 16 16, auto; }
|
||||
|
||||
#score {
|
||||
position: absolute;
|
||||
@@ -60,6 +60,83 @@
|
||||
margin-top: 6px;
|
||||
}
|
||||
|
||||
/* ── Intro screen ── */
|
||||
#intro {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0; left: 0;
|
||||
width: 100%; height: 100%;
|
||||
background: rgba(0, 0, 0, 0.92);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
flex-direction: column;
|
||||
color: white;
|
||||
text-align: center;
|
||||
padding: 40px 20px;
|
||||
z-index: 10;
|
||||
}
|
||||
#intro.hidden { display: none; }
|
||||
|
||||
#intro h1 {
|
||||
font-size: 64px;
|
||||
letter-spacing: 8px;
|
||||
color: #00ff88;
|
||||
text-shadow: 0 0 30px #00ff88, 0 0 60px #00ff8855;
|
||||
margin-bottom: 6px;
|
||||
animation: flicker 2s infinite alternate;
|
||||
}
|
||||
#intro .subtitle {
|
||||
font-size: 15px;
|
||||
letter-spacing: 4px;
|
||||
color: #00ccff;
|
||||
text-shadow: 0 0 10px #00ccff;
|
||||
margin-bottom: 40px;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
#intro .instructions {
|
||||
max-width: 480px;
|
||||
margin-bottom: 40px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 14px;
|
||||
}
|
||||
#intro .instruction-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
background: rgba(255,255,255,0.04);
|
||||
border: 1px solid rgba(255,255,255,0.08);
|
||||
border-radius: 8px;
|
||||
padding: 12px 18px;
|
||||
text-align: left;
|
||||
}
|
||||
#intro .instruction-icon {
|
||||
font-size: 26px;
|
||||
flex-shrink: 0;
|
||||
width: 36px;
|
||||
text-align: center;
|
||||
}
|
||||
#intro .instruction-text {
|
||||
font-size: 13px;
|
||||
color: #aaa;
|
||||
line-height: 1.5;
|
||||
}
|
||||
#intro .instruction-text strong { color: #fff; }
|
||||
#start-btn {
|
||||
padding: 16px 52px;
|
||||
font-size: 20px;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-weight: bold;
|
||||
background: #00ff88;
|
||||
color: #000;
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
cursor: pointer;
|
||||
letter-spacing: 2px;
|
||||
transition: background 0.2s, transform 0.1s;
|
||||
}
|
||||
#start-btn:hover { background: #00cc66; transform: scale(1.04); }
|
||||
|
||||
/* ── Game-over overlay ── */
|
||||
#overlay {
|
||||
display: none;
|
||||
@@ -197,12 +274,41 @@
|
||||
<div id="cystinstein-area">
|
||||
<div id="cystinstein-label">CYSTINSTEIN</div>
|
||||
<canvas id="cystinstein-canvas" width="130" height="130"></canvas>
|
||||
<div id="docks-count">0 / 8 docks</div>
|
||||
<div id="docks-count">0 / 6 docks</div>
|
||||
</div>
|
||||
|
||||
<div id="score">Score: 0</div>
|
||||
<div id="highscore">Best: —</div>
|
||||
|
||||
<div id="intro">
|
||||
<h1>SYS DIGGER</h1>
|
||||
<div class="subtitle">Protect the atom</div>
|
||||
|
||||
<div class="instructions">
|
||||
<div class="instruction-row">
|
||||
<div class="instruction-icon">⚛</div>
|
||||
<div class="instruction-text">
|
||||
A molecule sits at the center of the screen with <strong>anchor points</strong> around it.
|
||||
</div>
|
||||
</div>
|
||||
<div class="instruction-row">
|
||||
<div class="instruction-icon">💊</div>
|
||||
<div class="instruction-text">
|
||||
<strong>Click the glowing red anchor</strong> when an atom approaches to block the connection.
|
||||
</div>
|
||||
</div>
|
||||
<div class="instruction-row">
|
||||
<div class="instruction-icon">🧫</div>
|
||||
<div class="instruction-text">
|
||||
Each missed dock grows the <strong>Cystinstein</strong> in the top-left.
|
||||
Allow <strong>${MAX_DOCKS} docks</strong> and it's fully formed — game over.
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button id="start-btn" onclick="startGame()">START</button>
|
||||
</div>
|
||||
|
||||
<div id="overlay">
|
||||
<h1>CYSTINSTEIN FORMED!</h1>
|
||||
<p id="final-score"></p>
|
||||
|
||||
Reference in New Issue
Block a user