首页 / 作品 / KittyCraft

KittyCraft

我的世界 · Hello Kitty 版 —— 浏览器里的凯蒂方块世界

KittyCraft 标题界面
类型
浏览器体素沙盒
技术
Three.js + TypeScript + Vite
构建产物
632 KB(JS + CSS)
素材
零外部素材 · 运行时生成
平台
桌面 + 手机浏览器
状态
可在线试玩

🧱 这是什么

用 Hello Kitty 的方式打开《我的世界》:在一片粉樱森林里挖方块、砍树、合成工具,盖一间自己的小屋,顺手驯服几只凯蒂猫。整个游戏跑在浏览器里,点开就能玩,不用下载安装 —— 手机上也可以。

  • 挖掘与建造:方块挖掘、掉落物拾取、合成台做工具、自由搭房子
  • 粉樱世界:程序化地形 + 樱花树,昼夜与天空实时变化,风吹粒子飘
  • 驯服凯蒂猫:小猫会跟着你走,喂它东西会有反应
  • 该有的都有:背包与合成、暂停菜单、设置、玩法说明、存档、自定世界种子
Gallery

实机截图

标题界面、游玩中、背包与暂停菜单 —— 点开看大图。

Behind the scenes

技术细节

⚙️ 怎么做到的

  • 体素世界:区块式地形生成 + 面剔除网格,只渲染看得见的面;远处按距离剔除,手机上也能跑
  • 零外部素材:方块贴图在运行时拼成图集,音效由 Web Audio 现场合成 —— 整个构建产物 632 KB,没有一张图片文件
  • 游戏系统分层:core/(循环 / 输入 / 存档 / 设置 / 音频)、world/(地形 / 区块 / 方块表)、entities/(玩家 / 生物 / 掉落物 / 手部与物理)、ui/(HUD / 背包 / 像素字体)、fx/(天空 / 粒子)
  • 像素级 UI:自绘像素字体与图标,配色统一走凯蒂粉,菜单、背包、设置全部手写

🐞 实机验收:三个致命 bug

这个项目最有意思的不是写完,而是「真打开跑一遍」—— 第一次实机验收就炸出三个致命问题,全部定位并修掉:

  • UI 点不动:界面层与画布的事件穿透 / 层级问题,按钮收不到点击
  • 世界全黑:法线与材质配置不对,进世界一片黑
  • 跳跃失效:移动与重力判定顺序错,按了跳不起来

验收方式也写成了脚本(tools/playtest.mjs):连上真实 Chrome、走一遍开局流程、逐屏截图存档 —— 以后每次改动都能自动回归。

要不要现在玩一把?

点下面按钮直接在浏览器打开,无需安装;玩完可以顺便看看另外两个作品。