国民党军僵尸 - 扑咬动画

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<title>国民党军僵尸 - 扑咬动画</title>
<style>
  body { margin: 0; background: #1a1a2e; overflow: hidden; font-family: 'Microsoft YaHei', sans-serif; touch-action: none; }
  canvas { display: block; background: linear-gradient(180deg, #0f1a1a 0%, #1a2a2a 100%); }
  .info { position: absolute; top: 10px; left: 50%; transform: translateX(-50%); color: #8A9A7A; font-size: 12px; letter-spacing: 2px; text-shadow: 0 0 10px rgba(138, 154, 122, 0.8); pointer-events: none; z-index: 10; }
</style>
</head>
<body>
<div class="info">★ 国民党军僵尸 · 扑咬动画测试 ★</div>
<canvas id="game"></canvas>

<script>
const canvas = document.getElementById('game');
const ctx = canvas.getContext('2d');

let W = window.innerWidth;
let H = window.innerHeight;
canvas.width = W;
canvas.height = H;

window.addEventListener('resize', () => {
  W = window.innerWidth; H = window.innerHeight;
  canvas.width = W; canvas.height = H;
});

// ========== 僵尸配色 ==========
const Z = {
  uniform:    '#5A6B4A', uniformDark:'#3D4A32', uniformLite:'#7A8B6A',
  skin:       '#7A8A6A', skinDark:   '#5A6A4A', skinRotten: '#4A5A3A',
  blood:      '#4A1A1A', bloodLite:  '#7A2A2A', bloodFresh: '#8A1A1A',
  bone:       '#E8E0D0', helmet:     '#4A4A4A', helmetDark: '#2A2A2A',
  helmetLite: '#6A6A6A', eye:        '#FF3333', eyeDark:    '#8A1A1A',
  strap:      '#6B5A3A', bind:       '#5A6A4A', shoe:       '#1A1A1A',
};

// ========== 尺寸 ==========
const S = { headW: 52, headH: 52, torsoW: 84, torsoH: 76, armW: 36, armH: 76, legW: 44, legH: 84 };

// ========== 游戏状态 ==========
const player = { worldX: 0, worldY: 0, facing: 1 };
const camera = { x: 0, y: 0, zoom: 1.0, isDragging: false, dragButton: 0, lastX: 0, lastY: 0 };

// 僵尸攻击状态机
let attackState = {
  isAttacking: false,
  startTime: 0,
  duration: 1000, // 整个扑咬动画时长 1000ms
  hasHit: false   // 是否已经造成过伤害（防止同一扑击多次判定）
};

function roundRect(ctx, x, y, w, h, r) { ctx.beginPath(); ctx.moveTo(x + r, y); ctx.lineTo(x + w - r, y); ctx.quadraticCurveTo(x + w, y, x + w, y + r); ctx.lineTo(x + w, y + h - r); ctx.quadraticCurveTo(x + w, y + h, x + w - r, y + h); ctx.lineTo(x + r, y + h); ctx.quadraticCurveTo(x, y + h, x, y + h - r); ctx.lineTo(x, y + r); ctx.quadraticCurveTo(x, y, x + r, y); ctx.closePath(); }

// 线性插值
function lerp(start, end, amt) { return (1 - amt) * start + amt * end; }
// 缓入缓出
function easeInOut(t) { return t < 0.5 ? 2 * t * t : -1 + (4 - 2 * t) * t; }

// =====================================================================
// 绘制僵尸部件
// =====================================================================
function drawZombieHead(ctx, x, y, rotation = 0) {
  ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
  const { headW, headH } = S; const headX = -headW / 2; const headY = -headH;

  ctx.fillStyle = Z.skinRotten; ctx.fillRect(-8, -8, 16, 8);
  ctx.fillStyle = Z.skin; roundRect(ctx, headX, headY, headW, headH, 6); ctx.fill();
  ctx.fillStyle = Z.skinDark; ctx.fillRect(headX, headY, 6, headH);
  ctx.fillStyle = Z.skinRotten; ctx.fillRect(headX + 6, headY + 2, headW - 12, 8);

  // 狰狞的眼睛
  ctx.fillStyle = '#1A1A1A'; ctx.fillRect(headX + 10, headY + 20, 9, 7);
  ctx.fillStyle = Z.eye; ctx.fillRect(headX + 12, headY + 22, 5, 3);
  ctx.fillStyle = Z.eyeDark; ctx.fillRect(headX + 12, headY + 22, 2, 1);
  ctx.fillStyle = Z.blood; ctx.fillRect(headX + headW - 19, headY + 19, 9, 8);
  ctx.fillStyle = Z.bloodFresh; ctx.fillRect(headX + headW - 18, headY + 21, 7, 4);
  ctx.fillStyle = '#1A1A1A'; ctx.fillRect(headX + headW - 17, headY + 22, 5, 2);

  // 扭曲的嘴
  ctx.fillStyle = Z.blood; 
  ctx.beginPath(); ctx.moveTo(headX + 12, headY + 36); ctx.lineTo(headX + 20, headY + 33);
  ctx.lineTo(headX + 28, headY + 38); ctx.lineTo(headX + 36, headY + 34);
  ctx.lineTo(headX + 40, headY + 40); ctx.lineTo(headX + 30, headY + 43);
  ctx.lineTo(headX + 18, headY + 42); ctx.closePath(); ctx.fill();
  
  // 牙齿
  ctx.fillStyle = Z.bone;
  ctx.fillRect(headX + 18, headY + 36, 4, 4); ctx.fillRect(headX + 24, headY + 37, 4, 3); ctx.fillRect(headX + 30, headY + 36, 4, 4);
  
  // 血迹
  ctx.fillStyle = Z.bloodFresh; ctx.beginPath(); ctx.arc(headX + 10, headY + 38, 4, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = 'rgba(74, 26, 26, 0.6)'; ctx.beginPath(); ctx.arc(headX + 8, headY + 28, 6, 0, Math.PI * 2); ctx.fill();

  // 钢盔
  const helmetW = headW + 20; const helmetH = 30; const helmetX = -helmetW / 2; const helmetY = headY - helmetH + 6;
  ctx.fillStyle = Z.helmet;
  ctx.beginPath(); ctx.moveTo(helmetX + 10, helmetY);
  ctx.quadraticCurveTo(helmetX + helmetW / 2, helmetY - 8, helmetX + helmetW - 10, helmetY);
  ctx.quadraticCurveTo(helmetX + helmetW, helmetY + 10, helmetX + helmetW - 6, helmetY + helmetH);
  ctx.lineTo(helmetX + 6, helmetY + helmetH);
  ctx.quadraticCurveTo(helmetX, helmetY + 10, helmetX + 10, helmetY); ctx.closePath(); ctx.fill();

  ctx.fillStyle = Z.helmetDark;
  ctx.beginPath(); ctx.moveTo(helmetX, helmetY + 8); ctx.lineTo(helmetX + 14, helmetY + 2);
  ctx.lineTo(helmetX + 14, helmetY + helmetH); ctx.lineTo(helmetX + 4, helmetY + helmetH); ctx.closePath(); ctx.fill();

  ctx.fillStyle = Z.helmetLite;
  ctx.beginPath(); ctx.moveTo(helmetX + 18, helmetY + 2);
  ctx.quadraticCurveTo(helmetX + helmetW / 2, helmetY - 6, helmetX + helmetW - 18, helmetY + 2);
  ctx.lineTo(helmetX + helmetW - 22, helmetY + 6);
  ctx.quadraticCurveTo(helmetX + helmetW / 2, helmetY - 2, helmetX + 22, helmetY + 6); ctx.closePath(); ctx.fill();

  ctx.fillStyle = '#2A2A2A';
  ctx.beginPath(); ctx.moveTo(helmetX + 6, helmetY + helmetH - 4); ctx.lineTo(helmetX + helmetW - 6, helmetY + helmetH - 4);
  ctx.lineTo(helmetX + helmetW - 4, helmetY + helmetH); ctx.lineTo(helmetX + 4, helmetY + helmetH); ctx.closePath(); ctx.fill();

  ctx.fillStyle = '#1A1A1A'; ctx.beginPath(); ctx.arc(helmetX + helmetW - 15, helmetY + 12, 5, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = '#333333'; ctx.beginPath(); ctx.arc(helmetX + helmetW - 16, helmetY + 11, 2, 0, Math.PI * 2); ctx.fill();
  ctx.fillStyle = Z.blood; ctx.fillRect(helmetX + helmetW - 17, helmetY + 14, 3, 8);

  ctx.restore();
}

function drawZombieTorso(ctx, x, y, rotation = 0) {
  ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
  const { torsoW, torsoH } = S; const torsoX = -torsoW / 2; const torsoY = -torsoH;
  ctx.fillStyle = Z.uniform; roundRect(ctx, torsoX, torsoY, torsoW, torsoH, 4); ctx.fill();
  ctx.fillStyle = Z.uniformDark; ctx.fillRect(torsoX, torsoY, 8, torsoH);
  ctx.fillStyle = Z.uniformLite; ctx.fillRect(torsoX + torsoW - 6, torsoY, 6, torsoH);
  ctx.fillStyle = '#4A5A6A'; ctx.fillRect(torsoX + 12, torsoY + 2, 14, 8); ctx.fillRect(torsoX + torsoW - 26, torsoY + 2, 14, 8);
  ctx.strokeStyle = Z.uniformDark; ctx.lineWidth = 1.5; ctx.beginPath(); ctx.moveTo(0, torsoY + 12); ctx.lineTo(0, torsoY + torsoH - 4); ctx.stroke();
  const beltY = torsoY + torsoH * 0.55; ctx.fillStyle = '#2A1A0A'; ctx.fillRect(torsoX, beltY, torsoW, 7);
  ctx.fillStyle = '#5A4A3A'; ctx.fillRect(-5, beltY + 1, 10, 5);
  ctx.strokeStyle = Z.strap; ctx.lineWidth = 6;
  ctx.beginPath(); ctx.moveTo(torsoX + 8, torsoY + 4); ctx.lineTo(torsoX + torsoW - 8, beltY + 3); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(torsoX + torsoW - 8, torsoY + 4); ctx.lineTo(torsoX + 8, beltY + 3); ctx.stroke();
  ctx.fillStyle = '#5A4A3A';
  ctx.fillRect(torsoX + 20, torsoY + 20, 10, 12); ctx.fillRect(torsoX + 20, torsoY + 36, 10, 12);
  ctx.fillRect(torsoX + torsoW - 30, torsoY + 20, 10, 12); ctx.fillRect(torsoX + torsoW - 30, torsoY + 36, 10, 12);
  ctx.fillStyle = Z.blood; ctx.beginPath();
  ctx.moveTo(torsoX + torsoW - 25, torsoY + 15); ctx.lineTo(torsoX + torsoW - 15, torsoY + 20);
  ctx.lineTo(torsoX + torsoW - 20, torsoY + 30); ctx.closePath(); ctx.fill();
  ctx.restore();
}

function drawZombieArm(ctx, x, y, rotation = 0, side = 'left') {
  ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
  const { armW, armH } = S; const armX = -armW / 2;
  ctx.fillStyle = Z.uniform; roundRect(ctx, armX, 0, armW, armH - 12, 3); ctx.fill();
  if (side === 'left') { ctx.fillStyle = Z.uniformDark; ctx.fillRect(armX, 0, 5, armH - 12); }
  else { ctx.fillStyle = Z.uniformLite; ctx.fillRect(armX + armW - 5, 0, 5, armH - 12); }
  ctx.fillStyle = Z.skin; roundRect(ctx, armX + 4, armH - 14, armW - 8, 14, 3); ctx.fill();
  ctx.strokeStyle = Z.skinDark; ctx.lineWidth = 2;
  for (let i = 0; i < 3; i++) { ctx.beginPath(); ctx.moveTo(armX + 8 + i * 6, armH); ctx.lineTo(armX + 8 + i * 6, armH + 8); ctx.stroke(); }
  ctx.fillStyle = 'rgba(74, 26, 26, 0.5)'; ctx.beginPath(); ctx.arc(armX + armW / 2, armH * 0.6, 8, 0, Math.PI * 2); ctx.fill();
  ctx.restore();
}

function drawZombieLeg(ctx, x, y, rotation = 0, side = 'left') {
  ctx.save(); ctx.translate(x, y); ctx.rotate(rotation);
  const { legW, legH } = S; const legX = -legW / 2;
  ctx.fillStyle = Z.uniform; roundRect(ctx, legX, 0, legW, legH * 0.55, 3); ctx.fill();
  ctx.fillStyle = Z.uniformDark; ctx.fillRect(legX, 0, 6, legH * 0.55);
  const bindY = legH * 0.5; const bindH = legH * 0.42;
  ctx.fillStyle = Z.bind; roundRect(ctx, legX - 1, bindY, legW + 2, bindH, 2); ctx.fill();
  ctx.strokeStyle = '#3A4A2A'; ctx.lineWidth = 1.5;
  for (let i = 0; i < 6; i++) { const yy = bindY + 2 + i * (bindH - 4) / 5; ctx.beginPath(); ctx.moveTo(legX - 1, yy); ctx.lineTo(legX + legW + 1, yy); ctx.stroke(); }
  const shoeY = bindY + bindH; const shoeH = legH * 0.08;
  ctx.fillStyle = Z.shoe; roundRect(ctx, legX - 3, shoeY, legW + 6, shoeH, 3); ctx.fill();
  ctx.restore();
}

// =====================================================================
// 核心：带有扑咬攻击逻辑的绘制函数
// =====================================================================
function drawZombie(ctx, centerX, groundY, scale = 1, anim = {}) {
  // 计算扑咬进度 (0 到 1)
  let atkProgress = 0;
  if (attackState.isAttacking) {
    atkProgress = Math.min(1, (performance.now() - attackState.startTime) / attackState.duration);
  }

  // === 根据进度计算姿态参数 ===
  let lungeOffset = 0;      // 整体向前位移
  let bodyPitch = 0;        // 躯干前倾角度
  let headPitch = 0;        // 头部前倾/下压角度
  let armForward = 0;       // 手臂前伸幅度
  let legSplit = 0;         // 腿部劈叉幅度
  let bob = anim.bob || 0;

  if (attackState.isAttacking) {
    // 阶段1：蓄力 (0 - 0.3) -> 身体后仰，下沉
    if (atkProgress < 0.3) {
      const t = atkProgress / 0.3;
      lungeOffset = lerp(0, -15, t); 
      bodyPitch = lerp(0, -0.3, t); // 后仰
      headPitch = lerp(0, 0.2, t);  // 头微抬
      armForward = lerp(0, -0.3, t); // 手臂后拉
      legSplit = lerp(0, 15, t);     // 腿弯曲
      bob = lerp(bob, -10, t);       // 整体下沉
    } 
    // 阶段2：扑击 (0.3 - 0.5) -> 猛地向前扑
    else if (atkProgress < 0.5) {
      const t = (atkProgress - 0.3) / 0.2;
      lungeOffset = lerp(-15, 60, easeInOut(t)); 
      bodyPitch = lerp(-0.3, 0.5, easeInOut(t)); // 前倾
      headPitch = lerp(0.2, 0.4, easeInOut(t));  // 头前伸
      armForward = lerp(-0.3, 1.5, easeInOut(t)); // 手臂猛伸
      legSplit = lerp(15, -10, easeInOut(t));     // 腿蹬直
      bob = lerp(-10, 5, easeInOut(t));
    } 
    // 阶段3：撕咬 (0.5 - 0.7) -> 头部下压咬合
    else if (atkProgress < 0.7) {
      const t = (atkProgress - 0.5) / 0.2;
      lungeOffset = lerp(60, 65, t); 
      bodyPitch = lerp(0.5, 0.6, t); 
      headPitch = lerp(0.4, -0.5, t); // 头部猛烈下压！
      armForward = lerp(1.5, 1.8, t);
      legSplit = lerp(-10, -5, t);
      bob = lerp(5, 0, t);
    } 
    // 阶段4：恢复 (0.7 - 1.0) -> 直起身子
    else {
      const t = (atkProgress - 0.7) / 0.3;
      lungeOffset = lerp(65, 0, easeInOut(t));
      bodyPitch = lerp(0.6, 0, easeInOut(t));
      headPitch = lerp(-0.5, 0, easeInOut(t));
      armForward = lerp(1.8, 0, easeInOut(t));
      legSplit = lerp(-5, 0, easeInOut(t));
      bob = lerp(0, anim.bob || 0, easeInOut(t));
    }
  } else {
    // 非攻击状态下，使用正常的行走动画参数
    lungeOffset = 0; bodyPitch = 0; headPitch = 0; armForward = 0; legSplit = 0;
  }

  // 如果扑击结束，重置状态
  if (attackState.isAttacking && atkProgress >= 1) {
    attackState.isAttacking = false;
  }

  // ===== 开始绘制 =====
  const shoulderY = -S.torsoH; const headY = shoulderY;
  const legSpacing = S.torsoW / 4 - 4; const armSpacing = S.torsoW / 2 + S.armW / 2 - 2;

  ctx.save();
  ctx.translate(centerX + lungeOffset * scale, groundY + bob);
  ctx.scale(scale, scale);

  // 应用躯干前倾（绕髋部旋转）
  ctx.rotate(bodyPitch);

  // 绘制腿（带劈叉参数）
  drawZombieLeg(ctx, -legSpacing, 0, (anim.leftLegRot || 0) + legSplit * 0.05, 'left');
  drawZombieLeg(ctx, legSpacing, 0, (anim.rightLegRot || 0) - legSplit * 0.05, 'right');

  // 绘制躯干（不加额外旋转，因为已经整体旋转了）
  drawZombieTorso(ctx, 0, 0, 0);

  // 绘制手臂（带前伸参数）
  drawZombieArm(ctx, armSpacing, shoulderY, (anim.rightArmRot || 0) - armForward, 'right');

  // 绘制头部（带下压参数，且绕脖子旋转）
  ctx.save();
  ctx.translate(0, headY);
  ctx.rotate(headPitch);
  ctx.translate(0, -headY);
  drawZombieHead(ctx, 0, headY, anim.headRot || 0);
  ctx.restore();

  // 绘制左臂（盖在前面）
  drawZombieArm(ctx, -armSpacing, shoulderY, (anim.leftArmRot || 0) - armForward, 'left');

  ctx.restore();
}

// =====================================================================
// 主循环
// =====================================================================
let time = 0;
let lastTime = performance.now();

function animate(now) {
  const dt = (now - lastTime) / 1000; lastTime = now;
  if (dt > 0.1) return;
  
  ctx.clearRect(0, 0, W, H);
  time += 0.02;

  // 行走相位
  const phase = time * 3.5;
  const leftLegRot = Math.sin(phase) * 0.35;
  const rightLegRot = Math.sin(phase - Math.PI * 0.7) * 0.25 - 0.1;
  const leftArmRot = -1.2 + Math.sin(phase) * 0.1;
  const rightArmRot = -1.0 + Math.sin(phase - Math.PI * 0.7) * 0.1;
  const bob = Math.abs(Math.sin(phase)) * 4.0 + Math.sin(phase * 2) * 1.5;
  const headRot = Math.sin(phase * 3) * 0.08 + Math.sin(time * 0.5) * 0.04;

  const anim = { bob, headRot, leftArmRot, rightArmRot, leftLegRot, rightLegRot };
  const groundY = H / 2 + 100;
  const cx = W / 2;
  const scale = 1.6;

  // 环境
  ctx.fillStyle = '#1A2A1A'; ctx.fillRect(0, groundY, W, H - groundY);
  ctx.fillStyle = 'rgba(74, 26, 26, 0.2)';
  ctx.beginPath(); ctx.ellipse(cx - 50, groundY + 10, 40, 8, 0, 0, Math.PI * 2); ctx.fill();
  ctx.beginPath(); ctx.ellipse(cx + 60, groundY + 20, 30, 6, 0, 0, Math.PI * 2); ctx.fill();

  const shadowScale = 1 - bob * 0.015;
  ctx.fillStyle = 'rgba(0, 0, 0, 0.5)';
  ctx.beginPath(); ctx.ellipse(cx, groundY + 5, 75 * shadowScale, 12 * shadowScale, 0, 0, Math.PI * 2); ctx.fill();

  // 应用摄像机（保持拖动查看功能）
  ctx.save();
  ctx.translate(camera.x, camera.y); ctx.rotate(camera.rotation);
  ctx.scale(camera.zoom, camera.zoom); ctx.translate(-camera.x, -camera.y);

  // 绘制僵尸
  drawZombie(ctx, cx, groundY, scale, anim);

  ctx.restore();

  // UI 信息
  ctx.fillStyle = 'rgba(255, 255, 255, 0.5)'; ctx.font = '12px sans-serif';
  ctx.fillText(`点击画面 / 按空格键 触发扑咬 | 缩放: ${camera.zoom.toFixed(2)}x`, 20, 30);

  requestAnimationFrame(animate);
}

// =====================================================================
// 交互事件
// =====================================================================
function triggerAttack() {
  if (attackState.isAttacking) return;
  attackState.isAttacking = true;
  attackState.startTime = performance.now();
}

// 触摸/点击屏幕触发
window.addEventListener('touchstart', (e) => {
  if (e.touches.length > 1) return; // 多指触摸不触发
  triggerAttack();
}, { passive: true });
window.addEventListener('mousedown', (e) => {
  if (e.button === 0) triggerAttack();
});
// 空格键触发
window.addEventListener('keydown', (e) => {
  if (e.code === 'Space') { e.preventDefault(); triggerAttack(); }
});

// 摄像机拖拽（保留，方便查看模型细节）
canvas.addEventListener('contextmenu', e => e.preventDefault());
canvas.addEventListener('mousedown', (e) => {
  camera.isDragging = true; camera.dragButton = e.button; camera.lastX = e.clientX; camera.lastY = e.clientY;
});
canvas.addEventListener('mousemove', (e) => {
  if (!camera.isDragging) return;
  const dx = e.clientX - camera.lastX; const dy = e.clientY - camera.lastY;
  if (camera.dragButton === 0) { camera.x += dx; camera.y += dy; }
  else if (camera.dragButton === 2) { camera.rotation += dx * 0.005; }
  camera.lastX = e.clientX; camera.lastY = e.clientY;
});
canvas.addEventListener('mouseup', () => { camera.isDragging = false; });
canvas.addEventListener('mouseleave', () => { camera.isDragging = false; });
canvas.addEventListener('wheel', (e) => { e.preventDefault(); camera.zoom *= e.deltaY > 0 ? 0.9 : 1.1; camera.zoom = Math.max(0.2, Math.min(5.0, camera.zoom)); }, { passive: false });

// 启动
requestAnimationFrame(animate);
</script>
</body>
</html>