今天跟大家唠唠我捣鼓的这个“美人鱼之谜”官方网站，别看名字挺玄乎，就是个练手的小项目。从想法冒头到跑起来，中间踩了不少坑，也学到不少东西，现在就来絮叨絮叨。
灵感就是觉得市面上那些解谜游戏挺有意思，美人鱼题材又自带神秘感，就想着能不能自己也整个活。有了想法，第一步就是先把网站的架子搭起来。
我习惯用 *，上手快，组件化开发也方便。先 `vue create mermaid-mystery`，然后选了默认配置，一个基本的 Vue 项目就建好了。
接下来就是设计页面了。因为是解谜游戏，官网主要功能就是展示游戏介绍、角色设定、一些游戏截图和预告片，再加个购买入口。UI方面，我参考了一些海洋主题的网站，颜色主色调定为蓝色和紫色，字体也选了比较柔和的，力求营造一种神秘又梦幻的感觉。
把首页的 HTML 结构搭好后，就开始往里面填内容。游戏介绍这块，我花了不少心思。不能剧透太多，又要能勾起玩家的好奇心，真是太难了。折腾了好几个版本，才算勉强满意。
角色设定页面，我用了卡片式的布局，每个角色一张卡片，上面有角色立绘和简单的背景介绍。图片素材是找朋友帮忙画的，画风很赞，一下子就提升了整个网站的逼格。
小编温馨提醒：本站只提供游戏介绍，下载游戏推荐89游戏，89游戏提供真人恋爱/绅士游戏/3A单机游戏大全，点我立即前往》》》绅士游戏下载专区
游戏截图和预告片，直接用的 `` 标签和 `
购买入口，我直接链接到了 Steam 平台，省事。
静态页面搞定后，就开始考虑一些交互效果。比如鼠标悬停在角色卡片上时，卡片会放大并显示更详细的介绍；点击预告片时，会弹出一个模态框播放视频。这些效果都是用 Vue 的指令和 CSS 动画实现的，代码不复杂，但效果还不错。
网站基本成型后，就是部署上线了。我选了 Netlify，因为它免费又好用。只需要把代码推送到 GitHub 仓库，然后在 Netlify 上配置一下，网站就能自动部署了。
上线后，我发现了一些问题。比如在手机上的显示效果不太一些动画效果在低端机上会卡顿。于是我又花了一些时间，对网站进行了响应式布局的调整，并优化了动画效果。
整个“美人鱼之谜”官方网站的开发过程，大概花了我一周的时间。虽然只是个小项目，但让我对前端开发有了更深入的了解。尤其是 * 的使用，更加得心应手了。以后有机会，希望能开发出更复杂的项目。
