DevTrends开发者趋势
主题色

产品

Chromium Dino,一款使用现代 Web 技术构建的游戏,打包为桌面应用发布至 Steam

steam 商店。灵感来源于经典的 Chrome 离线恐龙小游戏,Chromium Dino 在此基础上进行了全面重构——多生态关卡、技能道具、皮肤系统、幽灵竞速、每日挑战,以及商业级深色 UI,全部运行于 Electron 之上。 特性 5 大关卡生态 — 沙漠、雪原、森林、城市、太空,各有独特障碍物与场景氛围 道具系统 — 护盾、冲刺、慢动作、双倍积分、磁铁,5 种增益道具 可解锁皮肤 — 经典、忍者、太空、骑士、机器人、黄金,用游…

DT桌面效率DT生活与娱乐DT桌面应用DT库 / SDKDTWeb

关于

steam 商店。灵感来源于经典的 Chrome 离线恐龙小游戏,Chromium Dino 在此基础上进行了全面重构——多生态关卡、技能道具、皮肤系统、幽灵竞速、每日挑战,以及商业级深色 UI,全部运行于 Electron 之上。 特性 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 # 组件样式

收录记录

  1. 阮一峰周刊·用户投稿

    2026年5月24日 · 1 次收录

讨论这个产品