仿写微信跳一跳[H5]

引擎：three.js

语言：javascript

介绍：仿制微信跳一跳的网页版，实现了跳一跳的基本核心功能

展示：https://jsmask.github.io/jump-game/index.html

功能特性

• ✅ 完整的跳一跳游戏逻辑
• ✅ 支持作为 npm 包使用
• ✅ 支持 React、Vue 等框架集成
• ✅ 提供完整的 API 和回调接口
• ✅ 通过回调获取分数和游戏状态

使用方式

方式一：作为 npm 包使用（推荐）

npm install jump-to-h5-game

注意：three.js 已经包含在包内，无需单独安装。

<!-- 1. 在 HTML 中添加容器标签 -->
<div id="game-container" style="width: 375px; height: 667px;"></div>

<script type="module">
  // 2. 引入游戏包（three.js 已包含在包内）
  import JumpGame from 'jump-to-h5-game';
  
  // 3. 创建游戏实例并初始化
  const game = new JumpGame({
    container: '#game-container',
    backgroundImage: './images/background.jpg', // 可选：背景图片
    // backgroundColor: 0xf5f5f5, // 可选：背景颜色（当没有图片时使用）
    // scoreColor: 0xff0000, // 可选：分数字体颜色（红色），默认 0x666666（灰色）
    onScoreChange: (score) => console.log('分数:', score),
    onGameOver: (score) => {
      console.log('游戏结束，分数:', score);
      // 游戏结束后可以重启
      setTimeout(() => {
        game.restart();
      }, 2000);
    }
  });
  
  game.init('#game-container');
</script>

详细使用说明请查看 NPM_USAGE.md

方式二：本地开发

# 安装依赖
yarn install

# 开发模式（热重载）
yarn start

# 构建生产版本
yarn build

# 预览构建结果
yarn serve

项目结构

jump_to_h5/
├── src/              # 源代码
│   ├── game/        # 游戏核心逻辑
│   ├── stage/       # 游戏场景
│   ├── scene/       # Three.js 场景
│   ├── utils/       # 工具类
│   └── index.js     # npm 包入口文件
├── public/          # 静态资源
├── dist/            # 构建输出
├── webpack.config.js        # 开发构建配置
├── webpack.npm.config.js   # npm 包构建配置
└── package.json     # 项目配置

文档

• NPM 包使用说明 - 如何在其他项目中使用本包

License

ISC