红军战士 - 纯人物 R6 行走动画 (修正版)

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>红军战士 - 纯人物 R6 行走动画 (修正版)</title>
<style>
  body { margin: 0; background: #1a1a2e; display: flex; justify-content: center; align-items: center; height: 100vh; overflow: hidden; font-family: 'Microsoft YaHei', sans-serif; }
  canvas { background: linear-gradient(180deg, #16213e 0%, #0f3460 100%); border-radius: 12px; box-shadow: 0 0 40px rgba(196, 30, 58, 0.3); }
  .info { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); color: #c41e3a; font-size: 14px; letter-spacing: 4px; text-shadow: 0 0 10px rgba(196, 30, 58, 0.8); }
  .tips { position: absolute; bottom: 20px; color: #888; font-size: 12px; }
</style>
</head>
<body>
<div class="info">★ 中国工农红军 · 行走动画测试 (无武器) ★</div>
<div class="tips">点击画面暂停/继续</div>
<canvas id="game" width="700" height="600"></canvas>

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

// ========== 配色 ==========
const C = {
  uniform:    '#5A6B7C', uniformDark:'#3D4A57', uniformLite:'#6E8090',
  collar:     '#C41E3A', skin:       '#E8B88A', skinDark:   '#C99A6E',
  hat:        '#4A5A6B', hatDark:    '#37444F', bind:       '#8A8A8A',
  straw:      '#9A7A4A', strawDark:  '#7A5A2A', belt:       '#3A2A1A',
};

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

// ========== 绘制工具 ==========
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();
}

// =====================================================================
// 【部件 1】头部（轴心：脖子底部）
// =====================================================================
function drawHead(ctx, x, y, rotation = 0) {
  ctx.save();
  ctx.translate(x, y);
  ctx.rotate(rotation);

  const { headW, headH, neckH } = S;
  const headX = -headW / 2;
  const headY = -headH - neckH;

  ctx.fillStyle = C.skinDark;
  ctx.fillRect(-8, -neckH, 16, neckH);

  ctx.fillStyle = C.skin;
  roundRect(ctx, headX, headY, headW, headH, 6); ctx.fill();

  ctx.fillStyle = C.skinDark;
  ctx.fillRect(headX, headY, 6, headH);

  ctx.fillStyle = '#2A1A0A';
  ctx.fillRect(headX + 12, headY + 22, 7, 5);
  ctx.fillRect(headX + headW - 19, headY + 22, 7, 5);

  ctx.strokeStyle = '#2A1A0A'; ctx.lineWidth = 2;
  ctx.beginPath(); ctx.moveTo(headX + 10, headY + 18); ctx.lineTo(headX + 20, headY + 20); ctx.stroke();
  ctx.beginPath(); ctx.moveTo(headX + headW - 10, headY + 18); ctx.lineTo(headX + headW - 20, headY + 20); ctx.stroke();

  ctx.strokeStyle = '#8A5A3A'; ctx.lineWidth = 1.5;
  ctx.beginPath(); ctx.moveTo(headX + 20, headY + 40); ctx.lineTo(headX + headW - 20, headY + 40); ctx.stroke();

  // 八角帽
  const hatW = headW + 14;
  const hatH = 22;
  const hatX = -hatW / 2;
  const hatY = headY - hatH + 4;

  ctx.fillStyle = C.hat;
  ctx.beginPath();
  ctx.moveTo(hatX + 10, hatY); ctx.lineTo(hatX + hatW - 10, hatY);
  ctx.lineTo(hatX + hatW, hatY + 8); ctx.lineTo(hatX + hatW - 4, hatY + hatH);
  ctx.lineTo(hatX + 4, hatY + hatH); ctx.lineTo(hatX, hatY + 8);
  ctx.closePath(); ctx.fill();

  ctx.fillStyle = C.hatDark;
  ctx.fillRect(hatX + 2, hatY + hatH - 4, hatW - 4, 4);

  ctx.fillStyle = C.hatDark;
  ctx.beginPath();
  ctx.moveTo(hatX, hatY + 8); ctx.lineTo(hatX + 8, hatY + 2);
  ctx.lineTo(hatX + 8, hatY + hatH); ctx.lineTo(hatX + 2, hatY + hatH);
  ctx.closePath(); ctx.fill();

  // 红五星
  const starCY = hatY + 9, starR = 7;
  ctx.fillStyle = C.collar;
  ctx.beginPath();
  for (let i = 0; i < 5; i++) {
    const angle = (i * 72 - 90) * Math.PI / 180;
    const x1 = starR * Math.cos(angle), y1 = starCY + starR * Math.sin(angle);
    const angle2 = ((i + 1) * 72 - 90) * Math.PI / 180;
    const innerR = starR * 0.4;
    const x2 = innerR * Math.cos(angle2 - Math.PI / 5), y2 = starCY + innerR * Math.sin(angle2 - Math.PI / 5);
    if (i === 0) ctx.moveTo(x1, y1); else ctx.lineTo(x1, y1);
    ctx.lineTo(x2, y2);
  }
  ctx.closePath(); ctx.fill();
  ctx.strokeStyle = '#8A0A1A'; ctx.lineWidth = 1; ctx.stroke();

  ctx.restore();
}

// =====================================================================
// 【部件 2】躯干
// =====================================================================
function drawTorso(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 = C.uniform;
  roundRect(ctx, torsoX, torsoY, torsoW, torsoH, 4); ctx.fill();

  ctx.fillStyle = C.uniformDark;
  ctx.fillRect(torsoX, torsoY, 8, torsoH);

  ctx.fillStyle = C.uniformLite;
  ctx.fillRect(torsoX + torsoW - 6, torsoY, 6, torsoH);

  ctx.fillStyle = C.collar;
  ctx.fillRect(torsoX + 12, torsoY + 2, 14, 8);
  ctx.fillRect(torsoX + torsoW - 26, torsoY + 2, 14, 8);

  ctx.strokeStyle = C.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 = C.belt;
  ctx.fillRect(torsoX, beltY, torsoW, 7);

  ctx.fillStyle = '#B8963A';
  ctx.fillRect(-5, beltY + 1, 10, 5);

  ctx.restore();
}

// =====================================================================
// 【部件 3】手臂
// =====================================================================
function drawArm(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 = C.uniform;
  roundRect(ctx, armX, 0, armW, armH - 12, 3); ctx.fill();

  if (side === 'left') {
    ctx.fillStyle = C.uniformDark;
    ctx.fillRect(armX, 0, 5, armH - 12);
  } else {
    ctx.fillStyle = C.uniformLite;
    ctx.fillRect(armX + armW - 5, 0, 5, armH - 12);
  }

  ctx.fillStyle = C.skin;
  roundRect(ctx, armX + 4, armH - 14, armW - 8, 14, 3); ctx.fill();

  ctx.restore();
}

// =====================================================================
// 【部件 4】腿
// =====================================================================
function drawLeg(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 = C.uniform;
  roundRect(ctx, legX, 0, legW, legH * 0.55, 3); ctx.fill();

  ctx.fillStyle = C.uniformDark;
  ctx.fillRect(legX, 0, 6, legH * 0.55);

  const bindY = legH * 0.5;
  const bindH = legH * 0.42;
  ctx.fillStyle = C.bind;
  roundRect(ctx, legX - 1, bindY, legW + 2, bindH, 2); ctx.fill();

  ctx.strokeStyle = '#6A6A6A'; ctx.lineWidth = 1.2;
  for (let i = 0; i < 5; i++) {
    const yy = bindY + 4 + i * (bindH - 8) / 4;
    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 = C.straw;
  roundRect(ctx, legX - 3, shoeY, legW + 6, shoeH, 3); ctx.fill();

  ctx.strokeStyle = C.strawDark; ctx.lineWidth = 1;
  for (let i = 0; i < 3; i++) {
    ctx.beginPath();
    ctx.moveTo(legX - 3, shoeY + 2 + i * 2);
    ctx.lineTo(legX + legW + 3, shoeY + 2 + i * 2);
    ctx.stroke();
  }

  ctx.restore();
}

// =====================================================================
// 【装配函数】
// =====================================================================
function drawSoldier(ctx, centerX, groundY, scale = 1, anim = {}) {
  const a = {
    bob:         anim.bob         || 0,
    leftLegRot:  anim.leftLegRot  || 0,
    rightLegRot: anim.rightLegRot || 0,
    leftArmRot:  anim.leftArmRot  || 0,
    rightArmRot: anim.rightArmRot || 0,
    headRot:     anim.headRot     || 0,
  };

  const shoulderY = -S.torsoH;
  const neckY     = shoulderY - S.neckH;

  // 修正1：大幅缩小腿间距，让双腿紧凑（使用躯干宽度的四分之一，加上微调）
  const legSpacing = S.torsoW / 4 + 2; 
  const armSpacing = S.torsoW / 2 + S.armW / 2 - 2;

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

  // 绘制顺序（从后到前）
  drawLeg(ctx, -legSpacing, 0, a.leftLegRot, 'left');
  drawLeg(ctx,  legSpacing, 0, a.rightLegRot, 'right');

  drawTorso(ctx, 0, 0, 0);

  drawArm(ctx, armSpacing, shoulderY, a.rightArmRot, 'right');
  drawHead(ctx, 0, neckY, a.headRot);
  drawArm(ctx, -armSpacing, shoulderY, a.leftArmRot, 'left');

  ctx.restore();
}

// =====================================================================
// 主循环 —— 修正后的行走动画
// =====================================================================
let time = 0;
let paused = false;

const WALK = {
  speed:      4.0,
  legSwing:   0.40,   // 修正2：缩小腿部摆动幅度，避免劈叉感
  armSwing:   0.35,   // 缩小手臂摆动幅度
  bodyBob:    3.5,
  headBob:    0.03
};

function animate() {
  if (!paused) time += 0.02;

  ctx.clearRect(0, 0, canvas.width, canvas.height);

  const phase = time * WALK.speed;

  // ===== 修正3：核心走路逻辑 =====
  // 左腿先迈出（sin），右腿慢半拍跟着迈出（sin带有相位差），而不是反相猛踢
  const phaseOffset = Math.PI * 0.6; // 右腿比左腿慢约 108 度

  // 左腿：正常的正弦波
  const leftLegRot  = Math.sin(phase) * WALK.legSwing;
  // 右腿：加上相位差，这样当左腿向前时，右腿还在往前跟进的半路上
  const rightLegRot = Math.sin(phase - phaseOffset) * WALK.legSwing;

  // 手臂同样使用相位差，保持与同侧腿的相对协调
  const leftArmRot  = -Math.sin(phase) * WALK.armSwing;
  const rightArmRot = -Math.sin(phase - phaseOffset) * WALK.armSwing;

  // 身体起伏：使用两倍频率（每迈一步颠簸一次）
  const bob = Math.abs(Math.sin(phase)) * WALK.bodyBob;

  const headRot = Math.sin(phase * 2) * WALK.headBob;

  const anim = {
    bob, leftLegRot, rightLegRot, leftArmRot, rightArmRot, headRot,
  };

  const groundY = canvas.height - 100;
  const cx = canvas.width / 2;
  const scale = 1.8;

  // ===== 环境绘制 =====
  ctx.fillStyle = '#152a1f';
  ctx.fillRect(0, groundY, canvas.width, canvas.height - groundY);

  ctx.strokeStyle = '#1f3d2d';
  ctx.lineWidth = 2;
  ctx.beginPath();
  ctx.moveTo(0, groundY + 2);
  ctx.lineTo(canvas.width, groundY + 2);
  ctx.stroke();

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

  drawSoldier(ctx, cx, groundY, scale, anim);

  requestAnimationFrame(animate);
}

canvas.addEventListener('click', () => { paused = !paused; });
animate();
</script>
</body>
</html>