网页版魂斗罗游戏，梦回童年！

旺仔 2026/7/3 14:01:14 网站源码

想起小时候玩的一款游戏，那时候还是游戏机玩的，魂斗罗，真的那时候玩的超级有意思，每天放学自己玩。
试着写了一版本地运行的纯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>

本站所发布的全部内容来源于互联网搬运，仅限于小范围内传播学习和文献参考，

请在下载后24小时内删除！如果有侵权之处请第一时间联系我们删除。敬请谅解!

任何人不得倒卖、行骗、传播、严禁用于商业用途！

请遵循相关法律法规，本站一切资源不代表本站立场

E-mail：aishoujizy@qq.com