Love the beagle- gaming – gamers- welcome!

copy this code and play it:

<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<title>Starship: Multiverse Command</title>
<style>
body { margin: 0; background: #000005; overflow: hidden; font-family: ‘Courier New’, monospace; color: white; user-select: none; }
canvas { display: block; position: absolute; top: 0; left: 0; }

#ui-layer { position: absolute; width: 100vw; height: 100vh; z-index: 10; pointer-events: none; }
.panel { pointer-events: auto; background: rgba(5, 10, 20, 0.95); border: 2px solid #00ff66; position: absolute; padding: 20px; border-radius: 8px; box-shadow: 0 0 15px rgba(0, 255, 102, 0.2); }

#selector { top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; width: 750px; z-index: 20; }
.ship-btn { background: #111; color: #00ff66; border: 1px solid #00ff66; padding: 15px; width: 30%; margin: 1%; cursor: pointer; font-family: inherit; font-weight: bold; transition: 0.2s; }
.ship-btn:hover { background: #00ff66; color: #000; box-shadow: 0 0 10px #00ff66; }

#hud-panel { top: 10px; right: 10px; width: 280px; text-align: right; display: none; }
.stat-row { font-size: 12px; margin-bottom: 4px; }
#control-status { font-weight: bold; font-size: 14px; margin-bottom: 10px; text-shadow: 0 0 5px currentColor; }

#upgrade-modal {
display: none; position: absolute; top: 0; left: 0; width: 100vw; height: 100vh;
background: rgba(0,0,0,0.85); z-index: 50; pointer-events: auto;
align-items: center; justify-content: center; flex-direction: column;
}
#cards-container { display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

.upgrade-card {
background: #0a0f14; border: 2px solid #f1c40f; width: 220px; height: 320px;
padding: 15px; border-radius: 10px; cursor: pointer; text-align: center;
transition: transform 0.2s, box-shadow 0.2s;
display: flex; flex-direction: column; justify-content: space-between;
}
.upgrade-card:hover { transform: scale(1.05); box-shadow: 0 0 25px rgba(241, 196, 15, 0.4); background: #151a20; }
.card-title { font-size: 16px; color: #f1c40f; font-weight: bold; border-bottom: 1px solid #555; padding-bottom: 10px; margin-bottom: 10px; }
.card-desc { font-size: 13px; color: #ccc; line-height: 1.4; flex-grow: 1; display: flex; align-items: center; justify-content: center; }
.card-stat { font-size: 11px; color: #00ff66; border-top: 1px solid #555; padding-top: 10px; margin-top: 10px; }
</style>
</head>
<body>

<div id=”ui-layer”>
<div id=”selector” class=”panel”>
<h1 style=”color:#f1c40f; letter-spacing: 4px; margin-bottom: 5px;”>MULTIVERSE COMMAND</h1>
<p style=”font-size: 12px; color: #aaa; margin-bottom: 20px;”>
<strong style=”color:white”>Arrow Keys</strong> to move. <strong style=”color:white”>Mouse Click</strong> to fire/use abilities.<br>
<strong style=”color:#00d2ff”>Hold SHIFT</strong> to charge Hyperspace (Invulnerable Ramming Speed).
</p>
<div style=”display:flex; justify-content: center; flex-wrap: wrap;”>
<button class=”ship-btn” onclick=”startWith(‘rift’)”>RIFT<br><span style=”font-size:10px”>Creates gravity shadows</span></button>
<button class=”ship-btn” onclick=”startWith(‘bomber’)”>BOMBER<br><span style=”font-size:10px”>Fires shrapnel bombs</span></button>
<button class=”ship-btn” onclick=”startWith(‘mothership’)”>MOTHERSHIP<br><span style=”font-size:10px”>Click to summon ships</span></button>
<button class=”ship-btn” style=”border-color:#bb00ff; color:#bb00ff;” onclick=”startWith(‘portal’)”>PORTAL<br><span style=”font-size:10px”>Link 2 drains, TP between them</span></button>
<button class=”ship-btn” style=”border-color:#ff3300; color:#ff3300;” onclick=”startWith(‘juggernaut’)”>JUGGERNAUT<br><span style=”font-size:10px”>Massive HP & Passive Burn</span></button>
</div>
</div>

<div id=”hud-panel” class=”panel”>
<div id=”control-status” style=”color: #00ff66;”>TACTICAL HUD</div>
<div class=”stat-row” style=”color:#f1c40f;”>KILLS: <span id=”kill-count”>0</span></div>
<div class=”stat-row” style=”color:#aaa;”>UPGRADE IN: <span id=”next-upgrade”>10</span></div>
<div style=”width:100%; height:10px; background:#111; border: 1px solid #00ff66; margin-top:5px;”>
<div id=”pc-hp” style=”height:100%; background:#00ff66; width:100%;”></div>
</div>
</div>
</div>

<div id=”upgrade-modal”>
<h2 style=”color: white; margin-bottom: 30px; letter-spacing: 2px;”>SYSTEM UPGRADE</h2>
<div id=”cards-container”></div>
</div>

let isFiring = false, justClicked = false, isHyperspace = false;
let mouseX = 0, mouseY = 0;

// Original 12 Upgrades Restored
const possibleUpgrades = [
{ name: “Hyper Thrusters”, desc: “Increases movement speed by 15%.”, stat: “Speed +15%”, apply: () => stats.speed *= 1.15 },
{ name: “Nano Repair”, desc: “Regenerate 0.5 HP every second.”, stat: “Regen +0.5/s”, apply: () => stats.regen += 0.02 },
{ name: “Plasma Overclock”, desc: “Fire rate increases by 10%.”, stat: “Fire Rate +10%”, apply: () => stats.fireRate = Math.max(2, stats.fireRate * 0.9) },
{ name: “Polonium Rounds”, desc: “Bullet damage increases by 20%.”, stat: “Damage +20%”, apply: () => stats.damage *= 1.2 },
{ name: “Reinforced Hull”, desc: “Max HP increases by 50. Heals fully.”, stat: “Max HP +50”, apply: () => { stats.maxHP += 50; stats.hp = stats.maxHP; } },
{ name: “Side Cannons”, desc: “Add +1 projectile to your volley.”, stat: “Multishot +1”, apply: () => stats.multishot += 1 },
{ name: “Specter Drone”, desc: “Summons a permanent drone ally.”, stat: “Drone +1”, apply: () => spawnHelper() },
{ name: “Vampiric Core”, desc: “Heal 2 HP for every kill.”, stat: “Lifesteal +2”, apply: () => stats.lifesteal += 2 },
{ name: “Ricochet Tech”, desc: “Bullets bounce to 1 additional enemy.”, stat: “Bounce +1”, apply: () => stats.ricochet += 1 },
{ name: “Tesla Coil”, desc: “Nearby enemies are shocked periodically.”, stat: “Passive AOE”, apply: () => stats.tesla = true },
{ name: “Cluster Bombs”, desc: “Bullets explode into shrapnel on impact.”, stat: “Impact FX”, apply: () => stats.cluster = true },
{ name: “Targeting CPU”, desc: “Critical hits deal 2x damage.”, stat: “Crit +10%”, apply: () => stats.critChance += 0.1 }
];

function startWith(t) {
player.type = t;
stats = {
maxHP: 100, hp: 100, damage: 1, fireRate: 20, multishot: 0, speed: 1, regen: 0,
ricochet: 0, lifesteal: 0, critChance: 0, tesla: false, cluster: false
};

if(t === ‘mothership’) { stats.maxHP = stats.hp = 300; stats.fireRate = 45; }
if(t === ‘bomber’) { stats.maxHP = stats.hp = 200; stats.damage = 1.5; stats.fireRate = 30; }
if(t === ‘juggernaut’) { stats.maxHP = stats.hp = 800; stats.speed = 0.6; stats.damage = 3; stats.fireRate = 50; }
if(t === ‘portal’) { stats.maxHP = stats.hp = 150; stats.speed = 1.2; stats.fireRate = 35; }

player.x = 500; player.y = 500; player.vx = 0; player.vy = 0; player.hyperCharge = 0;
enemies = []; helpers = []; bullets = []; enemyBullets = []; gravityShadows = []; explosions = []; particles = []; portals = [];
enemiesKilled = 0; nextUpgradeThreshold = 10; gameTick = 0;

document.getElementById(‘selector’).style.display = ‘none’;
document.getElementById(‘hud-panel’).style.display = ‘block’;
resize(); gamePaused = false;
}

function triggerUpgrade() {
gamePaused = true; isFiring = false; keys = {};
const container = document.getElementById(‘cards-container’);
container.innerHTML = ”;

let choices = [];
while(choices.length < 3) {
let r = possibleUpgrades[Math.floor(Math.random() * possibleUpgrades.length)];
if(!choices.includes(r)) choices.push(r);
}

choices.forEach(u => {
const card = document.createElement(‘div’);
card.className = ‘upgrade-card’;
card.innerHTML = `<div class=”card-title”>${u.name}</div><div class=”card-desc”>${u.desc}</div><div class=”card-stat”>${u.stat}</div>`;
card.onclick = () => {
u.apply();
document.getElementById(‘upgrade-modal’).style.display = ‘none’;
gamePaused = false; nextUpgradeThreshold += 10;
};
container.appendChild(card);
});

document.getElementById(‘upgrade-modal’).style.display = ‘flex’;
}

function spawnHelper() {
helpers.push({x: player.x, y: player.y, vx: 0, vy: 0, type: player.type === ‘mothership’ ? ‘rift’ : player.type});
}

function fireBullet(x, y, angle, type, isHelper = false) {
let dmg = 50 * stats.damage;
let isCrit = Math.random() < stats.critChance;
if(isCrit) dmg *= 2;
bullets.push({x: x, y: y, vx: Math.cos(angle)*15, vy: Math.sin(angle)*15, type: type, damage: dmg, life: 100, bounces: stats.ricochet, isCrit: isCrit, cluster: stats.cluster });
}

function update() {
if(gamePaused) return;
gameTick++;
if(portalCooldown > 0) portalCooldown–;

stats.hp = Math.min(stats.maxHP, stats.hp + stats.regen);

// Hyperspace Mechanic
if (keys[‘shift’]) {
player.hyperCharge = Math.min(1, player.hyperCharge + 0.04);
isHyperspace = player.hyperCharge >= 1;
} else {
player.hyperCharge = Math.max(0, player.hyperCharge – 0.05);
isHyperspace = false;
}

// Movement (Arrow Keys Only)
let acc = 0.6 * stats.speed;
if(isHyperspace) acc = 2.5;

if(keys[‘arrowup’]) player.vy -= acc;
if(keys[‘arrowdown’]) player.vy += acc;
if(keys[‘arrowleft’]) player.vx -= acc;
if(keys[‘arrowright’]) player.vx += acc;

player.vx *= (isHyperspace ? 0.98 : 0.95);
player.vy *= (isHyperspace ? 0.98 : 0.95);
player.x += player.vx; player.y += player.vy;

// Old Physics: Y Wrap to screen, X infinite scroll
if(player.y < 0) player.y = canvasH;
if(player.y > canvasH) player.y = 0;
cameraX = player.x – canvasW/2;

player.angle = Math.atan2(mouseY – player.y, mouseX – canvasW/2);

// Player Trails
if(gameTick % 2 === 0) {
let speed = Math.hypot(player.vx, player.vy);
player.trail.push({x: player.x, y: player.y, r: 2 + speed/2, life: isHyperspace ? 40 : 20});
}
player.trail.forEach(t => t.life–);
player.trail = player.trail.filter(t => t.life > 0);

// Juggernaut Passive
if (player.type === ‘juggernaut’ && gameTick % 30 === 0) {
enemies.forEach(e => {
if(Math.hypot(e.x – player.x, e.y – player.y) < 250) {
e.hp -= 15 * stats.damage;
particles.push({x: e.x, y: e.y, life: 10, color: ‘#ff3300’});
}
});
}

// Actions
if (isFiring && !isHyperspace) {
if (player.type === ‘mothership’) {
if (justClicked && gameTick % 10 === 0) {
let sumType = Math.random() < 0.5 ? ‘rift’ : ‘bomber’;
helpers.push({x: player.x, y: player.y, vx: 0, vy: 0, type: sumType, life: 600});
justClicked = false;
}
} else if (player.type === ‘portal’) {
if (justClicked) {
bullets.push({x: player.x, y: player.y, vx: Math.cos(player.angle)*15, vy: Math.sin(player.angle)*15, type: ‘portal_seed’, life: 40});
justClicked = false;
}
} else if (gameTick % Math.floor(stats.fireRate) === 0) {
let wType = player.type === ‘bomber’ ? ‘shrap_bomb’ : ‘rift’;
if(player.type === ‘juggernaut’) wType = ‘heavy’;
fireBullet(player.x, player.y, player.angle, wType);
for(let i=0; i<stats.multishot; i++) {
let offset = (i+1) * 0.15;
fireBullet(player.x, player.y, player.angle + offset, wType);
fireBullet(player.x, player.y, player.angle – offset, wType);
}
}
}
justClicked = false;

// Portals Logic
portals.forEach(p => {
enemies.forEach(e => {
if(Math.hypot(e.x – p.x, e.y – p.y) < 200) {
e.hp -= 2.5 * stats.damage;
stats.hp = Math.min(stats.maxHP, stats.hp + 0.1);
e.x += (p.x – e.x) * 0.02; e.y += (p.y – e.y) * 0.02; // Pull in
}
});
if(Math.hypot(player.x – p.x, player.y – p.y) < 40 && portalCooldown <= 0 && portals.length === 2) {
let dest = portals.find(o => o !== p);
if(dest) {
player.x = dest.x; player.y = dest.y;
portalCooldown = 60;
}
}
});

// Tesla Coil
if(stats.tesla && gameTick % 60 === 0) {
enemies.forEach(e => {
if(Math.hypot(e.x – player.x, e.y – player.y) < 200) { e.hp -= 20 * stats.damage; particles.push({x: e.x, y: e.y, life: 10, color: ‘#00d2ff’}); }
});
}

// Helpers Update
helpers.forEach(h => {
if(h.life) h.life–;
let nearest = null, minDist = Infinity;
enemies.forEach(e => {
let d = Math.hypot(e.x – h.x, e.y – h.y);
if(d < minDist) { minDist = d; nearest = e; }
});

if(nearest && minDist < 400) {
let ang = Math.atan2(nearest.y – h.y, nearest.x – h.x);
h.vx += Math.cos(ang) * 0.5; h.vy += Math.sin(ang) * 0.5;
if(gameTick % 45 === 0) fireBullet(h.x, h.y, ang, h.type === ‘bomber’ ? ‘shrap_bomb’ : ‘rift’, true);
} else {
let ang = Math.atan2(player.y – h.y, player.x – h.x);
h.vx += Math.cos(ang) * 0.5; h.vy += Math.sin(ang) * 0.5;
}
h.x += h.vx; h.y += h.vy; h.vx *= 0.95; h.vy *= 0.95;
h.angle = Math.atan2(h.vy, h.vx);
});
helpers = helpers.filter(h => h.life === undefined || h.life > 0);

gravityShadows.forEach(gs => {
gs.life–; enemies.forEach(e => { if(Math.hypot(e.x – gs.x, e.y – gs.y) < gs.r) e.hp -= 1.5; });
});
gravityShadows = gravityShadows.filter(gs => gs.life > 0);

explosions.forEach(exp => {
exp.r += 10; exp.alpha -= 0.05;
enemies.forEach(e => { if(Math.hypot(e.x-exp.x, e.y-exp.y) < exp.r && exp.alpha > 0.8) e.hp -= 10 * stats.damage; });
});
explosions = explosions.filter(exp => exp.alpha > 0);

bullets.forEach(b => {
b.x += b.vx; b.y += b.vy;
if(b.type === ‘portal_seed’ && b.life === 1) {
if(portals.length >= 2) portals.shift();
portals.push({x: b.x, y: b.y});
}

let hit = false;
enemies.forEach(e => {
if(!hit && b.type !== ‘portal_seed’ && Math.hypot(b.x – e.x, b.y – e.y) < (b.type===’heavy’? 50: 30)) {
hit = true;
if(b.isCrit) particles.push({x: b.x, y: b.y, life: 15, color: ‘#fff’});

if(b.type === ‘shrap_bomb’) {
createExplosion(b.x, b.y, 120, b.damage); b.life = 0;
} else {
e.hp -= b.damage;
if(b.cluster) createExplosion(b.x, b.y, 80, b.damage);
if(b.type === ‘rift’ && Math.random() < 0.2) gravityShadows.push({x: b.x, y: b.y, r: 100, life: 120});
if(b.type === ‘heavy’) hit = false; // Pierces

if(b.bounces > 0) {
let nextT = enemies.find(n => n !== e && Math.hypot(n.x – b.x, n.y – b.y) < 300);
if(nextT) {
let ra = Math.atan2(nextT.y – b.y, nextT.x – b.x);
b.vx = Math.cos(ra) * 15; b.vy = Math.sin(ra) * 15;
b.bounces–; hit = false;
} else b.life = 0;
} else if (b.type !== ‘heavy’) b.life = 0;
}
}
});
if(b.type === ‘shrap_bomb’ && b.life === 1 && !hit) createExplosion(b.x, b.y, 120, b.damage);
});

// Enemies
if(gameTick % 40 === 0 && enemies.length < (8 + enemiesKilled/4)) {
enemies.push({ x: player.x + (Math.random() > 0.5 ? 800 : -800), y: Math.random()*canvasH,
hp: 100 + (enemiesKilled*10), angle: Math.random()*Math.PI*2, alerted: false, lastShot: 0 });
}

enemies.forEach(e => {
let targetAngle = Math.atan2(player.y – e.y, player.x – e.x);
let diff = Math.atan2(Math.sin(targetAngle – e.angle), Math.cos(targetAngle – e.angle));
let distToPlayer = Math.hypot(player.x – e.x, player.y – e.y);

if (Math.abs(diff) < 0.6 && distToPlayer < 600) e.alerted = true;
else if (distToPlayer > 800) e.alerted = false;

if(e.alerted) {
if (Math.abs(diff) > 0.05) e.angle += Math.sign(diff) * 0.04;
e.x += Math.cos(e.angle) * 2.5; e.y += Math.sin(e.angle) * 2.5;
if (gameTick – e.lastShot > 80 && Math.abs(diff) < 0.2 && distToPlayer < 500) {
enemyBullets.push({x: e.x, y: e.y, vx: Math.cos(e.angle)*8, vy: Math.sin(e.angle)*8, life: 200});
e.lastShot = gameTick;
}
} else {
if(Math.random() < 0.01) e.angle += (Math.random() – 0.5) * 2;
e.x += Math.cos(e.angle) * 1.2; e.y += Math.sin(e.angle) * 1.2;
}

if(e.y < 0) e.y = canvasH; if(e.y > canvasH) e.y = 0;

// Collision logic
let hitRadius = isHyperspace ? 80 : (player.type === ‘juggernaut’ ? 60 : 40);
if(distToPlayer < hitRadius) {
if (isHyperspace) {
e.hp -= 500; // Ram damage
} else {
stats.hp -= 2; e.hp = 0;
}
}

if(e.hp <= 0) {
enemiesKilled++; stats.hp = Math.min(stats.maxHP, stats.hp + stats.lifesteal);
if(enemiesKilled >= nextUpgradeThreshold) triggerUpgrade();
}
});

enemyBullets.forEach(eb => {
eb.x += eb.vx; eb.y += eb.vy; eb.life–;
if(Math.hypot(eb.x – player.x, eb.y – player.y) < (player.type === ‘juggernaut’ ? 45 : 25)) {
if(!isHyperspace) stats.hp -= 15;
eb.life = 0;
}
});

enemies = enemies.filter(e => e.hp > 0);
bullets = bullets.filter(b => b.life– > 0);
enemyBullets = enemyBullets.filter(eb => eb.life > 0);
particles = particles.filter(p => p.life– > 0);

document.getElementById(‘pc-hp’).style.width = Math.max(0, (stats.hp/stats.maxHP)*100) + “%”;
document.getElementById(‘kill-count’).innerText = enemiesKilled;
document.getElementById(‘next-upgrade’).innerText = (nextUpgradeThreshold – enemiesKilled);

// Death Logic Revert
if(stats.hp <= 0) {
document.getElementById(‘selector’).style.display = ‘block’;
document.getElementById(‘hud-panel’).style.display = ‘none’;
gamePaused = true;
}
}

function drawShip(x, y, ang, type, col) {
ctx.save(); ctx.translate(x – cameraX, y); ctx.rotate(ang);
ctx.fillStyle = col;
let s = 18;
if(type === ‘mothership’) s = 35;
if(type === ‘juggernaut’) s = 50;

ctx.beginPath();
if(type === ‘juggernaut’) {
ctx.moveTo(s, 0); ctx.lineTo(-s/2, s); ctx.lineTo(-s, s/2); ctx.lineTo(-s, -s/2); ctx.lineTo(-s/2, -s);
} else {
ctx.moveTo(s, 0); ctx.lineTo(-s, s/1.5); ctx.lineTo(-s/2, 0); ctx.lineTo(-s, -s/1.5);
}
ctx.closePath(); ctx.fill();
ctx.restore();
}

function draw() {
ctx.fillStyle = “#000005”; ctx.fillRect(0,0,canvasW,canvasH);
if(gamePaused && stats.hp <= 0) return; // Don’t draw world on menu

ctx.strokeStyle = `rgba(0, 255, 204, 0.05)`; ctx.beginPath();
let ox = -cameraX % 100;
for(let x=ox; x<canvasW; x+=100) { ctx.moveTo(x, 0); ctx.lineTo(x, canvasH); }
for(let y=0; y<canvasH; y+=100) { ctx.moveTo(0, y); ctx.lineTo(canvasW, y); }
ctx.stroke();

player.trail.forEach(t => {
ctx.fillStyle = isHyperspace ? `rgba(255, 255, 255, ${t.life/40})` : `rgba(0, 255, 102, ${t.life/20})`;
ctx.beginPath(); ctx.arc(t.x – cameraX, t.y, t.r, 0, Math.PI*2); ctx.fill();
});

portals.forEach(p => {
ctx.fillStyle = `rgba(187, 0, 255, ${Math.abs(Math.sin(gameTick/20)) * 0.5 + 0.2})`;
ctx.beginPath(); ctx.arc(p.x – cameraX, p.y, 60, 0, Math.PI*2); ctx.fill();
ctx.strokeStyle = “#bb00ff”; ctx.lineWidth = 4; ctx.stroke();
});

gravityShadows.forEach(gs => {
ctx.fillStyle = `rgba(187, 0, 255, ${gs.life/600})`;
ctx.beginPath(); ctx.arc(gs.x – cameraX, gs.y, gs.r, 0, Math.PI*2); ctx.fill();
});

if(stats.tesla) {
ctx.strokeStyle = `rgba(0, 210, 255, ${Math.abs(Math.sin(gameTick/10)) * 0.3})`;
ctx.lineWidth = 2; ctx.beginPath(); ctx.arc(player.x – cameraX, player.y, 200, 0, Math.PI*2); ctx.stroke();
}

if(player.hyperCharge > 0) {
ctx.strokeStyle = isHyperspace ? “#fff” : “rgba(0,255,102,0.5)”; ctx.lineWidth = isHyperspace ? 8 : 4;
ctx.beginPath(); ctx.arc(player.x-cameraX, player.y, 70 * (1.1-player.hyperCharge), 0, Math.PI*2); ctx.stroke();
}

drawShip(player.x, player.y, player.angle, player.type, isHyperspace ? “#ffffff” : “#00ff66”);
helpers.forEach(h => drawShip(h.x, h.y, h.angle, h.type, “rgba(0, 210, 255, 0.8)”));

enemies.forEach(e => {
ctx.fillStyle = e.alerted ? “rgba(255, 0, 0, 0.15)” : “rgba(255, 255, 255, 0.03)”;
ctx.beginPath(); ctx.moveTo(e.x – cameraX, e.y);
ctx.arc(e.x – cameraX, e.y, 600, e.angle – 0.6, e.angle + 0.6);
ctx.lineTo(e.x – cameraX, e.y); ctx.fill();
drawShip(e.x, e.y, e.angle, ‘rift’, “#ff3300”);
});

explosions.forEach(exp => {
ctx.strokeStyle = `rgba(255, 150, 0, ${exp.alpha})`; ctx.lineWidth = 3;
ctx.beginPath(); ctx.arc(exp.x – cameraX, exp.y, exp.r, 0, Math.PI*2); ctx.stroke();
});

bullets.forEach(b => {
if(b.type === ‘portal_seed’) ctx.fillStyle = “#bb00ff”;
else if(b.type === ‘heavy’) ctx.fillStyle = “#ff3300”;
else ctx.fillStyle = b.type===’shrap_bomb’ ? “#ff00ff” : (b.type===’shrapnel’ ? “#f1c40f” : “#00ff66”);
ctx.beginPath(); ctx.arc(b.x-cameraX, b.y, b.type===’shrap_bomb’||b.type===’heavy’ ? 8 : 4, 0, Math.PI*2); ctx.fill();
});

enemyBullets.forEach(eb => { ctx.fillStyle = “red”; ctx.fillRect(eb.x-cameraX-4, eb.y-4, 8, 8); });

particles.forEach(p => {
ctx.fillStyle = p.color; ctx.globalAlpha = p.life/15;
ctx.beginPath(); ctx.arc(p.x-cameraX, p.y, 10, 0, Math.PI*2); ctx.fill(); ctx.globalAlpha = 1;
});
}

function resize() { canvasW = canvas.width = window.innerWidth; canvasH = canvas.height = window.innerHeight; }
window.onresize = resize; resize();

function loop() {
requestAnimationFrame(loop);
update(); draw();
}
loop(); // Start loop immediately, it pauses based on gamePaused
</script>
</body>
</html>

paste here and play: