想起小时候玩的一款游戏，那时候还是游戏机玩的，魂斗罗，真的那时候玩的超级有意思，每天放学自己玩。
试着写了一版本地运行的纯HTML页面，玩了一下挺好。
操作方式
按键 功能
← → / A D 移动
Space / ↑ / W 跳跃
Z 射击
X 炸弹
↓ / S 趴下 / 空中向下瞄准
Enter 开始 / 重新开始
<!DOCTYPE html> <html lang="zh-CN"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>魂斗罗-单机版</title> <style> * { margin: 0; padding: 0; box-sizing: border-box; } html, body { width: 100%; height: 100%; overflow: hidden; background: #000; display: flex; align-items: center; justify-content: center; } canvas { display: block; image-rendering: pixelated; image-rendering: crisp-edges; background: #000; } </style> </head> <body> <canvas id="game"></canvas> <script> // ==================== CONTRA GAME ==================== const canvas = document.getElementById('game'); const ctx = canvas.getContext('2d'); // --- Responsive Canvas --- const GAME_W = 800, GAME_H = 480; canvas.width = GAME_W; canvas.height = GAME_H; function resize() { const s = Math.min(window.innerWidth / GAME_W, window.innerHeight / GAME_H); canvas.style.width = (GAME_W * s) + 'px'; canvas.style.height = (GAME_H * s) + 'px'; } window.addEventListener('resize', resize); resize(); // --- Audio Engine --- const AudioCtx = window.AudioContext || window.webkitAudioContext; let audioCtx; function ensureAudio() { if (!audioCtx) audioCtx = new AudioCtx(); } function playSound(type) { ensureAudio(); const o = audioCtx.createOscillator(); const g = audioCtx.createGain(); o.connect(g); g.connect(audioCtx.destination); const t = audioCtx.currentTime; switch(type) { case 'shoot': o.type='square'; o.frequency.setValueAtTime(800,t); o.frequency.exponentialRampToValueAtTime(200,t+0.08); g.gain.setValueAtTime(0.15,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.08); o.start(t); o.stop(t+0.08); break; case 'spread': o.type='sawtooth'; o.frequency.setValueAtTime(600,t); o.frequency.exponentialRampToValueAtTime(100,t+0.12); g.gain.setValueAtTime(0.12,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.12); o.start(t); o.stop(t+0.12); break; case 'explosion': o.type='sawtooth'; o.frequency.setValueAtTime(200,t); o.frequency.exponentialRampToValueAtTime(30,t+0.3); g.gain.setValueAtTime(0.2,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.3); o.start(t); o.stop(t+0.3); break; case 'powerup': o.type='sine'; o.frequency.setValueAtTime(400,t); o.frequency.exponentialRampToValueAtTime(1200,t+0.2); g.gain.setValueAtTime(0.15,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.25); o.start(t); o.stop(t+0.25); break; case 'jump': o.type='sine'; o.frequency.setValueAtTime(300,t); o.frequency.exponentialRampToValueAtTime(600,t+0.1); g.gain.setValueAtTime(0.1,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.1); o.start(t); o.stop(t+0.1); break; case 'hit': o.type='square'; o.frequency.setValueAtTime(150,t); o.frequency.exponentialRampToValueAtTime(50,t+0.2); g.gain.setValueAtTime(0.2,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.2); o.start(t); o.stop(t+0.2); break; case 'boss': o.type='sawtooth'; o.frequency.setValueAtTime(100,t); o.frequency.exponentialRampToValueAtTime(40,t+0.5); g.gain.setValueAtTime(0.25,t); g.gain.exponentialRampToValueAtTime(0.001,t+0.5); o.start(t); o.stop(t+0.5); break; } } // --- Input --- const keys = {}; window.addEventListener('keydown', e => { keys[e.code] = true; e.preventDefault(); }); window.addEventListener('keyup', e => { keys[e.code] = false; e.preventDefault(); }); // --- Game State --- let gameState = 'title'; // title, playing, gameover, win let score = 0, lives = 3, hiScore = parseInt(localStorage.getItem('contraHi') || '0'); let cameraX = 0; const LEVEL_W = 6400; const GRAVITY = 0.5; let frameCount = 0; let screenShake = 0; let bossDefeated = false; // --- Platforms --- const platforms = []; function generateLevel() { platforms.length = 0; // Ground for (let x = 0; x < LEVEL_W; x += 200) { if (x > 400 && x < 600) continue; // gap if (x > 1800 && x < 2000) continue; // gap if (x > 3200 && x < 3400) continue; // gap platforms.push({ x, y: GAME_H - 40, w: 200, h: 40, type: 'ground' }); } // Floating platforms const floats = [ {x:300,y:320,w:120},{x:500,y:280,w:100},{x:700,y:240,w:140}, {x:950,y:300,w:100},{x:1100,y:220,w:120},{x:1300,y:280,w:100}, {x:1500,y:200,w:140},{x:1700,y:320,w:100},{x:1900,y:260,w:120}, {x:2100,y:180,w:100},{x:2300,y:300,w:140},{x:2500,y:240,w:100}, {x:2700,y:320,w:120},{x:2900,y:200,w:100},{x:3100,y:280,w:140}, {x:3300,y:160,w:100},{x:3500,y:300,w:120},{x:3700,y:240,w:100}, {x:3900,y:320,w:140},{x:4100,y:200,w:100},{x:4300,y:280,w:120}, {x:4500,y:160,w:100},{x:4700,y:300,w:140},{x:4900,y:240,w:100}, {x:5100,y:320,w:120},{x:5300,y:200,w:100},{x:5500,y:280,w:140}, {x:5700,y:160,w:120},{x:5900,y:300,w:100} ]; floats.forEach(f => platforms.push({ x:f.x, y:f.y, w:f.w, h:16, type:'platform' })); // Walls/barriers [800,1600,2400,3600,4800].forEach(x => { platforms.push({ x, y:GAME_H-120, w:30, h:80, type:'wall' }); }); } // --- Player --- const player = { x: 100, y: 300, w: 28, h: 40, vx: 0, vy: 0, dir: 1, onGround: false, jumping: false, shooting: false, shootTimer: 0, shootCooldown: 8, weapon: 'normal', // normal, spread, rapid, laser weaponTimer: 0, invincible: 0, prone: false, animFrame: 0, animTimer: 0, alive: true, respawnTimer: 0 }; // --- Bullets --- let playerBullets = []; let enemyBullets = []; // --- Enemies --- let enemies = []; let boss = null; // --- Powerups --- let powerups = []; // --- Explosions --- let explosions = []; // --- Particles --- let particles = []; // --- Spawn enemies --- function spawnEnemies() { enemies.length = 0; // Soldiers for (let i = 0; i < 40; i++) { const ex = 600 + i * 140 + Math.random() * 60; enemies.push({ type: 'soldier', x: ex, y: GAME_H - 80, w: 24, h: 36, hp: 1, dir: -1, vx: 0, vy: 0, onGround: false, shootTimer: Math.random() * 120, alive: true, animFrame: 0, patrol: ex - 60, patrolMax: ex + 60, state: 'patrol' // patrol, chase, shoot }); } // Turrets [1000, 1800, 2600, 3400, 4200, 5000, 5600].forEach(tx => { enemies.push({ type: 'turret', x: tx, y: GAME_H - 72, w: 32, h: 32, hp: 3, dir: -1, shootTimer: 60, alive: true, angle: 0 }); }); // Runners (fast enemies) for (let i = 0; i < 15; i++) { const ex = 1200 + i * 350 + Math.random() * 100; enemies.push({ type: 'runner', x: ex, y: GAME_H - 76, w: 22, h: 34, hp: 1, dir: -1, vx: -3, vy: 0, onGround: false, alive: true, animFrame: 0 }); } // Powerup drops [700, 1400, 2200, 3000, 3800, 4600, 5400].forEach((px, i) => { const types = ['spread','rapid','laser','life','shield']; powerups.push({ x: px, y: 180 + Math.random() * 80, w: 24, h: 24, type: types[i % types.length], alive: true, bobTimer: Math.random() * 100 }); }); } // --- Boss --- function spawnBoss() { boss = { x: LEVEL_W - 300, y: GAME_H - 200, w: 120, h: 160, hp: 50, maxHp: 50, phase: 0, shootTimer: 0, moveTimer: 0, alive: true, dir: -1, vy: 0 }; } // --- Collision --- function rectCollide(a, b) { return a.x < b.x + b.w && a.x + a.w > b.x && a.y < b.y + b.h && a.y + a.h > b.y; } function resolveCollision(entity) { entity.onGround = false; for (const p of platforms) { if (rectCollide(entity, p)) { const overlapX = Math.min(entity.x + entity.w - p.x, p.x + p.w - entity.x); const overlapY = Math.min(entity.y + entity.h - p.y, p.y + p.h - entity.y); if (overlapY < overlapX) { if (entity.y + entity.h/2 < p.y + p.h/2) { entity.y = p.y - entity.h; entity.vy = 0; entity.onGround = true; } else { entity.y = p.y + p.h; entity.vy = 0; } } else { if (entity.x + entity.w/2 < p.x + p.w/2) { entity.x = p.x - entity.w; } else { entity.x = p.x + p.w; } entity.vx = 0; } } } } // --- Draw Helpers --- function drawPixelChar(x, y, dir, frame, prone, shooting) { const sx = x - cameraX; if (sx < -50 || sx > GAME_W + 50) return; ctx.save(); ctx.translate(sx + 14, y); ctx.scale(dir, 1); if (prone) { // Prone position ctx.fillStyle = '#1e88e5'; ctx.fillRect(-14, 24, 28, 12); // body horizontal ctx.fillStyle = '#ffcc80'; ctx.fillRect(10, 22, 10, 10); // head ctx.fillStyle = '#1565c0'; ctx.fillRect(-14, 28, 28, 8); // legs // Gun ctx.fillStyle = '#757575'; ctx.fillRect(18, 26, 16, 4); } else { // Head ctx.fillStyle = '#ffcc80'; ctx.fillRect(-6, 0, 12, 12); // Hair/bandana ctx.fillStyle = '#e53935'; ctx.fillRect(-7, 0, 14, 4); ctx.fillRect(-9, 2, 4, 3); // bandana tail // Eyes ctx.fillStyle = '#000'; ctx.fillRect(2, 5, 3, 3); // Body ctx.fillStyle = '#1e88e5'; ctx.fillRect(-8, 12, 16, 14); // Belt ctx.fillStyle = '#795548'; ctx.fillRect(-8, 24, 16, 3); // Legs const legOff = Math.sin(frame * 0.3) * 4; ctx.fillStyle = '#1565c0'; ctx.fillRect(-7, 27, 6, 13 + (frame % 2 === 0 ? legOff : -legOff)); ctx.fillRect(1, 27, 6, 13 + (frame % 2 === 0 ? -legOff : legOff)); // Boots ctx.fillStyle = '#4e342e'; ctx.fillRect(-8, 37, 7, 3); ctx.fillRect(1, 37, 7, 3); // Gun arm ctx.fillStyle = '#757575'; if (shooting) { ctx.fillRect(8, 14, 18, 4); // Muzzle flash ctx.fillStyle = '#ffeb3b'; ctx.fillRect(26, 12, 6, 8); } else { ctx.fillRect(8, 16, 14, 3); } // Arm ctx.fillStyle = '#ffcc80'; ctx.fillRect(6, 14, 4, 6); } ctx.restore(); } function drawSoldier(e) { const sx = e.x - cameraX; if (sx < -50 || sx > GAME_W + 50) return; ctx.save(); ctx.translate(sx + 12, e.y); ctx.scale(e.dir, 1); // Head ctx.fillStyle = '#4caf50'; ctx.fillRect(-5, 0, 10, 10); // Helmet ctx.fillStyle = '#2e7d32'; ctx.fillRect(-6, -2, 12, 6); // Eyes ctx.fillStyle = '#f00'; ctx.fillRect(1, 4, 3, 2); // Body ctx.fillStyle = '#388e3c'; ctx.fillRect(-7, 10, 14, 14); // Legs const lo = Math.sin(e.animFrame * 0.2) * 3; ctx.fillStyle = '#1b5e20'; ctx.fillRect(-6, 24, 5, 12 + lo); ctx.fillRect(1, 24, 5, 12 - lo); // Gun ctx.fillStyle = '#616161'; ctx.fillRect(7, 14, 12, 3); ctx.restore(); } function drawTurret(e) { const sx = e.x - cameraX; if (sx < -50 || sx > GAME_W + 50) return; // Base ctx.fillStyle = '#616161'; ctx.fillRect(sx, e.y + 16, 32, 16); // Dome ctx.fillStyle = '#757575'; ctx.beginPath(); ctx.arc(sx + 16, e.y + 16, 14, Math.PI, 0); ctx.fill(); // Barrel ctx.save(); ctx.translate(sx + 16, e.y + 14); ctx.rotate(e.angle); ctx.fillStyle = '#424242'; ctx.fillRect(0, -3, 24, 6); ctx.restore(); // Light ctx.fillStyle = frameCount % 30 < 15 ? '#f44336' : '#ff8a80'; ctx.fillRect(sx + 13, e.y + 6, 6, 4); } function drawRunner(e) { const sx = e.x - cameraX; if (sx < -50 || sx > GAME_W + 50) return; ctx.save(); ctx.translate(sx + 11, e.y); ctx.scale(e.dir, 1); // Head ctx.fillStyle = '#ff6f00'; ctx.fillRect(-5, 0, 10, 10); // Eyes ctx.fillStyle = '#fff'; ctx.fillRect(1, 3, 4, 4); ctx.fillStyle = '#f00'; ctx.fillRect(2, 4, 2, 2); // Body ctx.fillStyle = '#e65100'; ctx.fillRect(-6, 10, 12, 12); // Legs (running fast) const lo = Math.sin(e.animFrame * 0.5) * 6; ctx.fillStyle = '#bf360c'; ctx.fillRect(-5, 22, 4, 12 + lo); ctx.fillRect(1, 22, 4, 12 - lo); // Claws ctx.fillStyle = '#ff3d00'; ctx.fillRect(6, 12, 8, 3); ctx.restore(); } function drawBoss(b) { if (!b || !b.alive) return; const sx = b.x - cameraX; ctx.save(); // Main body ctx.fillStyle = '#455a64'; ctx.fillRect(sx, b.y, b.w, b.h); // Armor plates ctx.fillStyle = '#37474f'; ctx.fillRect(sx + 10, b.y + 10, b.w - 20, 30); ctx.fillRect(sx + 10, b.y + 60, b.w - 20, 30); ctx.fillRect(sx + 10, b.y + 110, b.w - 20, 30); // Core (weak point) const coreGlow = Math.sin(frameCount * 0.1) * 0.3 + 0.7; ctx.fillStyle = `rgba(244, 67, 54, ${coreGlow})`; ctx.beginPath(); ctx.arc(sx + b.w/2, b.y + b.h/2, 20, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ff8a80'; ctx.beginPath(); ctx.arc(sx + b.w/2, b.y + b.h/2, 10, 0, Math.PI * 2); ctx.fill(); // Cannons ctx.fillStyle = '#263238'; ctx.fillRect(sx - 20, b.y + 20, 30, 12); ctx.fillRect(sx - 20, b.y + b.h - 40, 30, 12); ctx.fillRect(sx + b.w - 10, b.y + 40, 30, 12); ctx.fillRect(sx + b.w - 10, b.y + b.h - 60, 30, 12); // Eyes ctx.fillStyle = '#f44336'; ctx.fillRect(sx + 25, b.y + 15, 12, 8); ctx.fillRect(sx + b.w - 37, b.y + 15, 12, 8); // HP bar ctx.fillStyle = '#333'; ctx.fillRect(sx, b.y - 20, b.w, 10); ctx.fillStyle = b.hp > b.maxHp * 0.3 ? '#f44336' : '#ff1744'; ctx.fillRect(sx + 1, b.y - 19, (b.w - 2) * (b.hp / b.maxHp), 8); // Name ctx.fillStyle = '#fff'; ctx.font = '10px monospace'; ctx.fillText('BOSS - ALIEN CORE', sx + 10, b.y - 24); ctx.restore(); } // --- Background --- function drawBackground() { // Sky gradient const grad = ctx.createLinearGradient(0, 0, 0, GAME_H); grad.addColorStop(0, '#0d1b2a'); grad.addColorStop(0.4, '#1b2838'); grad.addColorStop(0.7, '#2d4a3e'); grad.addColorStop(1, '#1a3a2a'); ctx.fillStyle = grad; ctx.fillRect(0, 0, GAME_W, GAME_H); // Stars ctx.fillStyle = '#fff'; for (let i = 0; i < 60; i++) { const sx = ((i * 137 + 50) % GAME_W + GAME_W - cameraX * 0.05 % GAME_W) % GAME_W; const sy = (i * 89 + 20) % (GAME_H * 0.5); const size = (i % 3 === 0) ? 2 : 1; ctx.globalAlpha = 0.3 + (Math.sin(frameCount * 0.02 + i) * 0.3); ctx.fillRect(sx, sy, size, size); } ctx.globalAlpha = 1; // Mountains (parallax) ctx.fillStyle = '#1a3328'; for (let i = 0; i < 12; i++) { const mx = i * 200 - (cameraX * 0.15) % 2400; const mh = 80 + (i * 47) % 60; ctx.beginPath(); ctx.moveTo(mx, GAME_H - 40); ctx.lineTo(mx + 100, GAME_H - 40 - mh); ctx.lineTo(mx + 200, GAME_H - 40); ctx.fill(); } // Trees (parallax) ctx.fillStyle = '#0d2818'; for (let i = 0; i < 20; i++) { const tx = i * 150 - (cameraX * 0.3) % 3000; const th = 40 + (i * 31) % 30; ctx.fillRect(tx + 15, GAME_H - 40 - th, 10, th); ctx.beginPath(); ctx.moveTo(tx, GAME_H - 40 - th + 10); ctx.lineTo(tx + 20, GAME_H - 40 - th - 25); ctx.lineTo(tx + 40, GAME_H - 40 - th + 10); ctx.fill(); } } function drawPlatforms() { for (const p of platforms) { const sx = p.x - cameraX; if (sx > GAME_W + 10 || sx + p.w < -10) continue; if (p.type === 'ground') { ctx.fillStyle = '#3e2723'; ctx.fillRect(sx, p.y, p.w, p.h); ctx.fillStyle = '#4caf50'; ctx.fillRect(sx, p.y, p.w, 6); ctx.fillStyle = '#2e7d32'; ctx.fillRect(sx, p.y + 6, p.w, 4); // Dirt texture ctx.fillStyle = '#5d4037'; for (let dx = 0; dx < p.w; dx += 20) { ctx.fillRect(sx + dx + 5, p.y + 15, 8, 4); ctx.fillRect(sx + dx + 2, p.y + 25, 6, 3); } } else if (p.type === 'platform') { ctx.fillStyle = '#78909c'; ctx.fillRect(sx, p.y, p.w, p.h); ctx.fillStyle = '#90a4ae'; ctx.fillRect(sx, p.y, p.w, 4); ctx.fillStyle = '#546e7a'; ctx.fillRect(sx + 2, p.y + 6, p.w - 4, 4); // Rivets ctx.fillStyle = '#b0bec5'; ctx.fillRect(sx + 4, p.y + 2, 3, 3); ctx.fillRect(sx + p.w - 7, p.y + 2, 3, 3); } else if (p.type === 'wall') { ctx.fillStyle = '#5d4037'; ctx.fillRect(sx, p.y, p.w, p.h); ctx.fillStyle = '#6d4c41'; for (let dy = 0; dy < p.h; dy += 12) { ctx.fillRect(sx, p.y + dy, p.w, 1); ctx.fillRect(sx + p.w/2, p.y + dy, 1, 12); } } } } function drawPowerups() { for (const p of powerups) { if (!p.alive) continue; const sx = p.x - cameraX; if (sx < -30 || sx > GAME_W + 30) continue; const bob = Math.sin((frameCount + p.bobTimer) * 0.05) * 4; const py = p.y + bob; // Wing container ctx.fillStyle = '#e53935'; ctx.fillRect(sx - 2, py - 2, 28, 28); ctx.fillStyle = '#c62828'; ctx.fillRect(sx, py, 24, 24); // Letter ctx.fillStyle = '#fff'; ctx.font = 'bold 14px monospace'; const letters = { spread: 'S', rapid: 'R', laser: 'L', life: '1UP', shield: '🛡' }; ctx.fillText(letters[p.type] || '?', sx + 4, py + 17); // Glow ctx.globalAlpha = 0.3 + Math.sin(frameCount * 0.1) * 0.2; ctx.fillStyle = '#ffeb3b'; ctx.fillRect(sx - 4, py - 4, 32, 32); ctx.globalAlpha = 1; } } function drawBullets() { // Player bullets for (const b of playerBullets) { const sx = b.x - cameraX; if (sx < -10 || sx > GAME_W + 10) continue; if (b.type === 'laser') { ctx.fillStyle = '#00e5ff'; ctx.fillRect(sx, b.y - 1, b.w, 3); ctx.fillStyle = '#b2ebf2'; ctx.fillRect(sx, b.y, b.w, 1); } else if (b.type === 'spread') { ctx.fillStyle = '#ff9800'; ctx.beginPath(); ctx.arc(sx + b.w/2, b.y + b.h/2, 3, 0, Math.PI * 2); ctx.fill(); } else { ctx.fillStyle = '#ffeb3b'; ctx.fillRect(sx, b.y, b.w, b.h); ctx.fillStyle = '#fff'; ctx.fillRect(sx + 1, b.y + 1, b.w - 2, b.h - 2); } } // Enemy bullets for (const b of enemyBullets) { const sx = b.x - cameraX; if (sx < -10 || sx > GAME_W + 10) continue; ctx.fillStyle = '#f44336'; ctx.beginPath(); ctx.arc(sx + 3, b.y + 3, 4, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ff8a80'; ctx.beginPath(); ctx.arc(sx + 3, b.y + 3, 2, 0, Math.PI * 2); ctx.fill(); } } function drawExplosions() { for (let i = explosions.length - 1; i >= 0; i--) { const e = explosions[i]; const sx = e.x - cameraX; const progress = e.timer / e.maxTimer; const r = e.radius * (1 - progress * 0.5); ctx.globalAlpha = progress; ctx.fillStyle = '#ff6f00'; ctx.beginPath(); ctx.arc(sx, e.y, r, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#ffeb3b'; ctx.beginPath(); ctx.arc(sx, e.y, r * 0.6, 0, Math.PI * 2); ctx.fill(); ctx.fillStyle = '#fff'; ctx.beginPath(); ctx.arc(sx, e.y, r * 0.2, 0, Math.PI * 2); ctx.fill(); ctx.globalAlpha = 1; e.timer--; if (e.timer <= 0) explosions.splice(i, 1); } } function drawParticles() { for (let i = particles.length - 1; i >= 0; i--) { const p = particles[i]; const sx = p.x - cameraX; ctx.globalAlpha = p.life / p.maxLife; ctx.fillStyle = p.color; ctx.fillRect(sx, p.y, p.size, p.size); p.x += p.vx; p.y += p.vy; p.vy += 0.1; p.life--; if (p.life <= 0) particles.splice(i, 1); } ctx.globalAlpha = 1; } function drawHUD() { // Score ctx.fillStyle = 'rgba(0,0,0,0.5)'; ctx.fillRect(0, 0, GAME_W, 36); ctx.fillStyle = '#fff'; ctx.font = 'bold 16px monospace'; ctx.fillText(`SCORE: ${score.toString().padStart(8, '0')}`, 10, 24); ctx.fillText(`HI: ${hiScore.toString().padStart(8, '0')}`, 220, 24); // Lives ctx.fillStyle = '#e53935'; for (let i = 0; i < lives; i++) { ctx.fillRect(460 + i * 22, 10, 14, 16); ctx.fillStyle = '#ffcc80'; ctx.fillRect(463 + i * 22, 6, 8, 8); ctx.fillStyle = '#e53935'; } // Weapon ctx.fillStyle = '#ffeb3b'; ctx.font = '12px monospace'; const wNames = { normal: 'NORMAL', spread: 'SPREAD', rapid: 'RAPID', laser: 'LASER' }; ctx.fillText(`WEAPON: ${wNames[player.weapon]}`, 580, 24); // Weapon timer if (player.weaponTimer > 0 && player.weapon !== 'normal') { ctx.fillStyle = '#333'; ctx.fillRect(580, 28, 80, 4); ctx.fillStyle = '#ffeb3b'; ctx.fillRect(580, 28, 80 * (player.weaponTimer / 600), 4); } // Progress bar ctx.fillStyle = '#333'; ctx.fillRect(GAME_W - 160, 14, 150, 8); ctx.fillStyle = '#4caf50'; ctx.fillRect(GAME_W - 160, 14, 150 * Math.min(1, cameraX / (LEVEL_W - GAME_W)), 8); ctx.fillStyle = '#fff'; ctx.font = '8px monospace'; ctx.fillText('PROGRESS', GAME_W - 145, 12); } // --- Title Screen --- function drawTitle() { // Background ctx.fillStyle = '#0a0a0a'; ctx.fillRect(0, 0, GAME_W, GAME_H); // Animated background lines ctx.strokeStyle = 'rgba(229, 57, 53, 0.1)'; ctx.lineWidth = 1; for (let i = 0; i < 20; i++) { const y = (i * 30 + frameCount * 0.5) % GAME_H; ctx.beginPath(); ctx.moveTo(0, y); ctx.lineTo(GAME_W, y); ctx.stroke(); } // Title ctx.save(); const titleY = 100 + Math.sin(frameCount * 0.03) * 8; ctx.fillStyle = '#e53935'; ctx.font = 'bold 72px monospace'; ctx.textAlign = 'center'; ctx.fillText('CONTRA', GAME_W / 2, titleY); // Title shadow ctx.fillStyle = '#b71c1c'; ctx.fillText('CONTRA', GAME_W / 2 + 3, titleY + 3); // Subtitle ctx.fillStyle = '#ffeb3b'; ctx.font = 'bold 20px monospace'; ctx.fillText('魂 斗 罗', GAME_W / 2, titleY + 40); // Blinking text if (frameCount % 60 < 40) { ctx.fillStyle = '#fff'; ctx.font = '18px monospace'; ctx.fillText('PRESS ENTER TO START', GAME_W / 2, 280); } // Controls ctx.fillStyle = '#90a4ae'; ctx.font = '13px monospace'; ctx.fillText('← → : MOVE ↑ : AIM UP ↓ : PRONE', GAME_W / 2, 340); ctx.fillText('SPACE : JUMP Z : SHOOT X : BOMB', GAME_W / 2, 365); // Hi-Score ctx.fillStyle = '#ffeb3b'; ctx.font = '14px monospace'; ctx.fillText(`HI-SCORE: ${hiScore.toString().padStart(8, '0')}`, GAME_W / 2, 420); ctx.restore(); } function drawGameOver() { ctx.fillStyle = 'rgba(0,0,0,0.7)'; ctx.fillRect(0, 0, GAME_W, GAME_H); ctx.save(); ctx.textAlign = 'center'; ctx.fillStyle = '#e53935'; ctx.font = 'bold 56px monospace'; ctx.fillText('GAME OVER', GAME_W / 2, GAME_H / 2 - 30); ctx.fillStyle = '#fff'; ctx.font = '20px monospace'; ctx.fillText(`FINAL SCORE: ${score.toString().padStart(8, '0')}`, GAME_W / 2, GAME_H / 2 + 20); if (frameCount % 60 < 40) { ctx.fillStyle = '#ffeb3b'; ctx.font = '16px monospace'; ctx.fillText('PRESS ENTER TO CONTINUE', GAME_W / 2, GAME_H / 2 + 70); } ctx.restore(); } function drawWin() { ctx.fillStyle = 'rgba(0,0,0,0.7)'; ctx.fillRect(0, 0, GAME_W, GAME_H); ctx.save(); ctx.textAlign = 'center'; ctx.fillStyle = '#4caf50'; ctx.font = 'bold 48px monospace'; ctx.fillText('MISSION COMPLETE!', GAME_W / 2, GAME_H / 2 - 40); ctx.fillStyle = '#ffeb3b'; ctx.font = 'bold 24px monospace'; ctx.fillText(`SCORE: ${score.toString().padStart(8, '0')}`, GAME_W / 2, GAME_H / 2 + 10); ctx.fillStyle = '#fff'; ctx.font = '16px monospace'; ctx.fillText('THE ALIEN CORE HAS BEEN DESTROYED!', GAME_W / 2, GAME_H / 2 + 50); if (frameCount % 60 < 40) { ctx.fillStyle = '#90a4ae'; ctx.font = '14px monospace'; ctx.fillText('PRESS ENTER TO PLAY AGAIN', GAME_W / 2, GAME_H / 2 + 90); } ctx.restore(); } // --- Update Functions --- function updatePlayer() { if (!player.alive) { player.respawnTimer--; if (player.respawnTimer <= 0) { if (lives > 0) { player.alive = true; player.x = cameraX + 100; player.y = 200; player.vx = 0; player.vy = 0; player.invincible = 120; player.weapon = 'normal'; } else { gameState = 'gameover'; if (score > hiScore) { hiScore = score; localStorage.setItem('contraHi', hiScore); } } } return; } // Movement const speed = 3; if (keys['ArrowLeft'] || keys['KeyA']) { player.vx = -speed; player.dir = -1; } else if (keys['ArrowRight'] || keys['KeyD']) { player.vx = speed; player.dir = 1; } else { player.vx = 0; } // Prone player.prone = (keys['ArrowDown'] || keys['KeyS']) && player.onGround; if (player.prone) { player.h = 20; player.vx *= 0.5; } else { player.h = 40; } // Jump if ((keys['Space'] || keys['ArrowUp'] || keys['KeyW']) && player.onGround) { player.vy = -10; player.jumping = true; player.onGround = false; playSound('jump'); } // Gravity player.vy += GRAVITY; player.x += player.vx; player.y += player.vy; // Resolve collisions resolveCollision(player); // Bounds if (player.x < cameraX) player.x = cameraX; if (player.y > GAME_H + 50) { playerDie(); return; } // Shooting if (player.shootTimer > 0) player.shootTimer--; const cooldown = player.weapon === 'rapid' ? 4 : player.shootCooldown; if (keys['KeyZ'] && player.shootTimer <= 0) { shoot(); player.shootTimer = cooldown; } // Bomb (X key) if (keys['KeyX'] && !player._bombUsed) { player._bombUsed = true; // Screen clear bomb for (const e of enemies) { if (e.alive && Math.abs(e.x - player.x) < 400) { e.alive = false; score += 100; explosions.push({ x: e.x, y: e.y, radius: 30, timer: 20, maxTimer: 20 }); } } screenShake = 15; playSound('explosion'); } if (!keys['KeyX']) player._bombUsed = false; // Invincibility if (player.invincible > 0) player.invincible--; // Weapon timer if (player.weaponTimer > 0) { player.weaponTimer--; if (player.weaponTimer <= 0) player.weapon = 'normal'; } // Animation if (Math.abs(player.vx) > 0) { player.animTimer++; if (player.animTimer > 6) { player.animFrame++; player.animTimer = 0; } } // Camera const targetCam = player.x - GAME_W * 0.35; cameraX += (targetCam - cameraX) * 0.08; cameraX = Math.max(0, Math.min(LEVEL_W - GAME_W, cameraX)); // Boss trigger if (cameraX > LEVEL_W - GAME_W - 100 && !boss && !bossDefeated) { spawnBoss(); playSound('boss'); } } function shoot() { const bx = player.x + (player.dir > 0 ? player.w : -8); const by = player.y + (player.prone ? 26 : 14); let bvx = player.dir * 8; let bvy = 0; // Aim up if (keys['ArrowUp'] && !player.onGround) { bvy = -8; bvx = player.dir * 4; } else if (keys['ArrowUp'] && player.onGround && !player.prone) { bvy = -8; bvx = 0; } // Aim down (in air) if (keys['ArrowDown'] && !player.onGround) { bvy = 8; bvx = player.dir * 4; } if (player.weapon === 'spread') { playSound('spread'); for (let a = -0.3; a <= 0.3; a += 0.15) { playerBullets.push({ x: bx, y: by, w: 6, h: 6, vx: bvx * Math.cos(a) - bvy * Math.sin(a), vy: bvx * Math.sin(a) + bvy * Math.cos(a), type: 'spread', life: 60 }); } } else if (player.weapon === 'laser') { playSound('spread'); playerBullets.push({ x: bx, y: by, w: 30, h: 3, vx: bvx * 1.5, vy: bvy * 1.5, type: 'laser', life: 40 }); } else { playSound('shoot'); playerBullets.push({ x: bx, y: by, w: 8, h: 3, vx: bvx, vy: bvy, type: 'normal', life: 80 }); } player.shooting = true; setTimeout(() => player.shooting = false, 80); } function playerDie() { if (player.invincible > 0) return; player.alive = false; lives--; player.respawnTimer = 90; screenShake = 20; playSound('hit'); explosions.push({ x: player.x, y: player.y + 20, radius: 25, timer: 25, maxTimer: 25 }); for (let i = 0; i < 15; i++) { particles.push({ x: player.x + 14, y: player.y + 20, vx: (Math.random() - 0.5) * 6, vy: (Math.random() - 0.5) * 6 - 3, size: 2 + Math.random() * 3, color: ['#e53935','#ffeb3b','#ff9800'][Math.floor(Math.random()*3)], life: 30 + Math.random() * 20, maxLife: 50 }); } } function updateBullets() { // Player bullets for (let i = playerBullets.length - 1; i >= 0; i--) { const b = playerBullets[i]; b.x += b.vx; b.y += b.vy; b.life--; if (b.life <= 0 || b.x < cameraX - 50 || b.x > cameraX + GAME_W + 50 || b.y < -20 || b.y > GAME_H + 20) { playerBullets.splice(i, 1); continue; } // Hit enemies for (const e of enemies) { if (!e.alive) continue; if (rectCollide(b, e)) { e.hp--; if (e.hp <= 0) { e.alive = false; score += e.type === 'turret' ? 300 : e.type === 'runner' ? 200 : 100; explosions.push({ x: e.x + e.w/2, y: e.y + e.h/2, radius: 20, timer: 18, maxTimer: 18 }); playSound('explosion'); for (let j = 0; j < 8; j++) { particles.push({ x: e.x + e.w/2, y: e.y + e.h/2, vx: (Math.random()-0.5)*5, vy: (Math.random()-0.5)*5-2, size: 2+Math.random()*2, color: ['#ff6f00','#ffeb3b','#fff'][Math.floor(Math.random()*3)], life: 20+Math.random()*15, maxLife: 35 }); } } playerBullets.splice(i, 1); break; } } // Hit boss if (boss && boss.alive && rectCollide(b, boss)) { boss.hp--; if (boss.hp <= 0) { boss.alive = false; bossDefeated = true; score += 5000; screenShake = 30; playSound('explosion'); for (let k = 0; k < 30; k++) { explosions.push({ x: boss.x + Math.random() * boss.w, y: boss.y + Math.random() * boss.h, radius: 15 + Math.random() * 20, timer: 20 + Math.random() * 20, maxTimer: 40 }); } setTimeout(() => { gameState = 'win'; if (score > hiScore) { hiScore = score; localStorage.setItem('contraHi', hiScore); } }, 2000); } playerBullets.splice(i, 1); playSound('hit'); } // Hit platforms (walls only) for (const p of platforms) { if (p.type === 'wall' && rectCollide(b, p)) { playerBullets.splice(i, 1); break; } } } // Enemy bullets for (let i = enemyBullets.length - 1; i >= 0; i--) { const b = enemyBullets[i]; b.x += b.vx; b.y += b.vy; b.life--; if (b.life <= 0 || b.x < cameraX - 100 || b.x > cameraX + GAME_W + 100) { enemyBullets.splice(i, 1); continue; } // Hit player if (player.alive && rectCollide({ x: b.x, y: b.y, w: 6, h: 6 }, player)) { playerDie(); enemyBullets.splice(i, 1); } } } function updateEnemies() { for (const e of enemies) { if (!e.alive) continue; const dx = player.x - e.x; const dist = Math.abs(dx); if (e.type === 'soldier') { // AI if (dist < 350 && player.alive) { e.dir = dx > 0 ? 1 : -1; e.state = dist < 250 ? 'shoot' : 'chase'; } else { e.state = 'patrol'; } if (e.state === 'patrol') { e.vx = e.dir * 0.8; if (e.x <= e.patrol) e.dir = 1; if (e.x >= e.patrolMax) e.dir = -1; } else if (e.state === 'chase') { e.vx = e.dir * 1.5; } else { e.vx = 0; e.shootTimer--; if (e.shootTimer <= 0 && dist < 400) { e.shootTimer = 60 + Math.random() * 40; const angle = Math.atan2(player.y - e.y, player.x - e.x); enemyBullets.push({ x: e.x + 12, y: e.y + 14, vx: Math.cos(angle) * 3, vy: Math.sin(angle) * 3, life: 120 }); } } e.vy += GRAVITY; e.x += e.vx; e.y += e.vy; resolveCollision(e); e.animFrame++; // Touch damage if (player.alive && rectCollide(player, e)) playerDie(); } else if (e.type === 'turret') { if (player.alive) { e.angle = Math.atan2(player.y - e.y, player.x - e.x); e.dir = dx > 0 ? 1 : -1; } e.shootTimer--; if (e.shootTimer <= 0 && dist < 500) { e.shootTimer = 80; enemyBullets.push({ x: e.x + 16 + Math.cos(e.angle) * 24, y: e.y + 14 + Math.sin(e.angle) * 24, vx: Math.cos(e.angle) * 4, vy: Math.sin(e.angle) * 4, life: 100 }); } } else if (e.type === 'runner') { if (dist < 500 && player.alive) { e.dir = dx > 0 ? 1 : -1; e.vx = e.dir * 3.5; } e.vy += GRAVITY; e.x += e.vx; e.y += e.vy; resolveCollision(e); e.animFrame++; if (player.alive && rectCollide(player, e)) playerDie(); } } } function updateBoss() { if (!boss || !boss.alive) return; boss.shootTimer--; boss.moveTimer++; // Movement boss.y = GAME_H - 200 + Math.sin(boss.moveTimer * 0.02) * 40; // Attack patterns if (boss.shootTimer <= 0) { boss.phase = (boss.phase + 1) % 3; if (boss.phase === 0) { // Spread shot for (let a = -0.6; a <= 0.6; a += 0.2) { enemyBullets.push({ x: boss.x + 20, y: boss.y + boss.h / 2, vx: Math.cos(a + Math.PI) * 4, vy: Math.sin(a + Math.PI) * 4, life: 150 }); } boss.shootTimer = 40; } else if (boss.phase === 1) { // Aimed shot const angle = Math.atan2(player.y - boss.y - boss.h/2, player.x - boss.x); for (let i = 0; i < 3; i++) { setTimeout(() => { if (boss && boss.alive) { enemyBullets.push({ x: boss.x + 20, y: boss.y + boss.h / 2, vx: Math.cos(angle) * 5, vy: Math.sin(angle) * 5, life: 120 }); } }, i * 100); } boss.shootTimer = 60; } else { // Rain of bullets for (let i = 0; i < 5; i++) { enemyBullets.push({ x: boss.x + Math.random() * boss.w, y: boss.y + boss.h, vx: (Math.random() - 0.5) * 3, vy: 2 + Math.random() * 3, life: 120 }); } boss.shootTimer = 50; } playSound('shoot'); } // Touch damage if (player.alive && rectCollide(player, boss)) playerDie(); } function updatePowerups() { for (const p of powerups) { if (!p.alive) continue; if (player.alive && rectCollide(player, p)) { p.alive = false; playSound('powerup'); score += 500; switch (p.type) { case 'spread': player.weapon = 'spread'; player.weaponTimer = 600; break; case 'rapid': player.weapon = 'rapid'; player.weaponTimer = 600; break; case 'laser': player.weapon = 'laser'; player.weaponTimer = 600; break; case 'life': lives = Math.min(lives + 1, 9); break; case 'shield': player.invincible = 300; break; } for (let i = 0; i < 10; i++) { particles.push({ x: p.x + 12, y: p.y + 12, vx: (Math.random()-0.5)*4, vy: (Math.random()-0.5)*4, size: 2+Math.random()*2, color: '#ffeb3b', life: 20+Math.random()*10, maxLife: 30 }); } } } } // --- Game Init --- function initGame() { score = 0; lives = 3; cameraX = 0; bossDefeated = false; boss = null; playerBullets = []; enemyBullets = []; explosions = []; particles = []; player.x = 100; player.y = 300; player.vx = 0; player.vy = 0; player.alive = true; player.invincible = 60; player.weapon = 'normal'; player.weaponTimer = 0; player.dir = 1; player.prone = false; generateLevel(); spawnEnemies(); } // --- Main Loop --- function gameLoop() { frameCount++; if (gameState === 'title') { drawTitle(); if (keys['Enter'] || keys['Space']) { gameState = 'playing'; initGame(); ensureAudio(); } } else if (gameState === 'playing') { // Screen shake ctx.save(); if (screenShake > 0) { ctx.translate( (Math.random() - 0.5) * screenShake, (Math.random() - 0.5) * screenShake ); screenShake--; } drawBackground(); drawPlatforms(); drawPowerups(); updatePlayer(); updateEnemies(); updateBoss(); updateBullets(); updatePowerups(); // Draw enemies for (const e of enemies) { if (!e.alive) continue; const sx = e.x - cameraX; if (sx < -50 || sx > GAME_W + 50) continue; if (e.type === 'soldier') drawSoldier(e); else if (e.type === 'turret') drawTurret(e); else if (e.type === 'runner') drawRunner(e); } drawBoss(boss); drawBullets(); drawExplosions(); drawParticles(); // Draw player if (player.alive) { if (player.invincible > 0 && frameCount % 4 < 2) { // Flash when invincible } else { drawPixelChar(player.x, player.y, player.dir, player.animFrame, player.prone, player.shooting); } } drawHUD(); ctx.restore(); } else if (gameState === 'gameover') { drawBackground(); drawPlatforms(); drawGameOver(); if (keys['Enter']) { gameState = 'title'; keys['Enter'] = false; } } else if (gameState === 'win') { drawBackground(); drawPlatforms(); drawWin(); if (keys['Enter']) { gameState = 'title'; keys['Enter'] = false; } } requestAnimationFrame(gameLoop); } // --- Start --- gameLoop(); </script> </body> </html>