我如何使用 Astro 与 Tailwind 为《勇者斗恶龙VII》打造交互式“Wiki-Killer”

Source: Dev.to

问题：游戏 Wiki 已经失效 📉

我一直在玩全新的 Dragon Quest VII Reimagined Demo（Switch 2 / Steam），期间遇到了每个 RPG 玩家都熟悉的烦恼：

• 老派文字攻略（GameFAQs）在手机上玩游戏时很难阅读。
• 现代 Wiki（Fandom 等）常常充斥广告，加载慢，还会自动播放视频。

我不只是想 阅读 攻略，我想 跟踪我的进度。我需要知道自己错过了哪些 碎片碎块，以及哪些 迷你奖章 藏在井里。

于是，我没有抱怨，而是利用周末时间打造了一个解决方案：冒险日志。

主仪表盘，用于追踪 Demo 完成情况

---

技术栈：为什么选 Astro？ 🚀

我需要这个工具具备：

• 快速：在移动数据下也能瞬间加载。
• 交互：复选框、筛选器和进度条。
• 简洁：无需后端，也不需要登录。

Astro（框架）

我选择了 Astro，因为它默认 Zero JS。大部分游戏攻略都是静态内容（图片、文字、表格）。使用 React 或 Next.js 会显得大材小用，并且会带来不必要的水化负担。

使用 Astro，我可以用 JSX 语法编写 <Component />，但除非显式使用 client:load，它们都会渲染成纯 HTML。

Tailwind CSS（样式）

我想要一种像现代 RPG 菜单的 UI——简洁、卡片化且响应式。Tailwind 的实用类让构建从移动端 1 列切换到桌面端 3 列的网格布局变得轻而易举，无需编写自定义媒体查询。

LocalStorage（“数据库”）

我不想管理数据库，也不想强迫用户创建账户来勾选复选框。于是使用了一个简单的 useLocalStorage hook（通过 Preact/React）直接在浏览器中持久化用户的检查状态。

// Simplified logic for the checklist state
const [collected, setCollected] = useState(() => {
  if (typeof window !== 'undefined') {
    return JSON.parse(localStorage.getItem('dq7-shards') || '[]');
  }
  return [];
});

const toggleShard = (id) => {
  const newSet = collected.includes(id)
    ? collected.filter(i => i !== id)
    : [...collected, id];

  setCollected(newSet);
  localStorage.setItem('dq7-shards', JSON.stringify(newSet));
};

---

关键功能 🛠️

1. 交互式碎片定位器 – DQ7 需要玩家寻找颜色编码的碎片来解锁新岛屿。我构建了一个筛选系统，让用户可以按颜色（红/绿/黄）和地区进行排序。

2. “可错过” 警示 – 应用会使用视觉徽章（例如 “剧情关键” 或 “一次性访问”）高亮在特定剧情点后将变得不可获取的项目，帮助完美主义者避免重新开始游戏。

3. 可视化掉落指南 – 与其用文字写 “在箱子里”，我使用了带有实际游戏截图的卡片来直观展示。

{guide.difficulty}

---

结果：100% Lighthouse 分数 ⚡️

因为 Astro 会剔除未使用的 JavaScript，站点在 Google Lighthouse 性能指标上获得了满分 100。体验上像原生应用，但实际上只是 HTML 与 CSS。

---

结论

这个项目让我再次体会到我为何热爱 Web 开发。我们拥有构建自己想要的工具的能力。

如果你正在玩 DQ7 Demo，快来试试吧！

🔗 在线演示：

💻 GitHub： Insert Repo Link if Open Source

感谢阅读！在评论区告诉我，你更倾向于在静态站点中使用 Astro 还是 Next.js。