[分享创造] 周末发布一个 steam 游戏,灵感来源于经典的 Chrome 离线恐龙小游戏

steam 商店链接 特性 5 大关卡生态 — 沙漠、雪原、森林、城市、太空,各有独特障碍物与场景氛围 道具系统 — 护盾、冲刺、慢动作、双倍积分、磁铁,5 种增益道具 可解锁皮肤 — 经典、忍者、太空、骑士、机器人、黄金,用游戏内金币购买 幽灵竞速 — 与自己的最佳录像赛跑 本地双人 — 同一台机...
[分享创造] 周末发布一个 steam 游戏,灵感来源于经典的 Chrome 离线恐龙小游戏
[分享创造] 周末发布一个 steam 游戏,灵感来源于经典的 Chrome 离线恐龙小游戏

steam 商店链接

特性

  • 5 大关卡生态 — 沙漠、雪原、森林、城市、太空,各有独特障碍物与场景氛围
  • 道具系统 — 护盾、冲刺、慢动作、双倍积分、磁铁,5 种增益道具
  • 可解锁皮肤 — 经典、忍者、太空、骑士、机器人、黄金,用游戏内金币购买
  • 幽灵竞速 — 与自己的最佳录像赛跑
  • 本地双人 — 同一台机器上双人游玩
  • 每日挑战 — 每天生成相同种子关卡,全球玩家同台竞技
  • 昼夜循环 — 游戏过程中动态光照切换
  • Steamworks 集成 — 成就、排行榜、统计数据(可选;无 SDK 时自动进入离线模式)
  • 手势模式(实验性) — 通过摄像头手势控制恐龙:竖起大拇指跳跃,向下竖大拇指蹲下
  • 头控模式(实验性) — 解放双手,通过头部姿态控制恐龙:抬头跳跃、低头蹲下、左右转头触发临时速度变化
  • 专业级深色 UI — 动态渐变背景、毛玻璃 HUD 、流畅过渡动画

技术栈

层级 技术 运行时 Electron 28 游戏引擎 Phaser 3.90 UI 框架 React 19 状态管理 Zustand 5 语言 TypeScript 5.7 构建工具 Vite 6 + electron-vite 5 打包发布 electron-builder 24

项目结构

src/
├── main/                  # Electron 主进程
│   ├── index.ts
│   └── steam.ts           # Steamworks SDK 集成
├── preload/               # 预加载脚本( Context Bridge )
│   └── index.ts
└── renderer/              # 渲染进程
    └── src/
        ├── App.tsx            # 根组件 & 事件绑定
        ├── main.tsx           # React 入口
        ├── phaser-game.tsx    # Phaser ↔ React 桥接
        ├── components/        # React UI 组件
        │   ├── main-menu.tsx
        │   ├── game-overlay.tsx
        │   ├── game-over.tsx
        │   ├── skin-selector.tsx
        │   ├── shop.tsx
        │   ├── settings.tsx
        │   └── daily-challenge.tsx
        ├── stores/            # Zustand 状态仓库
        │   ├── game-store.ts
        │   ├── input-mode-store.ts
        │   └── player-store.ts
        ├── hooks/
        │   └── use-game-events.ts  # Phaser ↔ React 事件钩子
        ├── game/
        │   ├── main.ts        # Phaser 游戏引导
        │   ├── event-bus.ts   # 跨框架事件总线
        │   ├── types/         # 共享 TypeScript 类型 & 枚举
        │   ├── assets/        # Chrome 精灵图资源
        │   ├── scenes/        # Phaser 场景
        │   │   ├── boot.ts
        │   │   ├── preloader.ts
        │   │   └── game-scene.ts
        │   ├── objects/       # 游戏对象
        │   │   └── dino.ts
        │   ├── managers/      # 游戏子系统管理器
        │   │   ├── background-manager.ts
        │   │   ├── camera-source.ts
        │   │   ├── difficulty-manager.ts
        │   │   ├── ghost-manager.ts
        │   │   ├── head-pose-source.ts
        │   │   ├── ground-manager.ts
        │   │   ├── input-manager.ts
        │   │   ├── level-manager.ts
        │   │   ├── obstacle-manager.ts
        │   │   ├── power-up-manager.ts
        │   │   └── score-manager.ts
        │   ├── sprites/       # 程序化精灵生成
        │   └── audio/         # 程序化音频生成
        └── styles/
            ├── global.css     # 设计令牌 & 基础样式
            └── components.css # 组件样式
来源: v2ex查看原文