法尔斯特的击力学实验室

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>法尔斯特的击力学实验室</title>
<style>
  body { margin:0; background:#0a0e14; color:#fff; font-family:monospace; display:flex; flex-direction:column; align-items:center; justify-content:center; height:100vh; }
  canvas { border:1px solid #30363d; background:#111; }
  #log { position:absolute; bottom:20px; color:#3fb950; }
</style>
</head>
<body>

<canvas id="lab" width="600" height="400"></canvas>
<div id="log">按【空格键】施加一个“击”，法尔斯特将受到加速度。</div>

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

// ================= 法尔斯特的物理本体 =================
const falst = {
  x: 100,
  y: 350,
  vx: 0,
  vy: 0,
  mass: 1.0,       // 质量 m
  force: 0,        // 击（力）F
  floorY: 350      // 地面（击的普遍律：受地面的击）
};

// 宇宙常量
const gravity = 0.5;         // 地面产生的“击”（重力加速度）
const airFriction = 0.98;    // 空气阻力（让运动最终停止）

let time = 0; // 时内距的累加

function updatePhysics() {
  // 1. 计算总受力（击）
  let totalForceY = gravity * falst.mass; // 地面给的“击”
  
  // 2. 二次时内距（加速度）：a = F / m
  let ay = totalForceY / falst.mass;
  
  // 3. 时内距累加（更新速度）：v = v + a * dt (这里dt简化为1帧)
  falst.vy += ay;
  falst.vx *= airFriction; // 摩擦力
  
  // 4. 更新位置（时内距的体现）
  falst.x += falst.vx;
  falst.y += falst.vy;

  // 5. 碰撞检测：地面的“击”抵消了运动
  if (falst.y >= falst.floorY) {
    falst.y = falst.floorY;
    falst.vy = 0; // 被地面的击抵消了
    falst.vx *= 0.9; // 落地损耗
  }
}

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  
  // 画地面
  ctx.fillStyle = '#30363d';
  ctx.fillRect(0, 360, canvas.width, 40);
  
  // 画法尔斯特（一个橘色方块，代表猫）
  ctx.fillStyle = '#f0883e';
  ctx.fillRect(falst.x - 15, falst.y - 30, 30, 30);
  
  // 画眼睛
  ctx.fillStyle = '#000';
  ctx.fillRect(falst.x - 8, falst.y - 22, 5, 5);
  ctx.fillRect(falst.x + 3, falst.y - 22, 5, 5);

  // 显示状态
  ctx.fillStyle = '#8b949e';
  ctx.font = '12px monospace';
  ctx.fillText(`质量 m: ${falst.mass}`, 20, 30);
  ctx.fillText(`速度 vx: ${falst.vx.toFixed(2)}`, 20, 50);
  ctx.fillText(`位置 x: ${falst.x.toFixed(1)}`, 20, 70);
  ctx.fillText(`时内距 t: ${time.toFixed(1)}`, 20, 90);
}

function loop() {
  updatePhysics();
  draw();
  time += 0.016; // 累加时内距
  requestAnimationFrame(loop);
}

// 键盘监听：按空格施加一个“击”
window.addEventListener('keydown', (e) => {
  if (e.code === 'Space') {
    falst.vx += 8; // 施加一个水平方向的“击”，产生二次时内距
    falst.vy -= 12; // 跳起来
    document.getElementById('log').textContent = '💥 施加了一个“击”！';
  }
});

loop();
</script>
</body>
</html>