const DESIGN_WIDTH = 800; const DESIGN_HEIGHT = 600; if (typeof window.__P5_CLEANUP__ === "function") { window.__P5_CLEANUP__(); } const sketch = (p) => { let angle = 0; let scaleFactor = 1; let offsetX = 0; let offsetY = 0; let resizeObserver = null; let resizeHandler = null; let teardown = null; let player = { x: DESIGN_WIDTH / 2, y: DESIGN_HEIGHT / 2, size: 30 }; let bullets = []; let enemies = []; let coins = []; let coinCount = 0; let savedCoins = 0; let savedGun = 0; let highScore = 0; let keys = {}; let gameOver = false; let gameStarted = false; let inShop = false; let score = 0; let boss = null; const guns = [ { name: "Pistol", bulletSize: 6, bulletSpeed: 10, cost: 0 }, { name: "Shotgun", bulletSize: 10, bulletSpeed: 7, cost: 50 }, { name: "Rifle", bulletSize: 8, bulletSpeed: 12, cost: 100 }, { name: "Railgun", bulletSize: 12, bulletSpeed: 15, cost: 150 } ]; let currentGun = 0; let shotgunCooldown = 0; let bossHealth = 0; let maxBossHealth = 100; let currentWave = 1; let enemiesKilled = 0; let enemiesPerWave = 10; let railgunChargeTime = 0; let railgunCharging = false; let railgunFiring = false; let rifleCooldown = 0; let explosions = []; let aoeCircles = []; let coinChests = []; const getContainer = () => document.getElementById("renderDiv"); const computeLayout = () => { const container = getContainer(); const width = Math.max(1, container ? container.clientWidth : window.innerWidth); const height = Math.max(1, container ? container.clientHeight : window.innerHeight); const fitScale = Math.max( 0.1, Math.min(width / DESIGN_WIDTH, height / DESIGN_HEIGHT) || 1 ); scaleFactor = fitScale; offsetX = (width - DESIGN_WIDTH * scaleFactor) / 2; offsetY = (height - DESIGN_HEIGHT * scaleFactor) / 2; return { width, height }; }; const resizeCanvasToContainer = () => { const { width, height } = computeLayout(); p.resizeCanvas(width, height); }; const toDesignSpace = (clientX, clientY) => ({ x: (clientX - offsetX) / scaleFactor, y: (clientY - offsetY) / scaleFactor, }); p.setup = () => { const { width, height } = computeLayout(); const renderer = p.createCanvas(width, height); renderer.parent("renderDiv"); p.pixelDensity(Math.min(2, window.devicePixelRatio || 1)); p.noStroke(); p.keyPressed = (e) => { if (e.key.toLowerCase() === 'shift' || e.keyCode === 16) { e.preventDefault(); return; } keys[e.key.toLowerCase()] = true; if (e.key.toLowerCase() === 'e' && gameStarted && !gameOver) { inShop = !inShop; } }; p.keyReleased = (e) => { if (e.key.toLowerCase() !== 'shift' && e.keyCode !== 16) { keys[e.key.toLowerCase()] = false; } }; const container = getContainer(); if (typeof ResizeObserver !== "undefined" && container) { resizeObserver = new ResizeObserver(() => { resizeCanvasToContainer(); }); resizeObserver.observe(container); } else { resizeHandler = () => resizeCanvasToContainer(); window.addEventListener("resize", resizeHandler); } teardown = () => { if (resizeObserver) { resizeObserver.disconnect(); resizeObserver = null; } if (resizeHandler) { window.removeEventListener("resize", resizeHandler); resizeHandler = null; } }; }; p.windowResized = () => { resizeCanvasToContainer(); }; p.draw = () => { p.background(15, 23, 42); if (p.keyIsDown(82)) { // R key savedCoins = coinCount; highScore = Math.max(highScore, score); gameOver = false; gameStarted = false; inShop = false; boss = null; player = { x: DESIGN_WIDTH / 2, y: DESIGN_HEIGHT / 2, size: 30 }; bullets = []; enemies = []; coins = []; coinChests = []; coinCount = savedCoins; score = 0; currentWave = 1; enemiesKilled = 0; enemiesPerWave = 10; currentGun = savedGun; railgunCharging = false; railgunChargeTime = 0; railgunFiring = false; explosions = []; aoeCircles = []; coinChests = []; } // Play button screen if (!gameStarted && !gameOver) { p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); p.fill(0, 0, 0, 80); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT, 20); // Title p.fill(239, 68, 68); p.textAlign(p.CENTER, p.CENTER); p.textSize(48); p.text("The Arena", DESIGN_WIDTH / 2, 100); // PLAY button with glow effect p.textSize(100); p.fill(255, 255, 255); p.text("PLAY", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 20); // Glow outline p.stroke(34, 197, 94); p.strokeWeight(4); p.text("PLAY", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 20); p.noStroke(); // Coin counter display p.fill(255, 215, 0); p.textSize(36); p.textAlign(p.CENTER, p.CENTER); p.text(`Coins: ${savedCoins}`, DESIGN_WIDTH / 2, 50); const pointer = toDesignSpace(p.mouseX, p.mouseY); // Play button click const playButtonX = DESIGN_WIDTH / 2; const playButtonY = DESIGN_HEIGHT / 2 + 20; const playButtonSize = 200; if ( pointer.x >= playButtonX - playButtonSize/2 && pointer.x <= playButtonX + playButtonSize/2 && pointer.y >= playButtonY - playButtonSize/4 && pointer.y <= playButtonY + playButtonSize/4 && p.mouseIsPressed ) { gameStarted = true; coinCount = savedCoins; score = 0; } p.textAlign(p.LEFT, p.BASELINE); p.pop(); angle += 0.01; return; } // Player movement if (gameStarted && !gameOver) { const speed = 4; if (keys['a'] || keys['arrowleft']) player.x = Math.max(player.size/2, player.x - speed); if (keys['d'] || keys['arrowright']) player.x = Math.min(DESIGN_WIDTH - player.size/2, player.x + speed); if (keys['w'] || keys['arrowup']) player.y = Math.max(player.size/2, player.y - speed); if (keys['s'] || keys['arrowdown']) player.y = Math.min(DESIGN_HEIGHT - player.size/2, player.y + speed); // Shotgun cooldown if (shotgunCooldown > 0) shotgunCooldown--; // Rifle cooldown if (rifleCooldown > 0) rifleCooldown--; // Railgun charging if (railgunCharging && currentGun === 3) { railgunChargeTime--; if (railgunChargeTime <= 0) { // Fire railgun bullet const pointer = toDesignSpace(p.mouseX, p.mouseY); const dx = pointer.x - player.x; const dy = pointer.y - player.y; const dist = Math.sqrt(dx*dx + dy*dy) || 1; const gun = guns[currentGun]; bullets.push({ x: player.x, y: player.y, vx: (dx / dist) * gun.bulletSpeed, vy: (dy / dist) * gun.bulletSpeed, size: gun.bulletSize, isRailgunBullet: true }); railgunCharging = false; } } } // Shoot bullet if (gameStarted && !gameOver && keys[' '] && !inShop) { if (currentGun === 2 && rifleCooldown <= 0) { // Rifle spray fire const pointer = toDesignSpace(p.mouseX, p.mouseY); if (pointer.x >= 0 && pointer.x <= DESIGN_WIDTH && pointer.y >= 0 && pointer.y <= DESIGN_HEIGHT) { const dx = pointer.x - player.x; const dy = pointer.y - player.y; const dist = Math.sqrt(dx*dx + dy*dy); const gun = guns[currentGun]; bullets.push({ x: player.x, y: player.y, vx: (dx / dist) * gun.bulletSpeed, vy: (dy / dist) * gun.bulletSpeed, size: gun.bulletSize }); rifleCooldown = 8; } } else if (currentGun !== 2 && currentGun !== 3) { keys[' '] = false; // Prevent rapid fire (pistol/shotgun only) if (currentGun !== 1 || shotgunCooldown <= 0) { const pointer = toDesignSpace(p.mouseX, p.mouseY); if (pointer.x >= 0 && pointer.x <= DESIGN_WIDTH && pointer.y >= 0 && pointer.y <= DESIGN_HEIGHT) { const dx = pointer.x - player.x; const dy = pointer.y - player.y; const dist = Math.sqrt(dx*dx + dy*dy); const gun = guns[currentGun]; if (currentGun === 1) { // Shotgun - 5 bullets spread shotgunCooldown = 10; // 10 frame cooldown for (let i = -2; i <= 2; i++) { const angleOffset = (i * 2 * Math.PI / 180); // ±4 degrees spread const spreadDx = dx * Math.cos(angleOffset) - dy * Math.sin(angleOffset); const spreadDy = dx * Math.sin(angleOffset) + dy * Math.cos(angleOffset); const spreadDist = Math.sqrt(spreadDx*spreadDx + spreadDy*spreadDy) || dist; bullets.push({ x: player.x, y: player.y, vx: (spreadDx / spreadDist) * gun.bulletSpeed * 0.9, vy: (spreadDy / spreadDist) * gun.bulletSpeed * 0.9, size: gun.bulletSize, damage: 1 }); } } else { bullets.push({ x: player.x, y: player.y, vx: (dx / dist) * gun.bulletSpeed, vy: (dy / dist) * gun.bulletSpeed, size: gun.bulletSize }); } } } } else if (currentGun === 3 && !railgunCharging && !railgunFiring) { // Start railgun charging (only if not already charging/firing) railgunCharging = true; railgunChargeTime = 60; // 1 second at 60fps keys[' '] = false; } } // Update bullets if (gameStarted && !gameOver) { bullets = bullets.filter(b => { b.x += b.vx; b.y += b.vy; return b.x > -20 && b.x < DESIGN_WIDTH + 20 && b.y > -20 && b.y < DESIGN_HEIGHT + 20; }); } // Update explosions if (gameStarted && !gameOver) { for (let i = explosions.length - 1; i >= 0; i--) { const exp = explosions[i]; exp.size += 8; exp.alpha -= 8; exp.timer--; if (exp.timer <= 0 || exp.alpha <= 0) { explosions.splice(i, 1); } } // Explosion AOE damage for (let i = explosions.length - 1; i >= 0; i--) { const exp = explosions[i]; for (let j = enemies.length - 1; j >= 0; j--) { const e = enemies[j]; const dx = exp.x - e.x; const dy = exp.y - e.y; if (Math.sqrt(dx*dx + dy*dy) < exp.size / 2) { score += 10; enemiesKilled++; coins.push({ x: e.x, y: e.y, size: 12, bobOffset: Math.random() * Math.PI * 2 }); enemies.splice(j, 1); } } } } // Update railgun AOE circles if (gameStarted && !gameOver) { for (let i = aoeCircles.length - 1; i >= 0; i--) { const aoe = aoeCircles[i]; aoe.size += 6; aoe.alpha -= 6; aoe.timer--; if (aoe.timer <= 0 || aoe.alpha <= 0) { aoeCircles.splice(i, 1); continue; } // AOE kills enemies for (let j = enemies.length - 1; j >= 0; j--) { const e = enemies[j]; const dx = aoe.x - e.x; const dy = aoe.y - e.y; if (Math.sqrt(dx*dx + dy*dy) < aoe.size / 2) { score += 10; enemiesKilled++; coins.push({ x: e.x, y: e.y, size: 12, bobOffset: Math.random() * Math.PI * 2 }); enemies.splice(j, 1); } } } } // Check wave progression if (enemiesKilled >= enemiesPerWave && !boss) { currentWave++; enemiesKilled = 0; enemiesPerWave += 3; if (currentWave >= 5) { boss = { x: DESIGN_WIDTH + 100, y: DESIGN_HEIGHT / 2, size: 120, vx: 0, vy: 0, health: maxBossHealth, spawnX: DESIGN_WIDTH + 100, spawnY: DESIGN_HEIGHT / 2 }; bossHealth = maxBossHealth; } } // Spawn enemies if (gameStarted && !gameOver && !inShop && !boss && enemies.length < enemiesPerWave * 2 && Math.random() < 0.02) { const side = Math.floor(Math.random() * 4); let x, y; if (side === 0) { x = Math.random() * DESIGN_WIDTH; y = -30; } else if (side === 1) { x = DESIGN_WIDTH + 30; y = Math.random() * DESIGN_HEIGHT; } else if (side === 2) { x = Math.random() * DESIGN_WIDTH; y = DESIGN_HEIGHT + 30; } else { x = -30; y = Math.random() * DESIGN_HEIGHT; } enemies.push({ x, y, vx: 0, vy: 0, size: 25 }); } // Update enemies if (gameStarted && !gameOver && !inShop) { enemies.forEach(e => { const dx = player.x - e.x; const dy = player.y - e.y; const dist = Math.sqrt(dx*dx + dy*dy); if (dist > 0) { const chaseSpeed = 0.5; e.vx = (dx / dist) * chaseSpeed; e.vy = (dy / dist) * chaseSpeed; } e.x += e.vx; e.y += e.vy; // Bounce off walls if (e.x < 0 || e.x > DESIGN_WIDTH) e.vx *= -1; if (e.y < 0 || e.y > DESIGN_HEIGHT) e.vy *= -1; }); } // Update coins if (gameStarted && !gameOver && !inShop) { for (let i = coins.length - 1; i >= 0; i--) { const coin = coins[i]; const dx = player.x - coin.x; const dy = player.y - coin.y; if (Math.sqrt(dx*dx + dy*dy) < (player.size + coin.size)/2) { coinCount++; coins.splice(i, 1); } } // Update coin chests for (let i = coinChests.length - 1; i >= 0; i--) { const chest = coinChests[i]; const dx = player.x - chest.x; const dy = player.y - chest.y; if (Math.sqrt(dx*dx + dy*dy) < (player.size + chest.size)/2) { coinCount += 100; coinChests.splice(i, 1); } } } // Update boss if (boss && gameStarted && !gameOver && !inShop) { const dx = player.x - boss.x; const dy = player.y - boss.y; const dist = Math.sqrt(dx*dx + dy*dy); if (dist > 0) { const chaseSpeed = 0.6; boss.vx = (dx / dist) * chaseSpeed; boss.vy = (dy / dist) * chaseSpeed; } boss.x += boss.vx; boss.y += boss.vy; // Bounce off walls if (boss.x < boss.size/2 || boss.x > DESIGN_WIDTH - boss.size/2) boss.vx *= -1; if (boss.y < boss.size/2 || boss.y > DESIGN_HEIGHT - boss.size/2) boss.vy *= -1; } // Check player collision with enemies (red squares only) if (gameStarted && !gameOver && !inShop) { for (let i = enemies.length - 1; i >= 0; i--) { const e = enemies[i]; const dx = player.x - e.x; const dy = player.y - e.y; if (Math.sqrt(dx*dx + dy*dy) < (player.size + e.size)/2) { savedCoins = coinCount; gameOver = true; break; } } } // Check player collision with boss if (boss && gameStarted && !gameOver && !inShop) { const dx = player.x - boss.x; const dy = player.y - boss.y; if (Math.sqrt(dx*dx + dy*dy) < (player.size + boss.size)/2) { savedCoins = coinCount; gameOver = true; } } // Collision detection if (gameStarted && !gameOver) { bullets.forEach((b, bi) => { enemies.forEach((e, ei) => { const dx = b.x - e.x; const dy = b.y - e.y; if (Math.sqrt(dx*dx + dy*dy) < (b.size + e.size)/2) { if (b.isRailgunBullet) { // Railgun AOE circle aoeCircles.push({ x: e.x, y: e.y, size: 0, alpha: 255, timer: 45 }); enemies.splice(ei, 1); bullets.splice(bi, 1); score += 10; enemiesKilled++; // Drop coin coins.push({ x: e.x, y: e.y, size: 12, bobOffset: Math.random() * Math.PI * 2 }); } else if (b.isRailgun) { // Railgun explosion explosions.push({ x: e.x, y: e.y, size: 0, maxSize: 120, alpha: 255, timer: 30 }); } else { enemies.splice(ei, 1); bullets.splice(bi, 1); score += 10; enemiesKilled++; // Drop coin coins.push({ x: e.x, y: e.y, size: 12, bobOffset: Math.random() * Math.PI * 2 }); } } }); // Boss bullet collision if (boss) { const dx = b.x - boss.x; const dy = b.y - boss.y; if (Math.sqrt(dx*dx + dy*dy) < (b.size + boss.size)/2) { if (b.isRailgunBullet) { // Railgun instant kill boss with visual feedback aoeCircles.push({ x: boss.x, y: boss.y, size: 0, alpha: 255, timer: 60 }); boss = null; bullets.splice(bi, 1); } else { const damage = b.damage || 1; boss.health -= damage; bossHealth -= damage; // Knock back away from player const knockbackStrength = 8; const dx = b.x - boss.x; const dy = b.y - boss.y; const dist = Math.sqrt(dx * dx + dy * dy) || 1; boss.vx = (dx / dist) * knockbackStrength; boss.vy = (dy / dist) * knockbackStrength; bullets.splice(bi, 1); if (boss.health <= 0) { score += 1000; coinChests.push({ x: boss.x, y: boss.y, size: 40, bobOffset: Math.random() * Math.PI * 2 }); boss = null; } } } } }); } if (gameOver) { p.fill(0, 0, 0, 200); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT); p.fill(255, 255, 255); p.textAlign(p.CENTER, p.CENTER); p.textSize(48); p.text("GAME OVER", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 - 50); p.textSize(24); p.text("Press R to restart", DESIGN_WIDTH / 2, DESIGN_HEIGHT / 2 + 20); p.textAlign(p.LEFT, p.BASELINE); // Draw score p.fill(255, 255, 255); p.textSize(32); p.text(`Score: ${score}`, 20, 40); p.text(`High Score: ${highScore}`, 20, 75); p.text(`Coins: ${coinCount}`, 20, 110); } else if (!inShop) { p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Draw player (blue square) p.fill(96, 165, 250); p.rectMode(p.CENTER); p.rect(player.x, player.y, player.size, player.size, 8); // Draw bullets p.fill(255, 255, 0); bullets.forEach(b => { p.circle(b.x, b.y, b.size); }); // Draw explosions p.noStroke(); explosions.forEach(exp => { p.fill(255, 165, 0, exp.alpha); p.circle(exp.x, exp.y, exp.size); }); // Draw railgun AOE circles (orange, larger for boss kill) aoeCircles.forEach(aoe => { p.fill(255, 165, 0, aoe.alpha); p.circle(aoe.x, aoe.y, aoe.size * (aoe.timer > 45 ? 1.5 : 1)); }); // Draw enemies (red squares) p.fill(239, 68, 68); enemies.forEach(e => { p.rect(e.x, e.y, e.size, e.size, 6); }); // Draw coins p.fill(255, 215, 0); coins.forEach(coin => { const bob = Math.sin(angle + coin.bobOffset) * 2; p.circle(coin.x, coin.y + bob, coin.size); }); // Draw coin chests p.fill(255, 215, 0); coinChests.forEach(chest => { const bob = Math.sin(angle + chest.bobOffset) * 3; p.rect(chest.x, chest.y + bob, chest.size, chest.size * 1.2, 8); p.fill(218, 165, 32); p.rect(chest.x, chest.y + bob - chest.size * 0.3, chest.size * 0.8, chest.size * 0.25, 4); }); // Draw boss (big red square) if (boss) { p.fill(220, 38, 38); p.stroke(255, 0, 0); p.strokeWeight(3); p.rect(boss.x, boss.y, boss.size, boss.size, 12); p.noStroke(); // Boss health bar const barWidth = boss.size; const barHeight = 12; const barX = boss.x - barWidth / 2; const barY = boss.y - boss.size / 2 - 20; p.fill(255, 0, 0); p.rect(barX, barY, barWidth, barHeight, 4); p.fill(34, 197, 94); p.rect(barX, barY, (barWidth * bossHealth / maxBossHealth), barHeight, 4); p.fill(255); p.textSize(14); p.textAlign(p.CENTER, p.CENTER); p.text(`${Math.ceil(bossHealth)}/${maxBossHealth}`, boss.x, barY + barHeight/2 + 2); p.textAlign(p.LEFT, p.BASELINE); } // Draw mouse pointer const pointer = toDesignSpace(p.mouseX, p.mouseY); if ( pointer.x >= 0 && pointer.x <= DESIGN_WIDTH && pointer.y >= 0 && pointer.y <= DESIGN_HEIGHT ) { p.fill(34, 197, 94, 180); p.circle(pointer.x, pointer.y, 18); } p.pop(); // Draw score and wave p.fill(255, 255, 255); p.textSize(32); p.textAlign(p.LEFT, p.BASELINE); p.text(`Score: ${score}`, 20, 40); p.text(`High Score: ${highScore}`, 20, 75); p.text(`Wave: ${currentWave}`, 20, 110); p.text(`Coins: ${coinCount}`, 20, 145); p.text(`Gun: ${guns[currentGun].name}${currentGun === 1 && shotgunCooldown > 0 ? ` (CD: ${Math.ceil(shotgunCooldown/60)})` : ''}${currentGun === 2 && rifleCooldown > 0 ? ` (CD: ${Math.ceil(rifleCooldown/60)})` : ''}${currentGun === 3 && railgunCharging ? ` (Charging: ${Math.ceil(railgunChargeTime/60)}s)` : ''}`, 20, 180); } else { // Shop UI p.push(); p.translate(offsetX, offsetY); p.scale(scaleFactor); // Shop overlay p.fill(0, 0, 0, 200); p.rect(0, 0, DESIGN_WIDTH, DESIGN_HEIGHT, 20); // Shop title p.fill(239, 68, 68); p.textAlign(p.CENTER, p.CENTER); p.textSize(48); p.text("SHOP", DESIGN_WIDTH / 2, 80); // Coins display p.fill(255, 215, 0); p.textSize(28); p.text(`Coins: ${coinCount}`, DESIGN_WIDTH / 2, 130); // Guns list const pointer = toDesignSpace(p.mouseX, p.mouseY); const gunButtons = [ { x: DESIGN_WIDTH / 2, y: 220, width: 300, height: 60, index: 0 }, { x: DESIGN_WIDTH / 2, y: 300, width: 300, height: 60, index: 1 }, { x: DESIGN_WIDTH / 2, y: 380, width: 300, height: 60, index: 2 }, { x: DESIGN_WIDTH / 2, y: 460, width: 300, height: 60, index: 3 } ]; gunButtons.forEach((btn, i) => { const gun = guns[btn.index]; const isHover = pointer.x >= btn.x - btn.width/2 && pointer.x <= btn.x + btn.width/2 && pointer.y >= btn.y - btn.height/2 && pointer.y <= btn.y + btn.height/2; const isCurrent = btn.index === currentGun; const canAfford = coinCount >= gun.cost; // Button background if (isHover) p.fill(100, 100, 100, 200); else p.fill(50, 50, 50, 180); p.rect(btn.x, btn.y, btn.width, btn.height, 12); // Button text p.fill(isCurrent ? [255, 215, 0] : 255); p.textSize(24); p.textAlign(p.LEFT, p.CENTER); p.text(`${gun.name} - ${gun.cost} coins`, btn.x - btn.width/2 + 20, btn.y); if (isCurrent) { p.fill(255, 215, 0); p.textSize(18); p.text("[EQUIPPED]", btn.x + btn.width/2 - 100, btn.y); } // Buy on click if (isHover && p.mouseIsPressed && canAfford && btn.index !== currentGun) { coinCount -= gun.cost; currentGun = btn.index; } }); // Exit instruction p.fill(255); p.textSize(20); p.textAlign(p.CENTER, p.CENTER); p.text("Press E to exit", DESIGN_WIDTH / 2, DESIGN_HEIGHT - 80); p.textAlign(p.LEFT, p.BASELINE); p.pop(); } angle += 0.01; }; const originalRemove = p.remove.bind(p); p.remove = () => { if (typeof teardown === "function") { teardown(); teardown = null; } originalRemove(); }; }; const instance = new window.p5(sketch, "renderDiv"); window.__P5_CLEANUP__ = () => { try { instance.remove(); } catch (error) { console.warn("Failed to remove p5 instance", error); } };

The Arena V.4

How to play