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

代码语言：html

所属分类：其他

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

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

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

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=no">
<title>火柴人 · 无限对战</title>
<style>
  html,body{margin:0;padding:0;height:100%;overflow:hidden;background:#05070d;
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;}
  canvas{display:block;width:100vw;height:100vh;touch-action:none;}
  #ui{position:fixed;right:14px;bottom:14px;display:flex;gap:8px;flex-wrap:wrap;
    justify-content:flex-end;z-index:10;user-select:none;}
  #ui button{
    padding:8px 14px;border-radius:10px;border:1px solid rgba(140,190,255,.28);
    background:rgba(18,28,48,.72);color:#cfe4ff;font-size:13px;cursor:pointer;
    backdrop-filter:blur(8px);transition:.18s;letter-spacing:.5px;
  }
  #ui button:hover{background:rgba(40,80,140,.85);border-color:rgba(140,190,255,.6);
    color:#fff;transform:translateY(-1px);}
  #ui button:active{transform:translateY(0) scale(.97);}
  #hint{position:fixed;left:14px;bottom:14px;z-index:10;color:rgba(150,180,220,.45);
    font-size:12px;line-height:1.7;pointer-events:none;letter-spacing:.4px;}
</style>
</head>
<body>
<canvas id="cv"></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 格挡　空格 跳跃<br>点击画面触发慢动作特写</div>

<script>
"use strict";

// =====================================================================
// ===== 常量配置 =====
// =====================================================================
const CFG = {
  GRAVITY:      2400,    // 重力加速度 px/s²
  STAND_H:      52,      // 站立时骨盆到地面的高度
  SPEED:        175,     // 移动速度 px/s
  JUMP_VY:      -820,    // 跳跃初速度
  FRICTION_K:   13,      // 速度趋近系数
  MAX_HP:       100,
  GROUND_RATIO: 0.80,    // 地面在屏幕高度中的比例
  BODY: { TORSO: 38, UPPER_ARM: 18, FOREARM: 17, THIGH: 26, SHIN: 26, HEAD_R: 9 },
  LINE_W:       4.5
};

// =====================================================================
// ===== 画布 / 自适应 =====
// =====================================================================
const cv  = document.getElementById('cv');
const ctx = cv.getContext('2d');
let W = 0, H = 0, DPR = 1, groundY = 0;

function resizeCanvas() {
  DPR = Math.min(window.devicePixelRatio || 1, 2);
  W = window.innerWidth;
  H = window.innerHeight;
  cv.width  = Math.round(W * DPR);
  cv.height = Math.round(H * DPR);
  cv.style.width  = W + 'px';
  cv.style.height = H + 'px';
  ctx.setTransform(DPR, 0, 0, DPR, 0, 0);
  groundY = H * CFG.GROUND_RATIO;
}

// =====================================================================
// ===== 工具函数 =====
// =====================================================================
const clamp = (v, a, b) => v < a ? a : v > b ? b : v;
const lerp  = (a, b, t) => a + (b - a) * t;
const rand  = (a, b) => a + Math.random() * (b - a);

const Ease = {
  linear:  t => t,
  inOut:   t => t < 0.5 ? 2 * t * t : 1 - Math.pow(-2 * t + 2, 2) / 2,
  out:     t => 1 - Math.pow(1 - t, 3),
  in:      t => t * t * t,
  outBack: t => { const c1 = 1.70158, c3 = c1 + 1;
                  return 1 + c3 * Math.pow(t - 1, 3) + c1 * Math.pow(t - 1, 2); }
};

function roundRect(c, x, y, w, h, r) {
  r = Math.min(r, w / 2, h / 2);
  if (w <= 0) return;
  c.beginPath();
  c.moveTo(x + r, y);
  c.arcTo(x + w, y, x + w, y + h, r);
  c.arcTo(x + w, y + h, x, y + h, r);
  c.arcTo(x, y + h, x, y, r);
  c.arcTo(x, y, x + w, y, r);
  c.closePath();
}

// =====================================================================
// ===== 骨骼 · 姿势定义 =====
// =======================.........完整代码请登录后点击上方下载按钮下载查看