js实现2d火柴人打斗动画代码-html代码-BFW代码库

代码语言：html

所属分类：其他

代码由qwen-3.8-max ai生成，可能有错误，仅供参考：点击查看提示词

代码描述：火柴人打斗动画

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>火柴人格斗 · Stick Fighter</title>
<style>
  html, body { margin: 0; padding: 0; background: #0a0a12; overflow: hidden; font-family: -apple-system, sans-serif; color: #eee; }
  canvas { display: block; cursor: crosshair; }
  #ui { position: fixed; right: 16px; bottom: 16px; display: flex; flex-direction: column; gap: 8px; z-index: 10; }
  #ui button {
    background: rgba(255,255,255,0.08); color: #fff; border: 1px solid rgba(255,255,255,0.2);
    padding: 8px 14px; border-radius: 6px; cursor: pointer; font-size: 13px; backdrop-filter: blur(6px);
    transition: all 0.15s;
  }
  #ui button:hover { background: rgba(255,255,255,0.18); }
  #hint {
    position: fixed; left: 16px; bottom: 16px; font-size: 12px; opacity: 0.5; z-index: 10;
    text-shadow: 0 1px 2px rgba(0,0,0,0.8);
  }
</style>
</head>
<body>
<canvas id="c"></canvas>
<div id="ui">
  <button id="btnPause">暂停</button>
  <button id="btnReplay">重播</button>
  <button id="btnSlow">慢动作: 关</button>
  <button id="btnFx">特效: 开</button>
</div>
<div id="hint">A/D 移动 · J 出拳 · K 踢腿 · L 格挡 · Space 跳跃 · 点击画布慢镜</div>
<script>
// ============================================================
// 常量 —— 所有可调数值集中在此
// ============================================================
const GRAVITY        = 1800;    // 重力 px/s²
const JUMP_POWER     = 720;     // 起跳速度
const MOVE_SPEED     = 220;     // 移动速度
const AIR_MOVE       = 0.55;    // 空中操控力系数
const FRICTION       = 0.86;    // 地面摩擦
const KNOCKBACK      = 260;    // 基础击退
const MAX_HP         = 100;
const DAMAGE = { jab: 8, hook: 13, kick: 16, special: 30 };
const HITSTOP_MS     = 70;     // 命中定格时长
const SHAKE_DECAY    = 8;      // 震动衰减
const GROUND_RATIO   = 0.78;   // 地面位置占屏幕高
const STAGE_PADDING  = 80;     // 边界内距
const FPS_REF        = 60;     // 帧率归一化基准

// 颜色
const COL_BG1 = '#0a0a12', COL_BG2 = '#1a1a2e';
const COL_FIGHTERS = ['#ffffff', '#ff9a3c'];
const COL_ACCENT   = '#ff3860';

// ============================================================
// 工具
// ============================================================
const rand  = (a,b) => a + Math.random() * (b - a);
const randi = (a,b) => Math.floor(rand(a,b));
const clamp = (v,a,b) => Math.max(a, Math.min(b, v));
const lerp  = (a,b,t) => a + (b - a) * t;
const sign  = v => v < 0 ? -1 : v > 0 ? 1 : 0;

// 缓动函数
const ease = {
  linear:    t => t,
  inOut:     t => t<.5 ? 2*t*t : 1 - Math.pow(-2*t+2,2)/2,
  inOutCube: t => t<.5 ? 4*t*t*t : 1 - Math.pow(-2*t+2,3)/2,
  outBack:   t => { const c=1.7; return 1 + (c+1)*Math.pow(t-1,3) + c*Math.pow(t-1,2); },
  outElastic:t => t===0||t===1?t:Math.pow(2,-10*t)*Math.sin((t-0.075)*2*Math.PI/0.3)+1,
};

// ============================================================
// Canvas 初始化（高清适配）
// ============================================================
const canvas = document.getElementById('c');
const ctx    = canvas.getContext('2d');
let W = 0, H = 0, DPR = 1;

function resize() {
  DPR = window.devicePixelRatio || 1;
  W = window.innerWidth; H = window.innerHeight;
  canvas.width  = W * DPR;
  canvas.height = H * DPR;
  canvas.style.width  = W + 'px';
  canvas.style.height = H + 'px';
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
}
window.addEventListener('resize', resize);
resize();

// ============================================================
// 骨骼定义（层级）
// 骨骼名 -> {parent, length, baseAngle}
// 坐标系：Y 向下，角度 0=右, π/2=下, π=左, -π/2=上
// ===============================.........完整代码请登录后点击上方下载按钮下载查看