Skillppx logo

React Game Loop Hooks

基于 requestAnimationFrame 的 React 游戏循环与动画钩子，支持 delta 时间处理和安全清理。

已扫描
适合谁
前端开发者、游戏开发初学者
不适合谁
后端开发者、非浏览器环境使用者
国内可用性
需网络配置。可能需要网络配置或第三方服务可访问。
安装难度
新手友好（★☆☆）。基于终端操作、依赖、API Key 和本地环境要求的初步判断。

安装与下载

openclaw skills install @ravenquasar/react-game-loop
下载官方 ZIP

Skill 说明

命令、参数、文件名以原文为准

React 游戏循环 Hook

适用于使用 requestAnimationFrame 的游戏循环和动画的生产就绪自定义 React Hook。

安装

将 Hook 文件复制到你的项目中：

# 从你的技能目录中
cp <skill-dir>/assets/hooks/useGameLoop.ts src/hooks/

<skill-dir> 指代你的 OpenClaw 技能安装目录。

依赖项

  • React >= 16.8（支持 Hooks）
  • TypeScript >= 4.0（用于类型安全）
  • react-dom >= 16.8（在浏览器环境中提供 requestAnimationFrame 类型）

此 Hook 仅限浏览器环境使用 —— 它依赖于 requestAnimationFrame，在 Node.js 或 SSR 环境中不可用。

API 参考

useGameLoop(options)

import { useGameLoop } from './hooks/useGameLoop';

参数：

参数类型默认值描述
onFrame(deltaTime: number, elapsedTime: number) => void—每帧调用一次，传入时间差（毫秒）和累计时间（毫秒）。必填。
maxDeltaTimenumber100最大时间差限制（毫秒）。防止标签页切换或卡顿时出现巨大跳跃。

返回值：

字段类型描述
start() => void启动游戏循环
stop() => void停止游戏循环
isRunningboolean当前循环状态

使用模式

防止闭包过期

在异步或闭包上下文中（如 requestAnimationFrame、setInterval、事件监听器）读取回调或状态时，请使用 useRef。始终在 useEffect 中同步 ref。

const cbRef = useRef(onFrame);
useEffect(() => { cbRef.current = onFrame; }, [onFrame]);

组件卸载时清理

在 useEffect 中始终返回清理函数。对于 RAF 或定时器，将句柄存储在 ref 中，并在卸载时取消。

useEffect(() => {
  const id = requestAnimationFrame(tick);
  return () => cancelAnimationFrame(id);
}, []);

错误容错

将用户回调包裹在 try/catch 中，防止错误影响内部循环状态。

try {
  callbackRef.current(delta, elapsed);
} catch (err) {
  console.error('hook 回调错误:', err);
}

时间差限幅

在游戏循环中，对 deltaTime 进行限幅，避免标签页切换或卡顿导致的时间跳跃。

const delta = Math.min(rawDelta, maxDeltaTime);

示例

参见 assets/examples/GameTimer.tsx，获取完整使用示例，展示累计时间与 FPS 显示功能。

参考

  • assets/hooks/useGameLoop.ts — 基于 requestAnimationFrame 的游戏循环，包含启动/停止/运行状态控制、时间差限幅和错误容错
  • assets/examples/GameTimer.tsx — 基础使用示例
R
@ravenquasar

已收录 1 个 Skill

相关推荐