// CLIENT-SIDE CODE function initGameClient(container, socket, roomId, emitAction) { // 1. Create your game UI const canvas = document.createElement('canvas'); canvas.width = 1200; canvas.height = 800; canvas.style.cssText = 'display:block;margin:20px auto;background:#0b0f1a;border:2px solid #152033;image-rendering:pixelated;'; container.appendChild(canvas); const ctx = canvas.getContext('2d'); const info = document.createElement('div'); info.style.cssText = 'max-width:1200px;margin:8px auto;color:#cfd8e3;font-family:system-ui,Segoe UI,Arial,sans-serif;font-size:14px;line-height:1.4;'; info.innerHTML = 'Controls: WASD / Arrow Keys to move. Click to shoot. Survive, grow, dominate.'; container.appendChild(info); // 2. Set up event listeners const keys = {}; const pressed = (code, val) => { keys[code] = val; }; document.addEventListener('keydown', (e) => { pressed(e.code, true); }); document.addEventListener('keyup', (e) => { pressed(e.code, false); }); let lastCamX = 0, lastCamY = 0; let mouse = { x: 0, y: 0 }; canvas.addEventListener('mousemove', (e) => { const rect = canvas.getBoundingClientRect(); mouse.x = e.clientX - rect.left; mouse.y = e.clientY - rect.top; }); canvas.addEventListener('click', (e) => { const rect = canvas.getBoundingClientRect(); const x = e.clientX - rect.left; const y = e.clientY - rect.top; // Convert to world coordinates using last known camera const worldX = x + lastCamX; const worldY = y + lastCamY; emitAction('shoot', { targetX: worldX, targetY: worldY }); }); // Send input state continuously (~60fps) setInterval(() => { const input = { up: !!(keys['KeyW'] || keys['ArrowUp']), down: !!(keys['KeyS'] || keys['ArrowDown']), left: !!(keys['KeyA'] || keys['ArrowLeft']), right: !!(keys['KeyD'] || keys['ArrowRight']) }; emitAction('input', input); }, 16); // 3. Return object with onStateUpdate method function drawGrid(ctx, camX, camY, w, h, spacing, color) { ctx.strokeStyle = color; ctx.lineWidth = 1; const startX = -((camX % spacing) + spacing) % spacing; const startY = -((camY % spacing) + spacing) % spacing; for (let x = startX; x < w; x += spacing) { ctx.beginPath(); ctx.moveTo(x, 0); ctx.lineTo(x, h); ctx.stroke(); } for (let y = startY; y < h; y += spacing) { ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(w, y); ctx.stroke(); } } function render(state) { const myId = socket && socket.id ? socket.id : null; const me = (state.players && myId && state.players[myId]) ? state.players[myId] : null; // Camera centers on local player let camX = 0, camY = 0; if (me) { camX = Math.max(0, Math.min((state.world.width || 2400) - canvas.width, me.x - canvas.width / 2)); camY = Math.max(0, Math.min((state.world.height || 1800) - canvas.height, me.y - canvas.height / 2)); // simple smoothing camX = 0.85 * lastCamX + 0.15 * camX; camY = 0.85 * lastCamY + 0.15 * camY; } lastCamX = camX; lastCamY = camY; ctx.clearRect(0, 0, canvas.width, canvas.height); // Background grid drawGrid(ctx, camX, camY, canvas.width, canvas.height, 64, '#0f1a2b'); drawGrid(ctx, camX, camY, canvas.width, canvas.height, 256, '#0d1524'); // World border ctx.strokeStyle = '#2c3e55'; ctx.lineWidth = 3; ctx.strokeRect(-camX, -camY, state.world.width, state.world.height); // Obstacles if (state.world && state.world.obstacles) { state.world.obstacles.forEach(o => { ctx.fillStyle = o.color || '#2c2f3f'; ctx.fillRect(o.x - camX, o.y - camY, o.width, o.height); ctx.strokeStyle = '#233049'; ctx.lineWidth = 2; ctx.strokeRect(o.x - camX, o.y - camY, o.width, o.height); }); } // Bullets if (state.bullets) { ctx.fillStyle = '#ffd166'; state.bullets.forEach(b => { ctx.beginPath(); ctx.arc(b.x - camX, b.y - camY, b.radius || 3, 0, Math.PI * 2); ctx.fill(); }); } // Players if (state.players) { Object.entries(state.players).forEach(([id, p]) => { const screenX = p.x - camX; const screenY = p.y - camY; // Dead players are semi-transparent ctx.globalAlpha = p.dead ? 0.35 : 1; // Body ctx.beginPath(); ctx.fillStyle = p.color || '#66ff99'; ctx.arc(screenX, screenY, p.radius || 14, 0, Math.PI * 2); ctx.fill(); // Outline ctx.lineWidth = 2; ctx.strokeStyle = myId === id ? '#ffffff' : '#000000'; ctx.stroke(); ctx.globalAlpha = 1; // Health bar const barW = 52; const barH = 6; const pct = Math.max(0, Math.min(1, p.health / (p.maxHealth || 100))); ctx.fillStyle = '#2a2f3a'; ctx.fillRect(screenX - barW/2, screenY - (p.radius + 20), barW, barH); ctx.fillStyle = '#18c47c'; ctx.fillRect(screenX - barW/2, screenY - (p.radius + 20), barW * pct, barH); ctx.strokeStyle = '#0e1826'; ctx.lineWidth = 1; ctx.strokeRect(screenX - barW/2, screenY - (p.radius + 20), barW, barH); // Name (short id) const name = (id === myId ? 'You' : (id || '').slice(0, 4)); ctx.fillStyle = '#cfd8e3'; ctx.font = '12px system-ui, Arial'; ctx.textAlign = 'center'; ctx.fillText(`${name} [${p.kills||0}]`, screenX, screenY - (p.radius + 30)); }); } // Crosshair ctx.save(); ctx.translate(mouse.x, mouse.y); ctx.strokeStyle = '#ffffff'; ctx.lineWidth = 1; ctx.beginPath(); ctx.moveTo(-8, 0); ctx.lineTo(-2, 0); ctx.moveTo(2, 0); ctx.lineTo(8, 0); ctx.moveTo(0, -8); ctx.lineTo(0, -2); ctx.moveTo(0, 2); ctx.lineTo(0, 8); ctx.stroke(); ctx.restore(); // Scoreboard const sorted = Object.entries(state.players || {}).sort((a, b) => (b[1].kills||0) - (a[1].kills||0)); ctx.fillStyle = 'rgba(10,13,22,0.7)'; ctx.fillRect(10, 10, 240, 220); ctx.fillStyle = '#b7c2d5'; ctx.font = '14px system-ui, Arial'; ctx.fillText('Leaderboard (kills / deaths)', 20, 30); ctx.font = '13px system-ui, Arial'; for (let i = 0; i < Math.min(8, sorted.length); i++) { const [id, p] = sorted[i]; const label = `${id===myId?'You':id.slice(0,4)} ${p.kills||0} / ${p.deaths||0}`; ctx.fillStyle = id===myId ? '#ffffff' : '#dbe4f3'; ctx.fillText(`${i+1}. ${label}`, 20, 54 + i*20); } // Kill feed if (state.killFeed) { ctx.fillStyle = 'rgba(10,13,22,0.6)'; ctx.fillRect(canvas.width - 420, 10, 410, 150); ctx.fillStyle = '#cfd8e3'; ctx.font = '13px system-ui, Arial'; ctx.textAlign = 'left'; const feed = state.killFeed.slice(-6); for (let i = 0; i < feed.length; i++) { ctx.fillText(feed[feed.length - 1 - i], canvas.width - 410, 30 + i * 22); } ctx.textAlign = 'start'; } // Local player HUD if (me) { ctx.fillStyle = 'rgba(10,13,22,0.8)'; ctx.fillRect(10, canvas.height - 70, 380, 60); ctx.fillStyle = '#cfd8e3'; ctx.font = '14px system-ui, Arial'; ctx.fillText(`Health: ${Math.round(me.health)}/${Math.round(me.maxHealth)}`, 20, canvas.height - 46); ctx.fillText(`Size: x${(me.sizeScale||1).toFixed(2)} | Kills: ${me.kills||0} Deaths: ${me.deaths||0}`, 20, canvas.height - 24); } // Game over overlay if (state.gameEnded) { ctx.fillStyle = 'rgba(0,0,0,0.6)'; ctx.fillRect(0, 0, canvas.width, canvas.height); ctx.fillStyle = '#ffffff'; ctx.font = '32px system-ui, Arial'; ctx.textAlign = 'center'; const winner = state.gameWinner ? (state.gameWinner === (socket && socket.id) ? 'You' : (state.gameWinner || '').slice(0,4)) : 'No one'; ctx.fillText(state.gameEndReason || `Winner: ${winner}`, canvas.width/2, canvas.height/2); ctx.textAlign = 'start'; } } return { onStateUpdate: (state) => { render(state); } }; } // SERVER-SIDE CODE const serverLogic = { initialState: { world: { width: 2400, height: 1800, obstacles: (function() { // Fixed obstacle layout for a large arena const obs = []; function add(x,y,w,h,c){ obs.push({x,y,width:w,height:h,color:c}); } // Perimeter blocks near edges to shape lanes for (let i=0;i<8;i++) add(200+i*240, 300, 80, 40, '#2b2f3e'); for (let i=0;i<8;i++) add(200+i*240, 1460, 80, 40, '#2b2f3e'); // Central maze-ish rectangles add(1000, 800, 400, 40, '#343a4f'); add(1000, 960, 400, 40, '#343a4f'); add(1160, 640, 40, 320, '#343a4f'); add(1160, 1000, 40, 320, '#343a4f'); // Scatter cover blocks const rng = (seed => () => (seed = (seed*1664525+1013904223)|0, (seed>>>0)/4294967296))(1337); for (let i=0;i<28;i++) { const x = 120 + Math.floor(rng()* (2400-240)); const y = 120 + Math.floor(rng()* (1800-240)); const w = 60 + Math.floor(rng()*140); const h = 40 + Math.floor(rng()*120); add(x,y,w,h,'#2a3146'); } return obs; })() }, players: {}, bullets: [], time: 0, killFeed: [], killLimit: 15, gameEnded: false, gameWinner: null, gameEndReason: null }, moves: { input: (state, payload, playerId) => { const p = state.players[playerId]; if (!p) return; p.input = { up: !!payload.up, down: !!payload.down, left: !!payload.left, right: !!payload.right }; }, shoot: (state, payload, playerId) => { if (state.gameEnded) return; const p = state.players[playerId]; if (!p || p.dead) return; const now = state.time || 0; const cd = p.fireCooldown || 200; // ms if ((p.lastShotTime || 0) + cd > now) return; p.lastShotTime = now; const targetX = payload && typeof payload.targetX === 'number' ? payload.targetX : p.x; const targetY = payload && typeof payload.targetY === 'number' ? payload.targetY : p.y; const dx = targetX - p.x; const dy = targetY - p.y; const ang = Math.atan2(dy, dx); const speed = 13; const spawnDist = (p.radius || 14) + 10; const bx = p.x + Math.cos(ang) * spawnDist; const by = p.y + Math.sin(ang) * spawnDist; const bullet = { id: 'b' + Math.random().toString(36).slice(2), x: bx, y: by, vx: Math.cos(ang) * speed, vy: Math.sin(ang) * speed, radius: 4, damage: 26, ownerId: playerId, life: 180 // frames (~3s) }; state.bullets.push(bullet); if (state.bullets.length > 1200) state.bullets.splice(0, state.bullets.length - 1200); }, playerJoined(state, payload, playerId) { const baseRadius = 14; function randCol() { const hues = [200, 160, 300, 20, 100, 260]; const h = hues[(Math.random()*hues.length)|0]; const s = 65 + (Math.random()*25)|0; const l = 55 + (Math.random()*15)|0; return `hsl(${h} ${s}% ${l}%)`; } function collidesObstacle(x,y,r) { for (const o of state.world.obstacles) { const nx = Math.max(o.x, Math.min(x, o.x + o.width)); const ny = Math.max(o.y, Math.min(y, o.y + o.height)); const dx = x - nx; const dy = y - ny; if (dx*dx + dy*dy < r*r) return true; } return false; } function collidesPlayer(x,y,r) { for (const id in state.players) { const p = state.players[id]; if (id === playerId) continue; const rr = (p.radius||baseRadius) + r + 8; const dx = x - p.x; const dy = y - p.y; if (dx*dx + dy*dy < rr*rr) return true; } return false; } function trySpawn() { const w = state.world.width, h = state.world.height; for (let i=0;i<200;i++) { const x = 60 + Math.random()*(w-120); const y = 60 + Math.random()*(h-120); if (!collidesObstacle(x,y,baseRadius) && !collidesPlayer(x,y,baseRadius)) return {x,y}; } return {x: w*0.5, y: h*0.5}; } const pos = trySpawn(); state.players[playerId] = { id: playerId, x: pos.x, y: pos.y, vx: 0, vy: 0, input: { up:false, down:false, left:false, right:false }, color: randCol(), health: 100, maxHealth: 100, sizeScale: 1.0, radius: baseRadius, friction: 0.86, fireCooldown: 200, lastShotTime: 0, kills: 0, deaths: 0, dead: false, respawnAt: 0 }; }, tick: (state) => { if (state.gameEnded) return; state.time = (state.time || 0) + 16; // ms const baseRadius = 14; const worldW = state.world.width; const worldH = state.world.height; function clamp(v, a, b) { return v < a ? a : v > b ? b : v; } function resolveCircleRect(p, o) { // Push player out of rectangle if overlapping const nearestX = Math.max(o.x, Math.min(p.x, o.x + o.width)); const nearestY = Math.max(o.y, Math.min(p.y, o.y + o.height)); let dx = p.x - nearestX; let dy = p.y - nearestY; const r = p.radius; const distSq = dx*dx + dy*dy; if (distSq < r*r) { const dist = Math.sqrt(distSq) || 0.00001; const overlap = r - dist; const nx = dx / dist; const ny = dy / dist; p.x += nx * overlap; p.y += ny * overlap; const vn = p.vx * nx + p.vy * ny; if (vn < 0) { // cancel inward velocity p.vx -= vn * nx; p.vy -= vn * ny; } } } function bulletHitsRect(b, o) { // Circle-rect intersection for bullet const nx = Math.max(o.x, Math.min(b.x, o.x + o.width)); const ny = Math.max(o.y, Math.min(b.y, o.y + o.height)); const dx = b.x - nx, dy = b.y - ny; return dx*dx + dy*dy <= (b.radius*b.radius); } function safeRespawn(p) { // Find a safe spawn location function collidesObstacle(x,y,r) { for (const o of state.world.obstacles) { const nx = Math.max(o.x, Math.min(x, o.x + o.width)); const ny = Math.max(o.y, Math.min(y, o.y + o.height)); const dx = x - nx; const dy = y - ny; if (dx*dx + dy*dy < r*r) return true; } return false; } function collidesPlayer(x,y,r) { for (const id in state.players) { const q = state.players[id]; if (q === p || q.dead) continue; const rr = (q.radius||baseRadius) + r + 8; const dx = x - q.x; const dy = y - q.y; if (dx*dx + dy*dy < rr*rr) return true; } return false; } for (let i=0;i<200;i++) { const x = 60 + Math.random()*(worldW-120); const y = 60 + Math.random()*(worldH-120); if (!collidesObstacle(x,y,p.radius) && !collidesPlayer(x,y,p.radius)) { p.x=x; p.y=y; return; } } p.x = worldW*0.5; p.y = worldH*0.5; } // Update players for (const id in state.players) { const p = state.players[id]; // Recompute radius from sizeScale p.radius = clamp(baseRadius * (p.sizeScale || 1), 8, 60); if (p.dead) { if (state.time >= (p.respawnAt || 0)) { // Respawn with full health (keep current sizeScale and maxHealth as per rules) safeRespawn(p); p.vx = 0; p.vy = 0; p.health = p.maxHealth; p.dead = false; } continue; } const a = 0.65; // acceleration const maxSpeed = 7.0 * (1.0 / (p.sizeScale ? Math.sqrt(p.sizeScale) : 1)); // larger players a bit slower // Apply acceleration if (p.input && p.input.up) p.vy -= a; if (p.input && p.input.down) p.vy += a; if (p.input && p.input.left) p.vx -= a; if (p.input && p.input.right) p.vx += a; // Friction p.vx *= (p.friction || 0.86); p.vy *= (p.friction || 0.86); // Clamp speed const sp = Math.hypot(p.vx, p.vy); if (sp > maxSpeed) { p.vx = p.vx / sp * maxSpeed; p.vy = p.vy / sp * maxSpeed; } // Update pos p.x += p.vx; p.y += p.vy; // Bounds if (p.x < p.radius) { p.x = p.radius; p.vx *= -0.3; } if (p.y < p.radius) { p.y = p.radius; p.vy *= -0.3; } if (p.x > worldW - p.radius) { p.x = worldW - p.radius; p.vx *= -0.3; } if (p.y > worldH - p.radius) { p.y = worldH - p.radius; p.vy *= -0.3; } // Obstacles for (const o of state.world.obstacles) resolveCircleRect(p, o); } // Update bullets const newBullets = []; bullet_loop: for (let i=0;i worldW+10 || b.y > worldH+10) continue; // Obstacle collision let hitWall = false; for (const o of state.world.obstacles) { if (bulletHitsRect(b, o)) { hitWall = true; break; } } if (hitWall) continue; // Player collision for (const id in state.players) { if (id === b.ownerId) continue; const p = state.players[id]; if (!p || p.dead) continue; const rr = (p.radius || baseRadius) + (b.radius || 4); const dx = b.x - p.x; const dy = b.y - p.y; if (dx*dx + dy*dy <= rr*rr) { // Damage p.health -= b.damage; // Shrink a little on any damage p.sizeScale = clamp((p.sizeScale || 1) * 0.98, 0.6, 3.0); p.radius = clamp(baseRadius * p.sizeScale, 8, 60); // Check death if (p.health <= 0 && !p.dead) { p.dead = true; p.deaths = (p.deaths || 0) + 1; p.respawnAt = state.time + 2000; // 2s respawn const killer = state.players[b.ownerId]; if (killer) { killer.kills = (killer.kills || 0) + 1; // Growth: 1.2x size, +max health, full heal killer.sizeScale = clamp((killer.sizeScale || 1) * 1.2, 0.6, 3.0); killer.maxHealth = clamp((killer.maxHealth || 100) + 12, 50, 260); killer.health = killer.maxHealth; // full restore killer.radius = clamp(baseRadius * killer.sizeScale, 8, 60); // Kill feed message variations const killerName = (b.ownerId || '').slice(0,4); const victimName = (id || '').slice(0,4); const lines = [ `${killerName} deleted ${victimName} like old save data!`, `${killerName} made ${victimName} respawn-curious.`, `${killerName} said 'grow time' and popped ${victimName}!`, `${victimName} donated a size level to ${killerName}.`, `${killerName} turned ${victimName} into a loading screen.`, `${victimName} caught ${killerName}'s high-velocity friendship.`, `${killerName} leveled up on ${victimName}'s tears.`, `${victimName} was sent to the tiny realm by ${killerName}.`, `${killerName} cashed in a growth spurt on ${victimName}.`, `${victimName} went poof! Courtesy of ${killerName}.` ]; state.killFeed.push(lines[(Math.random()*lines.length)|0]); if (state.killFeed.length > 20) state.killFeed.splice(0, state.killFeed.length - 20); // Win condition if (killer.kills >= (state.killLimit || 15)) { state.gameEnded = true; state.gameWinner = b.ownerId; state.gameEndReason = `Winner: ${killerName} reached ${state.killLimit} kills`; } } } // Bullet consumed continue bullet_loop; } } newBullets.push(b); } state.bullets = newBullets; } } };

Best matching community games

make-a-2d-shooter-where-every-