红军战士 - 纯人物 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,
  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();
}

// ========== 核心物理函数：带缓入缓出的摆动 ==========
// 普通的 sin 在极值时虽然速度为0，但过于平滑。
// sin * |sin| 能让肢体在极限位置停留更久（减速停止），并在中间加速。
function smoothSwing(phase) {
  const s = Math.sin(phase);
  return s * Math.abs(s); // 保持正负号，但让波峰波谷更平缓
}

// =====================================================================
// 【部件 1】头部
// =====================================================================
function drawHead(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 = 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,
    lean:        anim.lean        || 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 headY     = shoulderY;

  const legSpacing = S.torsoW / 4 - 6;
  const armSpacing = S.torsoW / 2 + S.armW / 2 - 2;

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

  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, headY, a.headRot);
  drawArm(ctx, -armSpacing, shoulderY, a.leftArmRot, 'left');

  ctx.restore();
}

// =====================================================================
// 主循环
// =====================================================================
let time = 0;
let paused = false;

const RUN = {
  speed:      5.5,    
  legSwing:   0.65,   
  armSwing:   0.75,   
  bodyBob:    5.5,    
  lean:       0.15,   
  headBob:    0.03,
};

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

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

  const phase = time * RUN.speed;
  const phaseOffset = Math.PI * 0.65;

  // === 物理核心：使用 smoothSwing 替代标准的 Math.sin ===
  // 现在肢体在前后极限位置会有明显的“停顿感”（减速停止），
  // 并在中间阶段猛烈加速。
  
  const leftLegRot  = smoothSwing(phase) * RUN.legSwing;
  const rightLegRot = smoothSwing(phase - phaseOffset) * RUN.legSwing;

  const leftArmRot  = -smoothSwing(phase) * RUN.armSwing;
  const rightArmRot = -smoothSwing(phase - phaseOffset) * RUN.armSwing;

  // 身体起伏也应用了缓动，让落地和腾空更有重量感
  const bobPhase = Math.abs(Math.sin(phase));
  const bob = (bobPhase * bobPhase) * RUN.bodyBob; 

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

  const anim = {
    bob, 
    lean: RUN.lean,
    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.02;
  ctx.fillStyle = 'rgba(0, 0, 0, 0.35)';
  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>