机器翻译正文由机器翻译自项目原始文档（英文），排版经程序统一处理，可能存在偏差，请以原项目仓库为准。

米科诺斯岛体素

一个基于浏览器的等距岛屿建设游戏，带有米科诺斯柔和、阳光漂白的地中海风格：白墙上的钴蓝色圆顶、爬满石头的三色堇藤、橄榄树、风车、狭窄的鹅卵石小路，以及可以用点击雕刻的海洋。

这是一个小型、独立的创意玩具——在14×14的网格上放置方块，小村庄就在你眼前自行建成。没有目标，没有资源积累，没有评分；只有排列物件直到看起来合适的拼图般的乐趣。

🌐 Play it: https://mykonos-island-voxels.netlify.app

功能

• 点击构建等距网格。 从右侧调色板中选择一个素材，点击单元格，它会以弹性动画放置。
• 一键“铺满草地”，快速覆盖整个岛屿并开始布置。
• 75 个绘画风格素材，分类为地形、自然、道具、水体和建筑物——教堂、风车、两层别墅、雪松、橄榄树、龙舌兰、井、灯笼、栅栏、桥梁等。
• 以触控为先的移动端界面。 点击放置，长按删除，拖拽刷涂，双指捏合和拖动。布局可从桌面自适应到小屏手机，并支持 iPhone 刘海的安全区域。
• 高保真素材管线。 源 PNG 素材在加载时以 6 倍显示分辨率预渲染，烘焙成高 DPI 缓存图层，然后逐帧合成，确保在任意缩放和屏幕密度下画布始终清晰。
• 自动保存。 你的岛屿会保存到 localStorage，下次访问时重新加载。
• 雅致的声音设计。 不同材质如水、石头、木材、小型植被、大型植被和界面点击都有独特放置声，同时去抖动以防刷涂音效重叠。
• 纯 ES 模块。 无打包器、无转译器、无 node_modules — 打开 index.html 即可运行。

控制

鼠标 键盘

触摸

本地运行

该项目是纯 HTML / CSS / ES 模块 — 开发时无需构建步骤。由于浏览器拒绝从 file:// URL 加载 ES 模块，因此确实需要通过 HTTP 提供服务。选择以下最简单的方式：

# any one of these from the project root:
python3 -m http.server 8000
npx serve .
npx http-server -c-1 .

Then open http://localhost:8000.

部署

该网站已部署到 Netlify。包含的 netlify.toml 和 netlify-build.mjs 会生成一个干净的 dist/ 文件夹，仅包含运行时文件（没有设计引用，没有 .DS_Store，没有 .webp 重复文件），并设置正确的缓存头（资产为不可变，HTML/CSS/JS 需重新验证）。

netlify deploy --prod

项目布局

.
├── index.html               # entry point
├── styles.css               # the entire UI (no framework)
├── src/
│   ├── main.js              # boot, asset loading, starter scene
│   ├── config.js            # grid size, tile dims, palette, debug flags
│   ├── core/
│   │   ├── Game.js          # game state + tool dispatch
│   │   ├── Camera.js        # pan / zoom / change notifications
│   │   ├── Renderer.js      # layered canvas caching + animations
│   │   └── InputManager.js  # mouse + touch + keyboard
│   ├── grid/
│   │   ├── IsoGrid.js       # screen ↔ cell math
│   │   └── TileMap.js       # terrain + objects, occupancy index
│   ├── building/
│   │   └── PlacementSystem.js
│   ├── assets/
│   │   ├── assetManifest.js # the 75+ asset definitions
│   │   ├── assetLoader.js   # PNG → display canvas + shadow canvas
│   │   ├── imageToAsset.js  # silhouette extraction, anchor inference
│   │   └── voxelRenderer.js # procedural fallback when PNGs missing
│   ├── ui/
│   │   ├── UIManager.js
│   │   ├── Toolbar.js
│   │   ├── AssetPalette.js
│   │   ├── HUD.js
│   │   └── Audio.js         # WebAudio clip routing + debouncing
│   └── persistence/
│       └── SaveSystem.js
├── assets/                  # PNG asset pack (pre-generated)
├── *.ogg                    # placement / UI sound effects
├── netlify.toml
└── netlify-build.mjs

架构说明

如果你想修改渲染器，有几个值得注意的选择：

• 分层缓存渲染。 Renderer.js 保留四个缓存画布：一个屏幕空间的背景渐晕对（在调整大小时重建）、一个世界空间的平台（在网格调整大小时重建）、一个世界空间的地形层（当地形版本计数器变化时重建）以及一个世界空间的静态对象层（在添加/移除时重建）。每帧渲染器会合成这些缓存，并仅叠加当前正在动画的瓦片。空闲帧基本上是免费的。
• 高DPI缓存画布。 缓存画布的大小为 world × CACHE_SCALE（标准显示器为2×，视网膜屏为3×），因此即使相机放大它们，像素也接近最终屏幕分辨率。资产显示画布预渲染至其参考大小的最高6倍，因此细节可以直接显示，不会有任何“柔化”的中间过程。
• TileMap 中的空间占用索引。 对象查找和空单元检查是每单元 O(1)，而不是遍历对象列表 O(N)。
• 脏标记渲染。 markDirty() 会在相机/输入/工具过渡时被调用；当场景静止且没有动画挂起时，循环会提前退出。

贡献

欢迎提交 PR。请：

• 保持无框架——不使用打包工具、不使用转译器、运行时不使用 node_modules。
• 保持资源数量适中，视觉风格统一（钴蓝色配奶油色，柔和阴影，轻柔弹性运动）。
• 不要添加每帧 ctx.filter、ImageBitmap 操作或任何会在重场景中重新引起帧掉落的东西。渲染器的缓存不变量是承重的。

许可证

MIT — see LICENSE.

assets/ 中的 PNG 资源包在相同的许可下发布，为此项目生成。音频片段是单独创作的；如果需要归属，请查看文件元数据。