前言
最近刷b站，居然有网页版本的PVZ年度版，它使用的是wasm技术，真感觉什么东西，都可以搬到浏览器上了，视频如下：
什么？PVZ年度版运行到Android MacOS Linux 甚至是网页上？这集更神了
使用
项目地址：https://github.com/wszqkzqk/PvZ-Portable
这个项目是需要自行提供原版游戏的main.pak包与 properties/文件夹，其中main.pak是游戏核心资产包，包括PopCap 引擎使用 .pak 格式将游戏所需的所有图片、音乐、音效、关卡数据、字体、动画脚本等，这些都是有版权的，然后就是 properties下的配置文件：
partner.xml 规定了游戏在启动时展示的联名品牌信息
partner.xml.sig 签名文件,防止玩家或第三方恶意篡改 partner.xml
partner.xml.sig2 双重复核数字签名，防止当年玩家通过修改 partner.xml 绕过 Origin 的正版登录锁
partner_logo.jpg 合作伙伴/发行商的 Logo 图片
default.xml 游戏基础引擎配置文件，例如：默认的分辨率、是否默认全屏启动
Layout.xml 界面/窗口布局配置文件，规定了游戏在启动内嵌窗口对齐方式以及字体样式
其中PvZ-Portable测试了，只要main.pak与 properties/partner_logo.jpg就可以成功运行，而这个版本的，命令行参数自定义这些路径，-resdir=""设置资源目录（main.pak文件properties/所在位置）及-savedir=""设置保存数据目录（用于存储设置、存档、缓存和屏幕截图），而它在网页上运行用的是wasm技术，游戏存档数据存储在浏览器的 IndexedDB 数据库中，通过屏幕上的按钮来导出。
开发
当我得知它可以运行在网页上，我就想将它移植到飞牛上去玩，感觉这个wasm技术真神奇，可以将C++游戏转成网页上跑的程序，面对这个应用的移植有两个大的难点，现在是每次手动上传文件才可以运行，当然避免版本问题是在所难免的，然后就是它的游戏存档问题了，它用的是浏览器的 IndexedDB那就意味着，存档在浏览器中，若是更换了浏览器或清空了浏览器记录，那数据就会立刻没有了，而且这样手机与电脑的游戏进度也不一致，那为什么它用的是浏览器的 IndexedDB，原因是html或javascript运行在浏览器沙盒中，没有用户的授权是不能访问本地文件夹的，也不能修改本地文件，就像是WASM 程序本身只能访问 Emscripten 的虚拟文件系统(FS)，这样访问不了也修改不了本地文件，自然存档数据就同步不了。
解决办法也很简单，写一个后端给它存档的api给它调用，也就是后端去读取或是修改服务器上的存档文件，这样就可以实现存档的一致性了，而同样的这个程序需要提供main.pak文件，每次玩之前都要先上传资源很影响体验，而在资源固定的场景下，最理想的体验是：用户打开网页，浏览器自动从服务器下载 main.pak 等资源并注入到 WASM 的虚拟文件系统中，随后直接进入游戏，无需任何手动上传操作，同样的也是要一个后端，给它提供静态文件下载功能，所以总结下来，我们要手写一个后端。
写后端最适合的就是go语言了，它不像nodejs要安装个nodejs环境才能用，用go写好后可以直接编译成二进制文件运行，所以我用它写一个go后端，给这个wasm程序提供存档的api调用和静态资源的下载，比如main.pak文件：优先读取 IndexedDB，若有缓存则直接写入虚拟文件系统，若无缓存则请求go后端下载资源，下载完成后存入 IndexedDB最后启动游戏，为什么每次都要提供main.pak给这个wasm程序，因为这个WASM 的虚拟文件系统相当于内存，一断 电就会数据全没，然后就是游戏画面比例的调整，与加入移动端全屏等，这样就完成这应用的简单适配了。
现在，就有了打包好的fpk包了，去https://github.com/ctllo-bit/FnDepot/tree/main/pvz-portable下载fpk包，或者是在Fndepot上下载好，然后直接安装运行，然后去网上找原版的游戏文件，将main.pak与properties文件夹上传到应用目录，如下图所示：
没有这两个文件，就不能正常启动，如下图所示：
安装好，然后上传两个文件到应用文件夹，就可以正常游玩了，如下图所示：
正常启动后，创建了游戏用户，就会生成userdata文件夹，这里面的.dat就是游戏的存档文件，如下图所示：
电脑与飞牛app都可以使用，存档用的是同一个数据（如上图所示），用的是飞牛的统一网关，默认访问地址是：htpp//:192.168.xx.xxx:5666/app/pvz-portable/，最后祝各位玩的愉快。
