火柴人机械元素组装全攻略

嗨！我是你的火柴人机械组装向导。今天咱们来聊聊怎么把那些简单的火柴人变成酷炫的机械战士——从最基本的关节开始，一路升级到复杂的战甲设计，最后还会教你怎么排查那些让人头疼的故障。

别担心，我会用简单易懂的方式讲解，如果你是个刚入门的新手也没关系，一步步来就好。如果你已经有经验了，也能在这里找到一些进阶的技巧和灵感。

---

一、基础知识：火柴人为什么需要机械元素？

先说说背景。传统的火柴人动画或者游戏中的角色，通常就是简单的线条和圆点——一个圆圈当脑袋，几条线当四肢。这种设计简单可爱，但有个明显的缺点：太简陋了，表现力有限。

加入机械元素后，火柴人可以有：

• 更丰富的动作表现：机械关节可以让动作更加真实
• 视觉冲击力：金属质感、齿轮转动、液压杆伸缩，这些都很有看头
• 角色个性化：不同的机械部件可以塑造不同的角色风格

想象一下：一个普通的火柴人在战斗，vs 一个全身装有机械外骨骼的火柴人——后者显然更酷，对吧？

---

二、搭建基础关节系统

2.1 理解人体关节与机械关节的对应关系

要设计机械火柴人，首先得了解人体关节的结构，因为机械关节的布局通常要模仿人体的活动方式。

人体关节	活动范围	对应机械结构
肩关节	球窝关节，多方向	球铰 / 万向节
肘关节	单轴旋转	单轴铰链
髋关节	球窝关节	球铰
膝关节	单轴旋转（略有限制）	单轴铰链 + 限位
腕关节	多方向微动	多轴微型关节
踝关节	单轴+微俯仰	复合铰链

2.2 代码实现：基础关节系统

如果你在用编程实现火柴人动画，以下是一个基础的关节系统示例。我会用 JavaScript 配合 HTML5 Canvas 来演示：

// 火柴人机械关节系统基础实现
class MechanicalStickman {
  constructor(x, y) {
    this.x = x;
    this.y = y;
    
    // 关节定义：名称、相对位置、旋转角度、是否可动
    this.joints = {
      head:     { x: 0,    y: -60, angle: 0,  type: 'ball',   radius: 15 },
      shoulder: { x: -30,  y: -40, angle: 0,  type: 'ball',   radius: 8  },
      elbow:    { x: -40,  y: -10, angle: 0,  type: 'hinge',  radius: 6  },
      hand:     { x: -50,  y: 10,  angle: 0,  type: 'ball',   radius: 5  },
      hip:      { x: -20,  y: 20,  angle: 0,  type: 'ball',   radius: 8  },
      knee:     { x: -25,  y: 60,  angle: 0,  type: 'hinge',  radius: 6  },
      foot:     { x: -30,  y: 100, angle: 0,  type: 'hinge',  radius: 5  },
      
      // 右侧对称关节
      shoulderR: { x: 30,  y: -40, angle: 0,  type: 'ball',   radius: 8  },
      elbowR:    { x: 40,  y: -10, angle: 0,  type: 'hinge',  radius: 6  },
      handR:     { x: 50,  y: 10,  angle: 0,  type: 'ball',   radius: 5  },
      hipR:      { x: 20,  y: 20,  angle: 0,  type: 'ball',   radius: 8  },
      kneeR:     { x: 25,  y: 60,  angle: 0,  type: 'hinge',  radius: 6  },
      footR:     { x: 30,  y: 100, angle: 0,  type: 'hinge',  radius: 5  }
    };
    
    // 骨骼连接关系
    this.bones = [
      ['head', 'shoulder'],
      ['shoulder', 'elbow'],
      ['elbow', 'hand'],
      ['head', 'shoulderR'],
      ['shoulderR', 'elbowR'],
      ['elbowR', 'handR'],
      ['shoulder', 'hip'],
      ['hip', 'knee'],
      ['knee', 'foot'],
      ['shoulderR', 'hipR'],
      ['hipR', 'kneeR'],
      ['kneeR', 'footR'],
      ['hip', 'hipR']
    ];
  }
  
  // 绘制关节
  drawJoint(ctx, joint, offsetX, offsetY) {
    const x = offsetX + joint.x;
    const y = offsetY + joint.y;
    
    // 绘制机械关节效果
    ctx.save();
    ctx.translate(x, y);
    ctx.rotate(joint.angle);
    
    // 关节外壳（机械感）
    ctx.beginPath();
    ctx.arc(0, 0, joint.radius, 0, Math.PI * 2);
    ctx.fillStyle = '#4a4a4a';
    ctx.fill();
    ctx.strokeStyle = '#666';
    ctx.lineWidth = 2;
    ctx.stroke();
    
    // 关节中心（机械核心）
    ctx.beginPath();
    ctx.arc(0, 0, joint.radius * 0.4, 0, Math.PI * 2);
    ctx.fillStyle = '#ff6b35';  // 橙色高光，像能量核心
    ctx.fill();
    
    ctx.restore();
  }
  
  // 绘制骨骼
  drawBone(ctx, startJoint, endJoint, offsetX, offsetY) {
    const startX = offsetX + startJoint.x;
    const startY = offsetY + startJoint.y;
    const endX = offsetX + endJoint.x;
    const endY = offsetY + endJoint.y;
    
    ctx.beginPath();
    ctx.moveTo(startX, startY);
    ctx.lineTo(endX, endY);
    ctx.strokeStyle = '#888';
    ctx.lineWidth = 4;
    ctx.stroke();
    
    // 添加机械细节——中间的接缝线
    const midX = (startX + endX) / 2;
    const midY = (startY + endY) / 2;
    ctx.beginPath();
    ctx.arc(midX, midY, 3, 0, Math.PI * 2);
    ctx.fillStyle = '#555';
    ctx.fill();
  }
  
  // 主绘制方法
  draw(ctx, offsetX, offsetY) {
    ctx.save();
    
    // 绘制骨骼
    this.bones.forEach(([start, end]) => {
      this.drawBone(ctx, this.joints[start], this.joints[end], offsetX, offsetY);
    });
    
    // 绘制关节
    Object.values(this.joints).forEach(joint => {
      this.drawJoint(ctx, joint, offsetX, offsetY);
    });
    
    ctx.restore();
  }
}

// 使用示例
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const stickman = new MechanicalStickman(0, 0);

function animate() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  stickman.draw(ctx, canvas.width / 2, canvas.height / 2);
  requestAnimationFrame(animate);
}
animate();

这段代码创建了一个基本的机械火柴人骨架，包含头部、肩部、肘部、手部、髋部、膝部和足部等关键关节。每个关节都有机械感的外壳和发光的核心。

2.3 关节的旋转限制

真实的人体关节不可能360度自由旋转，机械关节也一样。我们需要给每个关节设置旋转限制：

// 关节旋转限制配置
const jointLimits = {
  shoulder: { min: -120, max: 45 },      // 肩膀：向前45°，向后120°
  elbow:    { min: -150, max: 0 },       // 肘部：只能向后弯
  hip:      { min: -90, max: 90 },       // 髋部：前后各90°
  knee:     { min: 0, max: 130 },        // 膝盖：只能向前弯，最多130°
  wrist:    { min: -45, max: 45 },       // 手腕：小幅摆动
  ankle:    { min: -30, max: 30 }        // 脚踝：小幅活动
};

// 应用旋转限制的函数
function clampRotation(jointName, angle) {
  const limits = jointLimits[jointName];
  if (!limits) return angle;  // 无限制则直接返回
  
  // 角度归一化到 -180 到 180
  let normalized = ((angle % 360) + 540) % 360 - 180;
  
  // 应用限制
  if (normalized > limits.max) normalized = limits.max;
  if (normalized < limits.min) normalized = limits.min;
  
  return normalized;
}

---

三、升级：添加机械外骨骼

3.1 什么是机械外骨骼？

机械外骨骼是包裹在火柴人身体外部的机械结构，类似于真实的Exoskeleton（外骨骼）。它的作用：

1. 增强力量：机械部件可以提供额外的动力
2. 提供保护：装甲板可以抵御攻击
3. 增加功能性：可以安装武器、推进器、传感器等
4. 改变外观：让火柴人看起来更酷、更有科技感

3.2 外骨骼设计原则

设计外骨骼时，有几个基本原则：

• 不要遮挡关节：外骨骼必须允许关节正常活动
• 重心要合理：太重的外骨骼会让火柴人行动笨拙
• 层次分明：内层是骨架，中层是肌肉/管线，外层是装甲
• 视觉统一：风格要一致，不要混搭太多不同风格的零件

3.3 外骨骼组件详解

以下是常见的外骨骼组件：

肩部装甲（Shoulder Pauldron）

• 保护肩关节
• 通常带有小型武器挂载点
• 设计风格：尖锐感（战斗型）vs 圆润感（探索型）

胸腔护甲（Thorax Plate）

• 保护躯干
• 可以集成生命体征监测系统
• 中心可以有能量核心

手臂护甲（Arm Plating）

• 前臂部分最重要，常有武器接口
• 上臂部分相对简单
• 肘部需要预留活动空间

腿部护甲（Leg Armor）

• 大腿部分：可以有辅助推进器
• 小腿部分：保护膝关节
• 足部：增强抓地力，可以有靴剑接口

头部组件（Helmet)

• 不仅仅是头盔，还可以集成传感器、通讯设备
• 面罩设计决定角色的”表情”

3.4 代码实现：完整的外骨骼系统

class MechanicalExoskeleton {
  constructor(baseStickman) {
    this.base = baseStickman;
    this.components = {};
    this.energyLevel = 100;
    this.weaponSystems = [];
  }
  
  // 添加肩部装甲
  addShoulderPad(side, style = 'combat') {
    this.components[`shoulder_${side}`] = {
      type: 'shoulder_pad',
      side: side,
      style: style,
      // combat风格：尖锐、厚重
      // scout风格：轻便、流线型
      dimensions: style === 'combat' 
        ? { width: 50, height: 35, depth: 20 }
        : { width: 35, height: 25, depth: 15 },
      color: '#2c3e50',
      highlightColor: '#e74c3c',
      mountedWeapons: [],
      rangeOfMotion: { pitch: 60, yaw: 45 }
    };
  }
  
  // 添加胸腔护甲
  addChestPlate(style = 'heavy') {
    this.components.chest = {
      type: 'chest_plate',
      style: style,
      // heavy: 重甲，防护高但机动性低
      // medium: 中型，平衡型
      // light: 轻甲，机动性高但防护低
      armorValue: style === 'heavy' ? 80 : style === 'medium' ? 50 : 30,
      speedMod: style === 'heavy' ? -0.3 : style === 'medium' ? 0 : 0.15,
      color: '#34495e',
      energyCore: {
        active: true,
        power: style === 'heavy' ? 1000 : 500,
        color: '#3498db'
      },
      vents: style === 'heavy' ? 6 : 4  // 散热片数量
    };
  }
  
  // 添加手臂护甲
  addArmArmor(side, style = 'standard') {
    this.components[`arm_${side}`] = {
      type: 'arm_armor',
      side: side,
      style: style,
      segments: [
        { name: 'upper', length: 30, radius: 12 },
        { name: 'forearm', length: 35, radius: 10 },
        { name: 'glove', length: 20, radius: 8 }
      ],
      color: '#4a6741',
      jointGaps: 3,  // 关节处的间隙（像素），确保活动空间
      mountedGadgets: []
    };
  }
  
  // 添加腿部护甲
  addLegArmor(side, style = 'standard') {
    this.components[`leg_${side}`] = {
      type: 'leg_armor',
      side: side,
      style: style,
      segments: [
        { name: 'thigh', length: 40, radius: 14, hasThruster: false },
        { name: 'calf', length: 45, radius: 12, hasBootSword: false },
        { name: 'boot', length: 25, radius: 10 }
      ],
      color: '#5d4e37',
      jointGaps: 4,
      strideLengthMod: style === 'heavy' ? 0.8 : 1.0
    };
  }
  
  // 添加头盔
  addHelmet(style = 'standard') {
    this.components.helmet = {
      type: 'helmet',
      style: style,
      // visor: 面罩样式
      // open: 半开放，能看到面部表情
      // full: 全封闭，完全机械感
      visorStyle: style === 'tactical' ? 'full' : 'open',
      sensors: style === 'tactical' ? 
        ['thermal', 'night_vision', 'targeting'] : 
        ['basic_detection'],
      commsRange: style === 'tactical' ? 500 : 100,
      color: '#2c3e50',
      accentColor: '#e74c3c'
    };
  }
  
  // 安装武器系统
  mountWeapon(side, weaponType) {
    const weapon = this.createWeapon(weaponType);
    this.components[`weapon_${side}`] = weapon;
    
    // 将武器添加到肩部或手臂的挂载点
    if (side === 'left' && this.components.shoulder_left) {
      this.components.shoulder_left.mountedWeapons.push(weapon);
    } else if (side === 'right' && this.components.shoulder_right) {
      this.components.shoulder_right.mountedWeapons.push(weapon);
    }
    
    this.weaponSystems.push(weapon);
  }
  
  // 创建不同类型的武器
  createWeapon(type) {
    const weapons = {
      blaster: {
        name: '等离子手炮',
        type: 'blaster',
        damage: 25,
        range: 300,
        fireRate: 0.5,  // 秒
        energyCost: 10,
        color: '#00ffff',
        barrelLength: 40,
        coolingTime: 2
      },
      sword: {
        name: '高频振动剑',
        type: 'sword',
        damage: 40,
        range: 60,
        fireRate: null,
        energyCost: 5,
        color: '#ff00ff',
        bladeLength: 50,
        activationSound: 'vrrrm'
      },
      cannon: {
        name: '肩载加农炮',
        type: 'cannon',
        damage: 80,
        range: 500,
        fireRate: 3,
        energyCost: 30,
        color: '#ff4500',
        barrelLength: 60,
        reloadTime: 4,
        cooldownTime: 5
      }
    };
    return weapons[type] || weapons.blaster;
  }
  
  // 获取整体外观预览
  getAppearance() {
    return {
      hasHelmet: !!this.components.helmet,
      hasChestPlate: !!this.components.chest,
      hasShoulderPads: !!(this.components.shoulder_left && this.components.shoulder_right),
      hasArmArmor: !!(this.components.arm_left && this.components.arm_right),
      hasLegArmor: !!(this.components.leg_left && this.components.leg_right),
      weapons: this.weaponSystems.map(w => w.name),
      totalArmor: this.calculateTotalArmor(),
      totalWeight: this.calculateTotalWeight(),
      mobility: this.calculateMobility()
    };
  }
  
  calculateTotalArmor() {
    let armor = 0;
    if (this.components.chest) armor += this.components.chest.armorValue;
    if (this.components.shoulder_left) armor += 15;
    if (this.components.shoulder_right) armor += 15;
    if (this.components.arm_left) armor += 20;
    if (this.components.arm_right) armor += 20;
    if (this.components.leg_left) armor += 25;
    if (this.components.leg_right) armor += 25;
    return armor;
  }
  
  calculateTotalWeight() {
    let weight = 0;
    Object.values(this.components).forEach(comp => {
      if (comp.type === 'chest_plate') weight += comp.style === 'heavy' ? 50 : comp.style === 'medium' ? 30 : 15;
      else if (comp.type.includes('armor')) weight += 20;
      else if (comp.type === 'helmet') weight += 10;
      else if (comp.type === 'weapon') weight += 15;
    });
    return weight;
  }
  
  calculateMobility() {
    let mobility = 1.0;
    Object.values(this.components).forEach(comp => {
      if (comp.type === 'chest_plate') {
        mobility += comp.speedMod || 0;
      } else if (comp.type.includes('leg')) {
        mobility += comp.strideLengthMod ? -0.1 : 0;
      } else if (comp.type === 'weapon') {
        mobility -= 0.05;
      }
    });
    return Math.max(0.3, Math.min(1.5, mobility));
  }
  
  // 绘制外骨骼
  draw(ctx, offsetX, offsetY) {
    // 先绘制基础火柴人
    this.base.draw(ctx, offsetX, offsetY);
    
    // 绘制外骨骼组件
    Object.entries(this.components).forEach(([name, component]) => {
      this.drawComponent(ctx, component, name, offsetX, offsetY);
    });
    
    // 绘制武器
    Object.entries(this.components).forEach(([name, component]) => {
      if (component.mountedWeapons) {
        component.mountedWeapons.forEach(weapon => {
          this.drawWeapon(ctx, weapon, component, name, offsetX, offsetY);
        });
      }
    });
  }
  
  drawComponent(ctx, component, name, offsetX, offsetY) {
    ctx.save();
    ctx.translate(offsetX, offsetY);
    
    switch(component.type) {
      case 'chest_plate':
        this.drawChestPlate(ctx, component);
        break;
      case 'shoulder_pad':
        this.drawShoulderPad(ctx, component, name);
        break;
      case 'arm_armor':
        this.drawArmArmor(ctx, component, name);
        break;
      case 'leg_armor':
        this.drawLegArmor(ctx, component, name);
        break;
      case 'helmet':
        this.drawHelmet(ctx, component);
        break;
    }
    
    ctx.restore();
  }
  
  drawChestPlate(ctx, plate) {
    const x = -20;
    const y = -35;
    const w = 40;
    const h = 55;
    
    // 主装甲板
    ctx.beginPath();
    ctx.moveTo(x, y);
    ctx.lineTo(x + w, y);
    ctx.lineTo(x + w + 5, y + h * 0.6);
    ctx.lineTo(x + w, y + h);
    ctx.lineTo(x, y + h);
    ctx.lineTo(x - 5, y + h * 0.6);
    ctx.closePath();
    ctx.fillStyle = plate.color;
    ctx.fill();
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 2;
    ctx.stroke();
    
    // 能量核心
    if (plate.energyCore.active) {
      const coreX = x + w / 2;
      const coreY = y + h * 0.4;
      const pulse = Math.sin(Date.now() / 500) * 3;
      
      ctx.beginPath();
      ctx.arc(coreX, coreY, 8 + pulse, 0, Math.PI * 2);
      ctx.fillStyle = plate.energyCore.color;
      ctx.fill();
      
      // 核心光晕
      ctx.beginPath();
      ctx.arc(coreX, coreY, 12 + pulse * 2, 0, Math.PI * 2);
      ctx.fillStyle = plate.energyCore.color + '33';
      ctx.fill();
    }
    
    // 散热片
    for (let i = 0; i < plate.vents; i++) {
      const ventY = y + h * 0.7 + i * 5;
      ctx.beginPath();
      ctx.moveTo(x + 5, ventY);
      ctx.lineTo(x + w - 5, ventY);
      ctx.strokeStyle = '#555';
      ctx.lineWidth = 1;
      ctx.stroke();
    }
  }
  
  drawShoulderPad(ctx, pad, side) {
    const isRight = side.includes('right');
    const x = isRight ? 30 : -30 - pad.dimensions.width;
    const y = -45;
    
    ctx.save();
    if (isRight) {
      ctx.translate(x + pad.dimensions.width, y + pad.dimensions.height / 2);
    } else {
      ctx.translate(x + pad.dimensions.width, y + pad.dimensions.height / 2);
    }
    
    // 装甲主体
    ctx.beginPath();
    if (pad.style === 'combat') {
      // 尖锐的战斗风格
      ctx.moveTo(0, -pad.dimensions.height / 2);
      ctx.lineTo(pad.dimensions.width / 2, -pad.dimensions.height / 3);
      ctx.lineTo(pad.dimensions.width, -pad.dimensions.height / 4);
      ctx.lineTo(pad.dimensions.width, pad.dimensions.height / 4);
      ctx.lineTo(pad.dimensions.width / 2, pad.dimensions.height / 3);
      ctx.lineTo(0, pad.dimensions.height / 2);
      ctx.lineTo(-pad.dimensions.width / 4, pad.dimensions.height / 3);
      ctx.lineTo(-pad.dimensions.width / 4, -pad.dimensions.height / 3);
    } else {
      // 流线型的侦察风格
      ctx.ellipse(0, 0, pad.dimensions.width / 2, pad.dimensions.height / 2, 0, 0, Math.PI * 2);
    }
    ctx.closePath();
    ctx.fillStyle = pad.color;
    ctx.fill();
    ctx.strokeStyle = pad.highlightColor;
    ctx.lineWidth = 2;
    ctx.stroke();
    
    ctx.restore();
  }
  
  drawArmArmor(ctx, armor, side) {
    const isRight = side.includes('right');
    const baseX = isRight ? 30 : -30;
    
    // 上臂护甲
    const upperArm = armor.segments[0];
    ctx.save();
    ctx.translate(baseX + (isRight ? 5 : -5), -25);
    
    ctx.beginPath();
    ctx.roundRect(-upperArm.radius, -upperArm.length / 2, upperArm.radius * 2, upperArm.length, 5);
    ctx.fillStyle = armor.color;
    ctx.fill();
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.restore();
    
    // 前臂护甲
    const forearm = armor.segments[1];
    ctx.save();
    ctx.translate(baseX + (isRight ? 15 : -15), 0);
    
    ctx.beginPath();
    ctx.roundRect(-forearm.radius, -forearm.length / 2, forearm.radius * 2, forearm.length, 5);
    ctx.fillStyle = armor.color;
    ctx.fill();
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.restore();
  }
  
  drawLegArmor(ctx, armor, side) {
    const isRight = side.includes('right');
    const baseX = isRight ? 20 : -20;
    
    // 大腿护甲
    const thigh = armor.segments[0];
    ctx.save();
    ctx.translate(baseX + (isRight ? 5 : -5), 30);
    
    ctx.beginPath();
    ctx.roundRect(-thigh.radius, -thigh.length / 2, thigh.radius * 2, thigh.length, 5);
    ctx.fillStyle = armor.color;
    ctx.fill();
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.restore();
    
    // 小腿护甲
    const calf = armor.segments[1];
    ctx.save();
    ctx.translate(baseX + (isRight ? 5 : -5), 75);
    
    ctx.beginPath();
    ctx.roundRect(-calf.radius, -calf.length / 2, calf.radius * 2, calf.length, 5);
    ctx.fillStyle = armor.color;
    ctx.fill();
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 2;
    ctx.stroke();
    ctx.restore();
  }
  
  drawHelmet(ctx, helmet) {
    const x = 0;
    const y = -60;
    
    // 头盔主体
    ctx.beginPath();
    ctx.arc(x, y, 18, 0, Math.PI * 2);
    ctx.fillStyle = '#2c3e50';
    ctx.fill();
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 2;
    ctx.stroke();
    
    // 面罩
    if (helmet.visorStyle === 'full') {
      ctx.beginPath();
      ctx.ellipse(x, y + 3, 14, 8, 0, 0, Math.PI * 2);
      ctx.fillStyle = '#1a1a2e';
      ctx.fill();
      
      // 面罩发光效果
      ctx.beginPath();
      ctx.ellipse(x, y + 3, 12, 6, 0, 0, Math.PI * 2);
      ctx.strokeStyle = '#e74c3c';
      ctx.lineWidth = 2;
      ctx.stroke();
    } else {
      // 半开放面罩，可以看到面部
      ctx.beginPath();
      ctx.arc(x, y + 5, 10, 0, Math.PI);
      ctx.fillStyle = '#1a1a2e';
      ctx.fill();
    }
    
    // 传感器点缀
    ctx.beginPath();
    ctx.arc(x - 12, y - 5, 3, 0, Math.PI * 2);
    ctx.fillStyle = '#e74c3c';
    ctx.fill();
    
    ctx.beginPath();
    ctx.arc(x + 12, y - 5, 3, 0, Math.PI * 2);
    ctx.fillStyle = '#e74c3c';
    ctx.fill();
  }
  
  drawWeapon(ctx, weapon, mountComponent, mountName, offsetX, offsetY) {
    const isRight = mountName.includes('right');
    const baseX = isRight ? offsetX + 50 : offsetX - 50;
    const baseY = offsetY - 10;
    
    ctx.save();
    ctx.translate(baseX, baseY);
    
    switch(weapon.type) {
      case 'blaster':
        this.drawBlaster(ctx, weapon);
        break;
      case 'sword':
        this.drawSword(ctx, weapon);
        break;
      case 'cannon':
        this.drawCannon(ctx, weapon);
        break;
    }
    
    ctx.restore();
  }
  
  drawBlaster(ctx, weapon) {
    // 枪身
    ctx.beginPath();
    ctx.roundRect(0, -8, weapon.barrelLength, 16, 3);
    ctx.fillStyle = '#34495e';
    ctx.fill();
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 1;
    ctx.stroke();
    
    // 能量槽
    ctx.beginPath();
    ctx.moveTo(weapon.barrelLength * 0.3, -6);
    ctx.lineTo(weapon.barrelLength * 0.7, -6);
    ctx.lineTo(weapon.barrelLength * 0.7, 6);
    ctx.lineTo(weapon.barrelLength * 0.3, 6);
    ctx.closePath();
    ctx.fillStyle = weapon.color + '44';
    ctx.fill();
    ctx.strokeStyle = weapon.color;
    ctx.lineWidth = 1;
    ctx.stroke();
  }
  
  drawSword(ctx, weapon) {
    // 剑柄
    ctx.beginPath();
    ctx.roundRect(-5, -5, 15, 10, 2);
    ctx.fillStyle = '#555';
    ctx.fill();
    
    // 剑身（振动效果）
    const vibration = Math.sin(Date.now() / 50) * 1;
    ctx.beginPath();
    ctx.moveTo(10, -3 + vibration);
    ctx.lineTo(10 + weapon.bladeLength, -2 + vibration);
    ctx.lineTo(10 + weapon.bladeLength, 2 + vibration);
    ctx.lineTo(10, 3 + vibration);
    ctx.closePath();
    ctx.fillStyle = weapon.color;
    ctx.fill();
    
    // 发光效果
    ctx.shadowColor = weapon.color;
    ctx.shadowBlur = 10;
    ctx.strokeStyle = weapon.color;
    ctx.lineWidth = 1;
    ctx.stroke();
    ctx.shadowBlur = 0;
  }
  
  drawCannon(ctx, weapon) {
    // 炮身
    ctx.beginPath();
    ctx.roundRect(0, -12, weapon.barrelLength, 24, 5);
    ctx.fillStyle = '#34495e';
    ctx.fill();
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 2;
    ctx.stroke();
    
    // 能量核心
    ctx.beginPath();
    ctx.arc(weapon.barrelLength * 0.3, 0, 8, 0, Math.PI * 2);
    ctx.fillStyle = weapon.color;
    ctx.fill();
    
    // 散热管
    ctx.beginPath();
    ctx.moveTo(weapon.barrelLength * 0.6, -12);
    ctx.lineTo(weapon.barrelLength * 0.6, -18);
    ctx.lineTo(weapon.barrelLength * 0.8, -18);
    ctx.strokeStyle = '#555';
    ctx.lineWidth = 3;
    ctx.stroke();
  }
}

// 使用示例
const baseStickman = new MechanicalStickman(0, 0);
const exoskeleton = new MechanicalExoskeleton(baseStickman);

// 组装外骨骼
exoskeleton.addChestPlate('medium');
exoskeleton.addShoulderPad('left', 'combat');
exoskeleton.addShoulderPad('right', 'combat');
exoskeleton.addArmArmor('left', 'standard');
exoskeleton.addArmArmor('right', 'standard');
exoskeleton.addLegArmor('left', 'standard');
exoskeleton.addLegArmor('right', 'standard');
exoskeleton.addHelmet('tactical');
exoskeleton.mountWeapon('right', 'blaster');
exoskeleton.mountWeapon('left', 'sword');

// 查看外观配置
console.log(exoskeleton.getAppearance());

---

四、动画与物理模拟

4.1 让机械火柴人动起来

一个设计再好的火柴人，如果不会动也只是个静态模型。我们需要给它加上动画系统。

class MechanicalStickmanAnimator {
  constructor(mechanicalStickman) {
    this.base = mechanicalStickman;
    this.state = 'idle';  // idle, walk, run, attack, defend
    this.animationFrame = 0;
    this.speed = 1;
    this.currentPose = {};
  }
  
  // 待机动画
  getIdlePose() {
    return {
      shoulder: 0,
      elbow: -10,
      hip: 0,
      knee: 0,
      shoulderR: 0,
      elbowR: -10,
      hipR: 0,
      kneeR: 0,
      breathing: Math.sin(Date.now() / 1000) * 2  // 呼吸效果
    };
  }
  
  // 行走动画
  getWalkPose() {
    const cycle = (Date.now() / 500) % (Math.PI * 2);
    
    return {
      shoulder: Math.sin(cycle) * 15,
      elbow: -30 + Math.sin(cycle) * 10,
      hip: Math.sin(cycle) * 20,
      knee: Math.max(0, Math.sin(cycle)) * 45,
      shoulderR: -Math.sin(cycle) * 15,
      elbowR: -30 - Math.sin(cycle) * 10,
      hipR: -Math.sin(cycle) * 20,
      kneeR: Math.max(0, -Math.sin(cycle)) * 45,
      breathing: 0
    };
  }
  
  // 跑步动画（更快的节奏）
  getRunPose() {
    const cycle = (Date.now() / 250) % (Math.PI * 2);
    
    return {
      shoulder: Math.sin(cycle) * 30,
      elbow: -45 + Math.sin(cycle) * 20,
      hip: Math.sin(cycle) * 35,
      knee: Math.max(0, Math.sin(cycle)) * 70,
      shoulderR: -Math.sin(cycle) * 30,
      elbowR: -45 - Math.sin(cycle) * 20,
      hipR: -Math.sin(cycle) * 35,
      kneeR: Math.max(0, -Math.sin(cycle)) * 70,
      leaning: 15,  // 身体前倾
      breathing: Math.sin(Date.now() / 300) * 5
    };
  }
  
  // 攻击动画
  getAttackPose(weaponSide = 'right') {
    const isRight = weaponSide === 'right';
    
    return {
      shoulder: isRight ? 90 : -10,
      elbow: isRight ? -10 : -30,
      hip: isRight ? -10 : 10,
      knee: isRight ? 15 : 5,
      shoulderR: isRight ? -10 : 90,
      elbowR: isRight ? -30 : -10,
      hipR: isRight ? 10 : -10,
      kneeR: isRight ? 5 : 15,
      attackPhase: Math.sin(Date.now() / 200) > 0 ? 1 : 0
    };
  }
  
  // 防御动画
  getDefendPose() {
    return {
      shoulder: -30,
      elbow: -120,
      hip: -5,
      knee: 10,
      shoulderR: -30,
      elbowR: -120,
      hipR: -5,
      kneeR: 10,
      guardUp: true
    };
  }
  
  // 应用姿势到火柴人
  applyPose(pose) {
    Object.entries(pose).forEach(([joint, angle]) => {
      if (this.base.joints[joint]) {
        // 应用旋转限制
        this.base.joints[joint].angle = clampRotation(joint, angle);
      }
    });
  }
  
  // 动画主循环
  update() {
    let pose;
    
    switch(this.state) {
      case 'idle':
        pose = this.getIdlePose();
        break;
      case 'walk':
        pose = this.getWalkPose();
        break;
      case 'run':
        pose = this.getRunPose();
        break;
      case 'attack':
        pose = this.getAttackPose();
        break;
      case 'defend':
        pose = this.getDefendPose();
        break;
      default:
        pose = this.getIdlePose();
    }
    
    this.applyPose(pose);
  }
}

4.2 物理模拟：重力与碰撞

机械火柴人还需要有物理感。下面是一个简单的物理模拟：

class PhysicsSimulator {
  constructor(stickman) {
    this.stickman = stickman;
    this.gravity = 0.5;
    this.velocity = { x: 0, y: 0 };
    this.onGround = false;
    this.groundY = 400;
  }
  
  update() {
    // 应用重力
    if (!this.onGround) {
      this.velocity.y += this.gravity;
    }
    
    // 更新位置
    this.stickman.y += this.velocity.y;
    this.stickman.x += this.velocity.x;
    
    // 地面检测
    if (this.stickman.y >= this.groundY) {
      this.stickman.y = this.groundY;
      this.velocity.y = 0;
      this.onGround = true;
    } else {
      this.onGround = false;
    }
    
    // 摩擦力
    this.velocity.x *= 0.9;
  }
  
  jump() {
    if (this.onGround) {
      this.velocity.y = -12;
      this.onGround = false;
    }
  }
  
  move(direction) {
    this.velocity.x += direction * 0.8;
  }
}

---

五、常见故障排除

设计机械火柴人时，可能会遇到各种各样的问题。下面列举一些常见问题及解决方案。

5.1 关节活动异常

问题描述：关节旋转角度不对，或者动作不自然。

可能原因：

1. 旋转限制设置不当
2. 关节层级关系混乱
3. 坐标系不统一

解决方案：

// 检查关节配置
function validateJointConfig(joints) {
  const issues = [];
  
  // 检查每个关节是否有旋转限制
  Object.entries(joints).forEach(([name, joint]) => {
    if (!joint.limits) {
      issues.push(`关节 ${name} 缺少旋转限制配置`);
    } else if (joint.limits.min >= joint.limits.max) {
      issues.push(`关节 ${name} 的旋转限制配置错误：min(${joint.limits.min}) >= max(${joint.limits.max})`);
    }
  });
  
  // 检查骨骼连接
  Object.entries(joints).forEach(([name, joint]) => {
    const parentBone = joints[name.replace(/R$/, '')]?.bones?.find(b => b.to === name);
    if (!parentBone && name !== 'head') {
      issues.push(`关节 ${name} 没有检测到父级骨骼连接`);
    }
  });
  
  return issues;
}

// 调试工具：可视化关节角度
function debugJointAngles(ctx, joints, x, y) {
  ctx.save();
  ctx.translate(x, y);
  
  Object.entries(joints).forEach(([name, joint]) => {
    const angleDeg = (joint.angle * 180 / Math.PI).toFixed(1);
    ctx.fillStyle = 'white';
    ctx.font = '10px monospace';
    ctx.fillText(`${name}: ${angleDeg}°`, joint.x + 10, joint.y - 10);
    
    // 绘制角度弧线
    ctx.beginPath();
    ctx.arc(joint.x, joint.y, 20, 0, joint.angle);
    ctx.strokeStyle = 'yellow';
    ctx.lineWidth = 2;
    ctx.stroke();
  });
  
  ctx.restore();
}

5.2 动画抖动或卡顿

问题描述：火柴人的动画看起来不流畅，有抖动或跳帧。

可能原因：

1. 动画帧率不一致
2. 物理模拟步长过大
3. 渲染优化不足

解决方案：

// 使用固定时间步长的物理模拟
class FixedStepPhysics {
  constructor(updateInterval = 1000 / 60) {
    this.updateInterval = updateInterval;
    this.accumulator = 0;
    this.lastTime = 0;
  }
  
  update(currentTime, updateFn) {
    if (!this.lastTime) this.lastTime = currentTime;
    
    const delta = currentTime - this.lastTime;
    this.lastTime = currentTime;
    this.accumulator += delta;
    
    // 固定步长更新
    while (this.accumulator >= this.updateInterval) {
      updateFn();
      this.accumulator -= this.updateInterval;
    }
  }
}

// 插值渲染，避免抖动
function interpolatePose(currentPose, previousPose, alpha) {
  const interpolated = {};
  Object.keys(currentPose).forEach(key => {
    interpolated[key] = previousPose[key] + (currentPose[key] - previousPose[key]) * alpha;
  });
  return interpolated;
}

5.3 外骨骼碰撞问题

问题描述：机械部件互相穿插，或者穿过地面/障碍物。

可能原因：

1. 碰撞体积未正确设置
2. 组件位置计算错误
3. 关节活动范围超出组件设计范围

解决方案：

// 碰撞检测系统
class CollisionSystem {
  constructor() {
    this.colliders = [];
  }
  
  // 添加碰撞体
  addCollider(component, bounds) {
    this.colliders.push({
      component: component,
      bounds: bounds,  // { x, y, width, height }
      type: bounds.type || 'aabb'  // aabb, circle, capsule
    });
  }
  
  // 检测碰撞
  checkCollisions(otherBounds) {
    const collisions = [];
    
    this.colliders.forEach(collider => {
      if (this.aabbCollision(collider.bounds, otherBounds)) {
        collisions.push(collider.component);
      }
    });
    
    return collisions;
  }
  
  // AABB碰撞检测
  aabbCollision(a, b) {
    return a.x < b.x + b.width &&
           a.x + a.width > b.x &&
           a.y < b.y + b.height &&
           a.y + a.height > b.y;
  }
  
  // 防止组件穿插的修正
  resolveCollisions(component, bounds) {
    const collisions = this.checkCollisions(bounds);
    
    if (collisions.length > 0) {
      // 将组件推离碰撞体
      const pushVector = this.calculatePushVector(component, collisions);
      return { collided: true, pushVector: pushVector };
    }
    
    return { collided: false, pushVector: null };
  }
}

5.4 性能问题

问题描述：多个机械火柴人同时运行时，帧率下降。

可能原因：

1. 绘制调用过多
2. 物理计算过于频繁
3. 未使用对象池

解决方案：

// 对象池：避免频繁创建和销毁
class ObjectPool {
  constructor(factory, maxSize = 20) {
    this.factory = factory;
    this.maxSize = maxSize;
    this.pool = [];
    this.active = [];
  }
  
  acquire() {
    if (this.pool.length > 0) {
      const obj = this.pool.pop();
      this.active.push(obj);
      return obj;
    }
    if (this.active.length < this.maxSize) {
      const obj = this.factory();
      this.active.push(obj);
      return obj;
    }
    return null;
  }
  
  release(obj) {
    const index = this.active.indexOf(obj);
    if (index > -1) {
      this.active.splice(index, 1);
      this.pool.push(obj);
    }
  }
  
  reset() {
    while (this.active.length > 0) {
      this.pool.push(this.active.pop());
    }
  }
}

// 批量绘制优化
function batchDraw(ctx, stickmen, drawFn) {
  // 按类型分组，减少状态切换
  const groups = {};
  
  stickmen.forEach(s => {
    const type = s.getType();
    if (!groups[type]) groups[type] = [];
    groups[type].push(s);
  });
  
  // 每组使用相同的绘制状态
  Object.entries(groups).forEach(([type, group]) => {
    drawFn(ctx, type, group);
  });
}

5.5 视觉风格不一致

问题描述：各个组件风格不统一，看起来像是拼凑的。

解决方案：

// 定义风格模板
const styleTemplates = {
  military: {
    primaryColor: '#4a5d23',
    secondaryColor: '#2c3e1a',
    accentColor: '#8b7355',
    textures: ['camo', 'scratches'],
    details: ['pouches', 'patches', 'straps']
  },
  futuristic: {
    primaryColor: '#1a1a2e',
    secondaryColor: '#16213e',
    accentColor: '#0f3460',
    glowColor: '#00ffff',
    textures: ['carbon_fiber', 'metal_satin'],
    details: ['led_strips', 'holographic_displays']
  },
  steampunk: {
    primaryColor: '#8b4513',
    secondaryColor: '#d2691e',
    accentColor: '#daa520',
    textures: ['brass', 'copper', 'leather'],
    details: ['gears', 'pipes', 'gauges']
  },
  robotic: {
    primaryColor: '#708090',
    secondaryColor: '#2f4f4f',
    accentColor: '#ff4500',
    textures: ['metal_plating', 'hydraulic_tubes'],
    details: ['panel_lines', 'status_lights']
  }
};

// 风格一致性检查
function checkStyleConsistency(components, template) {
  const issues = [];
  
  components.forEach((component, index) => {
    // 检查颜色是否匹配模板
    if (component.color && !templateColors.includes(component.color)) {
      issues.push(`组件 ${index} 的颜色 "${component.color}" 与风格模板不匹配`);
    }
    
    // 检查细节类型
    if (component.details) {
      const validDetails = template.details || [];
      component.details.forEach(detail => {
        if (!validDetails.includes(detail)) {
          issues.push(`组件 ${index} 的细节 "${detail}" 不在风格模板中`);
        }
      });
    }
  });
  
  return issues;
}

---

六、高级战甲设计

6.1 设计理念：从火柴人到战士

当你掌握了基础关节和机械外骨骼后，就可以开始设计更复杂的战甲了。一个完整的战甲系统通常包括：

1. 基础骨架：维持结构完整性
2. 动力系统：提供运动能力
3. 装甲系统：提供防护
4. 武器系统：提供攻击力
5. 感知系统：提供信息获取
6. 通信系统：提供团队协同

6.2 战甲设计工作流

设计一个战甲，建议按以下步骤进行：

1. 概念设计 → 2. 基础结构 → 3. 动力系统 → 4. 装甲布局 → 5. 武器整合 → 6. 细节完善 → 7. 动画测试 → 8. 性能优化

6.3 完整战甲示例代码

class BattleSuit {
  constructor(name, classType) {
    this.name = name;
    this.classType = classType;  // assault, scout, heavy, support
    
    // 基础属性
    this.stats = this.generateStats(classType);
    
    // 组件系统
    this.components = new Map();
    
    // 武器系统
    this.weapons = [];
    
    // 动画系统
    this.animator = null;
    
    // 物理系统
    this.physics = null;
    
    // 初始化
    this.initialize();
  }
  
  generateStats(classType) {
    const statTemplates = {
      assault: {
        armor: 60,
        speed: 0.8,
        damage: 1.2,
        health: 120,
        energy: 100,
        visionRange: 200
      },
      scout: {
        armor: 30,
        speed: 1.3,
        damage: 0.7,
        health: 80,
        energy: 150,
        visionRange: 350
      },
      heavy: {
        armor: 90,
        speed: 0.5,
        damage: 1.5,
        health: 200,
        energy: 80,
        visionRange: 150
      },
      support: {
        armor: 50,
        speed: 0.7,
        damage: 0.8,
        health: 100,
        energy: 200,
        visionRange: 250
      }
    };
    
    return { ...statTemplates[classType] };
  }
  
  initialize() {
    // 创建基础火柴人
    this.stickman = new MechanicalStickman(0, 0);
    
    // 创建外骨骼
    this.exoskeleton = new MechanicalExoskeleton(this.stickman);
    
    // 创建动画器
    this.animator = new MechanicalStickmanAnimator(this.stickman);
    
    // 创建物理模拟器
    this.physics = new PhysicsSimulator(this.stickman);
    
    // 创建碰撞系统
    this.collision = new CollisionSystem();
    
    // 加载默认组件
    this.loadDefaultComponents();
    
    console.log(`${this.name} 战甲初始化完成`);
    console.log(`职业类型: ${this.classType}`);
    console.log(`属性:`, this.stats);
  }
  
  loadDefaultComponents() {
    // 根据职业类型加载默认组件
    switch(this.classType) {
      case 'assault':
        this.exoskeleton.addChestPlate('medium');
        this.exoskeleton.addShoulderPad('left', 'combat');
        this.exoskeleton.addShoulderPad('right', 'combat');
        this.exoskeleton.addArmArmor('left', 'standard');
        this.exoskeleton.addArmArmor('right', 'standard');
        this.exoskeleton.addLegArmor('left', 'standard');
        this.exoskeleton.addLegArmor('right', 'standard');
        this.exoskeleton.addHelmet('tactical');
        this.exoskeleton.mountWeapon('right', 'blaster');
        this.mountWeapon('melee', 'vibro_blade');
        break;
        
      case 'scout':
        this.exoskeleton.addChestPlate('light');
        this.exoskeleton.addShoulderPad('left', 'scout');
        this.exoskeleton.addShoulderPad('right', 'scout');
        this.exoskeleton.addArmArmor('left', 'light');
        this.exoskeleton.addArmArmor('right', 'light');
        this.exoskeleton.addLegArmor('left', 'light');
        this.exoskeleton.addLegArmor('right', 'light');
        this.exoskeleton.addHelmet('recon');
        this.exoskeleton.mountWeapon('right', 'sniper_rifle');
        this.mountWeapon('utility', 'grapple_gun');
        break;
        
      case 'heavy':
        this.exoskeleton.addChestPlate('heavy');
        this.exoskeleton.addShoulderPad('left', 'combat');
        this.exoskeleton.addShoulderPad('right', 'combat');
        this.exoskeleton.addArmArmor('left', 'heavy');
        this.exoskeleton.addArmArmor('right', 'heavy');
        this.exoskeleton.addLegArmor('left', 'heavy');
        this.exoskeleton.addLegArmor('right', 'heavy');
        this.exoskeleton.addHelmet('commando');
        this.exoskeleton.mountWeapon('right', 'cannon');
        this.mountWeapon('utility', 'shield_generator');
        break;
        
      case 'support':
        this.exoskeleton.addChestPlate('medium');
        this.exoskeleton.addShoulderPad('left', 'combat');
        this.exoskeleton.addShoulderPad('right', 'combat');
        this.exoskeleton.addArmArmor('left', 'standard');
        this.exoskeleton.addArmArmor('right', 'standard');
        this.exoskeleton.addLegArmor('left', 'standard');
        this.exoskeleton.addLegArmor('right', 'standard');
        this.exoskeleton.addHelmet('engineer');
        this.exoskeleton.mountWeapon('right', 'turret_controller');
        this.mountWeapon('utility', 'repair_bot');
        break;
    }
  }
  
  mountWeapon(slot, weaponType) {
    const weapon = this.exoskeleton.createWeapon(weaponType);
    this.weapons.push({
      slot: slot,
      weapon: weapon,
      ammo: weapon.maxAmmo || Infinity
    });
  }
  
  // 获取战甲状态
  getStatus() {
    return {
      name: this.name,
      classType: this.classType,
      health: this.stats.health,
      maxHealth: this.stats.health,
      energy: this.stats.energy,
      maxEnergy: this.stats.energy,
      armor: this.stats.armor,
      speed: this.stats.speed,
      weapons: this.weapons.map(w => w.weapon.name),
      appearance: this.exoskeleton.getAppearance()
    };
  }
  
  // 更新战甲
  update() {
    // 更新物理
    this.physics.update();
    
    // 更新动画
    this.animator.update();
    
    // 更新武器状态
    this.weapons.forEach(w => {
      if (w.weapon.coolingTime && w.weapon.overheated) {
        w.weapon.currentCooldown -= 1/60;
        if (w.weapon.currentCooldown <= 0) {
          w.weapon.overheated = false;
        }
      }
    });
  }
  
  // 绘制战甲
  draw(ctx, x, y) {
    ctx.save();
    ctx.translate(x, y);
    
    // 绘制战甲
    this.exoskeleton.draw(ctx, 0, 0);
    
    // 绘制状态指示器
    this.drawStatusIndicators(ctx);
    
    ctx.restore();
  }
  
  drawStatusIndicators(ctx) {
    // 生命条
    const healthPercent = this.stats.health / this.stats.maxHealth;
    ctx.fillStyle = '#333';
    ctx.fillRect(-30, -90, 60, 8);
    ctx.fillStyle = healthPercent > 0.5 ? '#2ecc71' : healthPercent > 0.25 ? '#f39c12' : '#e74c3c';
    ctx.fillRect(-30, -90, 60 * healthPercent, 8);
    
    // 能量条
    const energyPercent = this.stats.energy / this.stats.maxEnergy;
    ctx.fillStyle = '#333';
    ctx.fillRect(-30, -82, 60, 5);
    ctx.fillStyle = '#3498db';
    ctx.fillRect(-30, -82, 60 * energyPercent, 5);
  }
}

// 创建战甲实例
const assaultSuit = new BattleSuit('突击者-α', 'assault');
const scoutSuit = new BattleSuit('侦察兵-β', 'scout');
const heavySuit = new BattleSuit('重装兵-γ', 'heavy');
const supportSuit = new BattleSuit('支援兵-δ', 'support');

---

七、实战案例：从头开始设计一个火柴人战士

7.1 设计需求

假设我们要设计一个未来都市的治安维护者火柴人，需要具备以下特点：

• 中等装甲，兼顾防护和机动性
• 配备非致命武器和基础火力
• 集成监控系统
• 具备夜间作战能力

7.2 设计方案

// 创建自定义战甲配置
class UrbanPeacekeeper {
  constructor() {
    this.name = '城市治安维护者-UV01';
    this.base = new MechanicalStickman(0, 0);
    this.exo = new MechanicalExoskeleton(this.base);
    this.animator = new MechanicalStickmanAnimator(this.base);
    
    this.configureSuit();
  }
  
  configureSuit() {
    // 颜色方案：深蓝色+黄色警示条纹
    this.colors = {
      primary: '#1a237e',      // 深蓝主体
      secondary: '#283593',    // 稍浅的蓝色
      accent: '#ffc107',       // 黄色警示
      highlight: '#ffffff',    // 白色反光
      joint: '#455a64',        // 关节灰色
      glow: '#00e5ff'          // 青色能量光
    };
    
    // 基础组件
    this.exo.addChestPlate('medium');
    this.exo.components.chest.color = this.colors.primary;
    this.exo.components.chest.energyCore.color = this.colors.glow;
    
    this.exo.addShoulderPad('left', 'combat');
    this.exo.addShoulderPad('right', 'combat');
    this.exo.components.shoulder_left.color = this.colors.secondary;
    this.exo.components.shoulder_right.color = this.colors.secondary;
    
    this.exo.addArmArmor('left', 'standard');
    this.exo.addArmArmor('right', 'standard');
    this.exo.components.arm_left.color = this.colors.primary;
    this.exo.components.arm_right.color = this.colors.primary;
    
    this.exo.addLegArmor('left', 'standard');
    this.exo.addLegArmor('right', 'standard');
    this.exo.components.leg_left.color = this.colors.secondary;
    this.exo.components.leg_right.color = this.colors.secondary;
    
    // 头盔：集成监控和通讯
    this.exo.addHelmet('tactical');
    this.exo.components.helmet.color = this.colors.primary;
    this.exo.components.helmet.accentColor = this.colors.accent;
    
    // 武器配置
    // 非致命武器：电击棍
    this.exo.mountWeapon('right', 'blaster');
    this.exo.components.weapon_right.color = this.colors.glow;
    
    // 附带装备：战术背包
    this.exo.components.backpack = {
      type: 'tactical_pack',
      color: this.colors.secondary,
      contents: ['medkit', 'grapple', 'drone', 'rations'],
      weight: 8
    };
    
    // 警示条纹
    this.exo.components.warningStrips = [
      { position: 'arm_left', color: this.colors.accent },
      { position: 'arm_right', color: this.colors.accent },
      { position: 'leg_left', color: this.colors.accent },
      { position: 'leg_right', color: this.colors.accent }
    ];
  }
  
  draw(ctx, x, y) {
    ctx.save();
    ctx.translate(x, y);
    
    // 绘制基础火柴人
    this.base.draw(ctx, 0, 0);
    
    // 绘制外骨骼
    this.exo.draw(ctx, 0, 0);
    
    // 绘制警示条纹
    this.drawWarningStrips(ctx);
    
    // 绘制状态信息
    this.drawHUD(ctx);
    
    ctx.restore();
  }
  
  drawWarningStrips(ctx) {
    ctx.save();
    ctx.translate(0, 0);
    
    // 手臂警示条纹
    ctx.fillStyle = this.colors.accent;
    
    // 左臂
    ctx.fillRect(-45, -20, 8, 35);
    ctx.fillRect(-45, 15, 8, 35);
    
    // 右臂
    ctx.fillRect(37, -20, 8, 35);
    ctx.fillRect(37, 15, 8, 35);
    
    // 腿部警示条纹
    ctx.fillRect(-30, 55, 8, 40);
    ctx.fillRect(22, 55, 8, 40);
    
    ctx.restore();
  }
  
  drawHUD(ctx) {
    ctx.save();
    ctx.translate(60, -80);
    
    // 角色名称
    ctx.fillStyle = this.colors.glow;
    ctx.font = '12px monospace';
    ctx.fillText(this.name, 0, 0);
    
    // 状态指示
    ctx.fillStyle = '#2ecc71';
    ctx.fillText('● ONLINE', 0, 15);
    
    ctx.fillStyle = this.colors.accent;
    ctx.fillText('⚡ POWER: 87%', 0, 30);
    
    ctx.fillStyle = this.colors.glow;
    ctx.fillText('📡 SIGNAL: STRONG', 0, 45);
    
    ctx.restore();
  }
}

// 使用示例
const peacekeeper = new UrbanPeacekeeper();

7.3 动画状态机

为了让治安维护者有更丰富的动作，我们可以添加一个状态机：

class PeacekeeperAnimator extends MechanicalStickmanAnimator {
  constructor(base) {
    super(base);
    this.subState = 'patrol';  // patrol, investigate, engage, retreat
    this.alertLevel = 0;  // 0-3，分别代表冷静、警戒、警告、战斗
  }
  
  update() {
    // 根据警报等级调整动画
    switch(this.alertLevel) {
      case 0:  // 冷静巡逻
        this.state = 'walk';
        this.speed = 0.7;
        break;
      case 1:  // 警戒状态
        this.state = 'walk';
        this.speed = 1.0;
        // 头部扫描动画
        this.base.joints.head.angle = Math.sin(Date.now() / 800) * 0.2;
        break;
      case 2:  // 警告状态
        this.state = 'defend';
        // 武器举起
        if (this.base.joints.shoulderR) {
          this.base.joints.shoulderR.angle = -60;
        }
        break;
      case 3:  // 战斗状态
        this.state = 'attack';
        this.speed = 1.5;
        break;
    }
    
    super.update();
  }
  
  // 特殊动作：扫描
  scan() {
    const originalAngle = this.base.joints.head?.angle || 0;
    let scanPhase = 0;
    
    const scanAnimation = setInterval(() => {
      scanPhase += 0.1;
      if (this.base.joints.head) {
        this.base.joints.head.angle = Math.sin(scanPhase) * 0.5;
      }
      if (scanPhase > Math.PI * 2) {
        clearInterval(scanAnimation);
        if (this.base.joints.head) {
          this.base.joints.head.angle = originalAngle;
        }
      }
    }, 16);
  }
  
  // 特殊动作：呼叫支援
  callForBackup() {
    // 举起通讯装置
    if (this.base.joints.shoulderR) {
      this.base.joints.shoulderR.angle = -90;
      this.base.joints.elbowR.angle = -45;
    }
    
    // 播放通讯动画
    setTimeout(() => {
      if (this.base.joints.shoulderR) {
        this.base.joints.shoulderR.angle = 0;
        this.base.joints.elbowR.angle = -30;
      }
    }, 2000);
  }
}

---

八、最佳实践与进阶技巧

8.1 设计原则总结

在设计机械火柴人时，记住以下原则：

1. 功能先行：每个部件都应该有其存在的理由，不要为了酷而加部件
2. 层次清晰：内层是骨架，中层是管线/肌肉，外层是装甲，别混在一起
3. 活动空间：关节处必须留有足够的活动间隙，否则会穿模
4. 视觉平衡：左右对称不一定最好，但整体要有平衡感
5. 风格统一：同一套战甲应该有一致的视觉语言

8.2 性能优化技巧

// 视锥剔除：只绘制可见的物体
function frustumCulling(stickmen, camera) {
  return stickmen.filter(s => {
    const screenPos = camera.worldToScreen(s.x, s.y);
    return screenPos.x > -100 && screenPos.x < camera.width + 100 &&
           screenPos.y > -100 && screenPos.y < camera.height + 100;
  });
}

// LOD（细节层次）：根据距离调整绘制精度
function getLOD(distance, maxDistance) {
  const ratio = distance / maxDistance;
  if (ratio < 0.3) return 'high';    // 近距离：完整细节
  if (ratio < 0.7) return 'medium';  // 中距离：简化细节
  return 'low';                       // 远距离：只画轮廓
}

// 绘制优化：根据LOD选择绘制方式
function drawWithLOD(ctx, stickman, lod) {
  switch(lod) {
    case 'high':
      stickman.drawFull(ctx);      // 完整绘制
      break;
    case 'medium':
      stickman.draw Simplified(ctx);  // 简化绘制
      break;
    case 'low':
      stickman.drawSilhouette(ctx);   // 只画轮廓
      break;
  }
}

8.3 创意扩展方向

设计完基础系统后，你可以考虑以下扩展方向：

1. 模块化系统：允许玩家自定义配件组合
2. 损伤系统：装甲可以损坏，影响外观和性能
3. 升级系统：通过战斗获得经验，解锁新部件
4. 多人协同：多个火柴人可以组合成更大的机甲
5. 环境互动：战甲可以与场景中的物体互动

---

九、总结

从零开始设计一个机械火柴人，需要理解几个核心概念：

• 关节系统是整个机械结构的基础，要合理安排旋转限制和层级关系
• 外骨骼是在基础上的第一层扩展，要平衡防护、机动和功能
• 动画系统让火柴人”活”起来，要考虑状态转换和过渡效果
• 物理模拟增加了真实感，但要控制好性能开销
• 故障排除是开发过程中不可避免的部分，要有系统性的排查思路

记住，最好的设计不是部件最多的，而是功能、美观和性能平衡得最好的。你的火柴人战士应该有一个清晰的设计理念，每个部件都应该服务于这个理念。

如果你在实际操作中遇到了具体问题，欢迎随时问我！祝你的火柴人机械组装之旅愉快！