@tom_doerr：在浏览器中通过在 14x14 等距网格上放置超过 75 个绘画风格资源来构建阳光曝晒的地中海岛屿。ht…

在浏览器中构建一座阳光浸染的地中海岛屿——通过在 14×14 等距网格上放置超过 75 种绘画风格资产。https://github.com/boona13/mykonos-island-voxels… — # boona13/mykonos-island-voxels 来源：https://github.com/boona13/mykonos-island-voxels # 米科诺斯岛体素 一个基于浏览器的等距岛屿建造器，拥有米科诺斯岛柔和、阳光浸染的地中海风格：白墙上的钴蓝色圆顶、从石头上倾泻而下的叶子花、橄榄树、风车、狭窄的鹅卵石小路，以及一片你可以用点击来雕刻的海洋。这是一个小巧、独立的创意玩具——在 14×14 的网格上放置方块，一个微型村庄便在你眼前自动生成。这里没有目标，没有资源的枯燥积累，没有评分；只有拼图般的乐趣，不断调整布置直至它们看起来恰到好处。 🌐 开始体验： 米科诺斯岛体素——示例场景 — ## 功能特点 - 点击建造等距网格。 从右侧调色板中选择一种资产，点击一个单元格，它就会伴随弹性放置动画弹入。 - 一键“用草填充” 可以快速为岛屿铺上草地，并在几秒钟内开始布置。 - 超过 75 种绘画风格资产，按地形、自然、道具、水域和建筑分类——包括小教堂、风车、两层别墅、柏树、橄榄树、龙舌兰、水井、灯笼、栅栏、桥梁等。 - 移动优先的用户界面。 点击放置，长按擦除，拖动批量绘制，双指捏合缩放与平移。布局可从桌面适配到小屏手机，并为 iPhone 刘海区提供安全区域边距。 - 高保真资产管线。 源 PNG 文件在加载时以 6 倍显示分辨率预渲染，烘焙成高 DPI 缓存层，然后每帧合成，以确保画布在任何缩放级别和屏幕密度下都保持清晰。 - 自动保存。 你的岛屿会保存到 localStorage，并在下次访问时重新加载。 - 品味良好的声音设计。 为水、石头、木材、小型植被、大型植被和界面点击设置了独特的声音，采用防抖机制以避免批量绘制时音频总线过载。 - 纯 ES 模块。 没有打包工具，没有转译器，没有 node_modules——打开 index.html 即可运行。 ## 操作方式 ### 鼠标 + 键盘 | 输入 | 操作 | |—|—| | 点击 | 放置所选资产 | | 拖动 | 跨单元格批量放置 | | 右键点击 | 擦除瓷砖 | | 右键拖动 | 批量擦除 | | Shift + 拖动 | 平移视角 | | 滚轮 | 缩放 | | H / V | 翻转放置预览 | | E | 切换擦除模式 | | G | 切换网格叠加层 | | 1–5 | 切换调色板类别 | | S / R | 保存 / 重置 | ### 触控操作 | 手势 | 操作 | |—|—| | 点击 | 放置所选资产 | | 拖动 | 跨单元格批量放置 | | 长按（约 420 毫秒） | 擦除手指下方的瓷砖 | | 双指捏合 | 缩放 | | 双指拖动 | 平移视角 | ## 本地运行 该项目是纯 HTML / CSS / ES 模块——无需任何构建步骤即可开发。由于浏览器不允许从 file:// URL 加载 ES 模块，你需要通过 HTTP 提供服务。选择以下任一最简单的方式： bash # 在项目根目录下执行以下任意命令： python3 -m http.server 8000 npx serve . npx http-server -c-1 . 然后打开 . ## 部署 该网站部署在 Netlify 上。项目包含的 netlify.toml 和 netlify-build.mjs 会生成一个干净的 dist/ 文件夹，其中只包含运行时文件（没有设计参考文件，没有 .DS_Store，没有重复的 .webp 文件），并设置正确的缓存头（资产使用不可变缓存，HTML/CSS/JS 使用必须重新验证）。 bash netlify deploy --prod ## 项目结构 . ├── index.html # 入口文件 ├── styles.css # 整个 UI（无框架依赖） ├── src/ │ ├── main.js # 启动、资产加载、初始场景 │ ├── config.js # 网格大小、瓷砖尺寸、调色板、调试标志 │ ├── core/ │ │ ├── Game.js # 游戏状态 + 工具分发 │ │ ├── Camera.js # 平移 / 缩放 / 变化通知 │ │ ├── Renderer.js # 分层画布缓存 + 动画 │ │ └── InputManager.js # 鼠标 + 触控 + 键盘 │ ├── grid/ │ │ ├── IsoGrid.js # 屏幕 ↔ 单元格坐标数学 │ │ └── TileMap.js # 地形 + 物体，占用索引 │ ├── building/ │ │ └── PlacementSystem.js │ ├── assets/ │ │ ├── assetManifest.js # 75+ 资产定义 │ │ ├── assetLoader.js # PNG → 显示画布 + 阴影画布 │ │ ├── imageToAsset.js # 轮廓提取、锚点推断 │ │ └── voxelRenderer.js # PNG 缺失时的程序化回退渲染 │ ├── ui/ │ │ ├── UIManager.js │ │ ├── Toolbar.js │ │ ├── AssetPalette.js │ │ ├── HUD.js │ │ └── Audio.js # WebAudio 剪辑路由 + 防抖 │ └── persistence/ │ └── SaveSystem.js ├── assets/ # PNG 资产包（预生成） ├── *.ogg # 放置 / 界面音效 ├── netlify.toml └── netlify-build.mjs ## 架构说明 如果你想修改渲染器，以下几点值得注意： - 分层缓存渲染。 Renderer.js 维护四个缓存画布：一个屏幕空间背景加暗角对（窗口调整大小时重建），一个世界空间平台层（网格大小调整时重建），一个世界空间地形层（当地形版本计数器变化时重建），以及一个世界空间静态物体层（添加/移除物体时重建）。每一帧，渲染器合成这些缓存，并仅叠加当前正在动画的瓷砖。空闲帧的开销几乎为零。 - 高 DPI 缓存画布。 缓存画布尺寸为 世界大小 × 缓存缩放比例（标准显示屏为 2×，Retina 显示屏为 3×），这样即使摄像机将其放大，像素也处于或接近屏幕最终分辨率。资产的显示画布以高达其参考尺寸 6 倍的分辨率预渲染，因此细节得以保留，不会经过任何“软化”中间步骤。 - TileMap 中的空间占用索引。 物体查找和空单元格检查是每个单元格 O(1) 的操作，而不是遍历物体列表的 O(N)。 - 脏标记渲染。 markDirty() 在摄像机/输入/工具切换时被调用；当场景静止且没有待处理动画时，循环会提前退出。 ## 贡献 欢迎提交 PR。请注意： - 保持无框架依赖——运行时不要使用打包工具、转译器或 node_modules。 - 保持资产数量适中，视觉风格统一（钴蓝配奶油色，柔和阴影，温和的弹性运动）。 - 不要添加每帧的 ctx.filter、ImageBitmap 魔法，或任何会在复杂场景中重新引入掉帧的东西。渲染器的缓存不变量至关重要。 ## 许可证 MIT — 请参阅 LICENSE。 assets/ 中的 PNG 资产包在相同许可下发布，专为该项目生成。音频片段由其他作者单独制作；如需署名请查看文件元数据。