本地部署VIM AdventuresVIM大冒险1. 简介VIM Adventures是一款用于学习VIM编辑器使用的在线网页端小游戏通过这个游戏我们能够快速掌握VIM的一些常用的基本命令可谓是新手福音。这款游戏有官方版本官网https://vim-adventures.com但是在官方版本中只有前三关是免费的想要游玩之后的关卡需要购买证书需要25美元且只有6个月使用期。由于价格对于很多学生党来说可能略高而且在国内购买也不太方便我选择寻找其他能够免费完整体验这个游戏的方法。2. 本地部署2.1. 开源项目Github上曾有对该游戏进行逆向的项目也有很多相关的folk项目但这些项目都被游戏原作者要求下架了这些项目现在要么显示takedown要么就是404。详情见https://github.com/github/dmca/blob/fe3a3533c22817d674fec81fd4f814f7d3f187c2/2020/11/2020-11-12-VIMAdventures.md因此现在Github上已经找不到相关的项目了。使用互联网档案馆查找这些项目曾经的存档目前能找到且源码还能下载的只有https://github.com/wattry/vim-adventures这个项目的归档打开要科学上网https://web.archive.org/web/20201013182809/https://github.com/wattry/vim-adventures或者可以在以下网站下载项目源码https://vim-adventures2.pages.dev该项目将VIM Adventures的核心代码逆向了出来现在只需要将项目下载下来部署于本地就可以游玩这个游戏的完整版本。2.2. 使用方法简述要想使用该项目你需要将它部署在本地或者云端的服务器上。原项目有打包好的可执行程序设置一下环境变量直接运行就能完成部署也有完整源代码需要配置好Nodejs环境使用npm构建安装后才能使用。另外笔者又修改完善了该项目的代码和相关文件就得到了两大修改后的新版本一个是动态网页版就是在原项目的基础上配置好了Nodejs的第三方库只需要安装好Nodejs即可运行另外一个版本是静态网页版无须配置Nodejs环境托管在静态服务器上即可运行。Vim Adventures是可以保存和加载游戏进度的原项目版本和笔者的动态网页版可以将游戏进度数据保存在服务器上而静态网页版会将游戏进度数据保存在浏览器只需要将一些资源文件放在静态服务器上就能运行部署最方便。由于移动端没有自带键盘原版的VIM Adventures只能在PC端上的浏览器游玩除非为移动端接上外接键盘否则无法直接在移动端浏览器上使用笔者为解决这一问题又针对移动端浏览器修改制作了兼容移动端的静态网页版这一版本主要是为移动端添加了js虚拟键盘详见下文的静态网页版部署。如果你已经迫不及待想玩到这个游戏可以免费游玩笔者搭建的在线版本https://vim-adventures2.pages.dev由于这个托管服务是免费的游戏进度可能因托管服务失效而丢失因此建议部署在自己的服务器上。接下来介绍这三个版本的部署方式。其中第一种原项目直接部署和第三种静态网页部署的方法最简单成本最低。2.3. 原项目部署原项目归档地址https://web.archive.org/web/20201013182647/https://github.com/wattry/vim-adventures原项目有2种部署方式一种是直接下载打包好的程序配置一下环境变量然后运行即可完成直接部署最简单快捷还有一种是下载源码并配置好nodejs环境构建安装进行部署。该项目的文件可以通过如下方法获取打开项目的Releases页面进行下载https://web.archive.org/web/20201013182809/https://github.com/wattry/vim-adventures/releases/tag/v1.1.0如果上述链接无法打开可以使用以下链接下载备用链接1https://fileditchfiles.me/file.php?f/s22/ohjZVGOJHmWPUdwageo.zip备用链接2https://files.catbox.moe/chq283.zip备用链接3https://wwbbt.lanzout.com/iaAtW3h469ni具体需要用到哪些文件见下文。2.3.1. 方法一直接部署1. 下载打包好的程序根据自己的系统选择对应的程序这里以Windows系统举例需要下载vim-adventures-win.exe那么需要从Releases页面下载该程序或者从直链下载得到的压缩包中找到该程序。2. 设置环境变量主要设置APP_DIR和PORT两个环境变量前者用于指定游戏存档数据的保存位置后者用于指定服务器监听的端口有两种设置方法1方法一在程序运行前用命令行命令设置环境变量比如在Windows下set APP_DIR%USERPROFILE%\vim-adventures set PORT80那么会将游戏存档保存在用户主目录的vim-adventures目录下设监听端口为80。2方法二在程序的同级目录下新建一个名为.env的文件在该文件中写入如下内容APP_DIR$HOME/vim-adventures PORT80作用同上。3. 运行程序2.3.2. 方法二源码构建部署从源码构建打包得到游戏服务端程序。1. 下载并安装nodejshttps://nodejs.org/en/download这里使用14.21.3版本其他版本在接下来进行构建时可能会报错。2. 下载项目源代码从Releases页面选择Source Code(tar.gz)下载或在直链下载压缩包中找到vim-adventures-1.1.0.tar.gz下载完后解压缩3. 进入工作目录项目的根目录是vim-adventures-1.1.0我们需要进入到项目根目录中的vim-adventures目录cd vim-adventures-1.1.04. 设置环境变量编辑项目根目录下的.env文件HOSThttp://localhost# NodeJS default locationAPP_DIR$HOME/vim-adventuresAPP_NAMEvim-adventuresPORT80APP_DIR设置存放最终打包得到的程序的目录需要设为绝对路径APP_NAME设置输出的程序名称可以根据需要自行设置。PORT设置端口。5. 构建安装npm run setup完成后会在APP_DIR目录下生成名为APP_NAME的程序比如在Windows下使用上述设置会在用户主目录的vim-adventures文件夹下生成vim-adventures.exe程序。另外在APP_DIR目录下也会生成一个.env文件修改该中文件PORT的值或使用命令行命令设置环境变量PORT可以设置端口。6. 运行直接运行vim-adventures.exe程序即可运行浏览器打开127.0.0.1就可以免费游玩了。2.3.3. 其他方法归档项目的主页有讲到使用docker部署的方法。2.4. 动态网页部署部署方法和上文中的原项目从源码构建部署方法相同需要下载Nodejs但不需要进行第4步构建安装的过程避免了构建安装过程中可能出现的报错。1. 安装Nodejs2. 下载动态网页版文件https://wwbbt.lanzout.com/i8P823h44uqf下载完后解压缩3. 进入工作目录cd vim-adventures-dynamic4. 运行node bin/www.js5. 端口和文件保存路径设置同原项目部署方法2.5. 静态网页部署这里你需要一个静态服务器例如nginx和apache或者托管在免费的静态网站上比如InfinityFree。这里以python示例1. 下载安装python在windows下要将python添加到环境变量2. 下载静态网页版文件在这里笔者根据不同的需求又制作了3个不同的静态网页版本大家可以根据自己的需求下载相应的版本1仅支持PC的静态网页版仅支持PC端无须联网从CDN加载资源文件https://wwbbt.lanzout.com/iSs783h44ush2兼容移动端的静态网页版兼容移动端和PC端浏览器不兼容平板需要联网从CDN加载资源文件https://wwbbt.lanzout.com/i644c3h44urg3兼容移动端的完全静态网页版兼容移动端和PC端浏览器不兼容平板所有资源文件均托管于静态服务器上可以部署于独立的局域网无须访问互联网也可正常游玩https://wwbbt.lanzout.com/iGzYj3h44uwb下载完后解压缩3. 进入工作目录4. 运行服务器python -m http.server 80这里设为80端口浏览器打开127.0.0.1即可游玩注意静态网页版会将游戏进度数据保存在浏览器如果浏览器数据清空那么游戏进度也会清空。3. 简单上手游戏进度管理1. 保存进度:w filename可以将当前游戏进度以文件形式保存并将其命名为filename2. 显示已有存档:!ls可以列出已保存的游戏进度3. 载入存档:e filename可以载入名为filename的存档4. 删除存档:!rm filename可以删除名为filename的存档5. 载入指定关卡:level n直接载入第n关这样的话即使没有保存进度也不用从第一关开始打了其他相关的命令信息都可以在游戏界面的左下方找到。4. 相关链接源码及各修改版下载及在线游玩https://vim-adventures2.pages.dev原项目归档https://web.archive.org/web/20201013182809/https://github.com/wattry/vim-adventures原项目文件备用链接1https://fileditchfiles.me/file.php?f/s22/ohjZVGOJHmWPUdwageo.zip原项目文件备用链接2https://files.catbox.moe/chq283.zip原项目文件备用链接3https://wwbbt.lanzout.com/iaAtW3h469ni动态网页版文件https://wwbbt.lanzout.com/i8P823h44uqfPC端静态网页版文件https://wwbbt.lanzout.com/iSs783h44ush兼容移动端且依赖外部资源的静态网页版https://wwbbt.lanzout.com/i644c3h44urg兼容移动端的独立静态网页版https://wwbbt.lanzout.com/iGzYj3h44uwbGithub DMCA 2020-11-12-VIMAdventures.mdhttps://github.com/github/dmca/blob/fe3a3533c22817d674fec81fd4f814f7d3f187c2/2020/11/2020-11-12-VIMAdventures.md 本地部署VIM Adventures（VIM大冒险）
本地部署VIM AdventuresVIM大冒险1. 简介VIM Adventures是一款用于学习VIM编辑器使用的在线网页端小游戏通过这个游戏我们能够快速掌握VIM的一些常用的基本命令可谓是新手福音。这款游戏有官方版本官网https://vim-adventures.com但是在官方版本中只有前三关是免费的想要游玩之后的关卡需要购买证书需要25美元且只有6个月使用期。由于价格对于很多学生党来说可能略高而且在国内购买也不太方便我选择寻找其他能够免费完整体验这个游戏的方法。2. 本地部署2.1. 开源项目Github上曾有对该游戏进行逆向的项目也有很多相关的folk项目但这些项目都被游戏原作者要求下架了这些项目现在要么显示takedown要么就是404。详情见https://github.com/github/dmca/blob/fe3a3533c22817d674fec81fd4f814f7d3f187c2/2020/11/2020-11-12-VIMAdventures.md因此现在Github上已经找不到相关的项目了。使用互联网档案馆查找这些项目曾经的存档目前能找到且源码还能下载的只有https://github.com/wattry/vim-adventures这个项目的归档打开要科学上网https://web.archive.org/web/20201013182809/https://github.com/wattry/vim-adventures或者可以在以下网站下载项目源码https://vim-adventures2.pages.dev该项目将VIM Adventures的核心代码逆向了出来现在只需要将项目下载下来部署于本地就可以游玩这个游戏的完整版本。2.2. 使用方法简述要想使用该项目你需要将它部署在本地或者云端的服务器上。原项目有打包好的可执行程序设置一下环境变量直接运行就能完成部署也有完整源代码需要配置好Nodejs环境使用npm构建安装后才能使用。另外笔者又修改完善了该项目的代码和相关文件就得到了两大修改后的新版本一个是动态网页版就是在原项目的基础上配置好了Nodejs的第三方库只需要安装好Nodejs即可运行另外一个版本是静态网页版无须配置Nodejs环境托管在静态服务器上即可运行。Vim Adventures是可以保存和加载游戏进度的原项目版本和笔者的动态网页版可以将游戏进度数据保存在服务器上而静态网页版会将游戏进度数据保存在浏览器只需要将一些资源文件放在静态服务器上就能运行部署最方便。由于移动端没有自带键盘原版的VIM Adventures只能在PC端上的浏览器游玩除非为移动端接上外接键盘否则无法直接在移动端浏览器上使用笔者为解决这一问题又针对移动端浏览器修改制作了兼容移动端的静态网页版这一版本主要是为移动端添加了js虚拟键盘详见下文的静态网页版部署。如果你已经迫不及待想玩到这个游戏可以免费游玩笔者搭建的在线版本https://vim-adventures2.pages.dev由于这个托管服务是免费的游戏进度可能因托管服务失效而丢失因此建议部署在自己的服务器上。接下来介绍这三个版本的部署方式。其中第一种原项目直接部署和第三种静态网页部署的方法最简单成本最低。2.3. 原项目部署原项目归档地址https://web.archive.org/web/20201013182647/https://github.com/wattry/vim-adventures原项目有2种部署方式一种是直接下载打包好的程序配置一下环境变量然后运行即可完成直接部署最简单快捷还有一种是下载源码并配置好nodejs环境构建安装进行部署。该项目的文件可以通过如下方法获取打开项目的Releases页面进行下载https://web.archive.org/web/20201013182809/https://github.com/wattry/vim-adventures/releases/tag/v1.1.0如果上述链接无法打开可以使用以下链接下载备用链接1https://fileditchfiles.me/file.php?f/s22/ohjZVGOJHmWPUdwageo.zip备用链接2https://files.catbox.moe/chq283.zip备用链接3https://wwbbt.lanzout.com/iaAtW3h469ni具体需要用到哪些文件见下文。2.3.1. 方法一直接部署1. 下载打包好的程序根据自己的系统选择对应的程序这里以Windows系统举例需要下载vim-adventures-win.exe那么需要从Releases页面下载该程序或者从直链下载得到的压缩包中找到该程序。2. 设置环境变量主要设置APP_DIR和PORT两个环境变量前者用于指定游戏存档数据的保存位置后者用于指定服务器监听的端口有两种设置方法1方法一在程序运行前用命令行命令设置环境变量比如在Windows下set APP_DIR%USERPROFILE%\vim-adventures set PORT80那么会将游戏存档保存在用户主目录的vim-adventures目录下设监听端口为80。2方法二在程序的同级目录下新建一个名为.env的文件在该文件中写入如下内容APP_DIR$HOME/vim-adventures PORT80作用同上。3. 运行程序2.3.2. 方法二源码构建部署从源码构建打包得到游戏服务端程序。1. 下载并安装nodejshttps://nodejs.org/en/download这里使用14.21.3版本其他版本在接下来进行构建时可能会报错。2. 下载项目源代码从Releases页面选择Source Code(tar.gz)下载或在直链下载压缩包中找到vim-adventures-1.1.0.tar.gz下载完后解压缩3. 进入工作目录项目的根目录是vim-adventures-1.1.0我们需要进入到项目根目录中的vim-adventures目录cd vim-adventures-1.1.04. 设置环境变量编辑项目根目录下的.env文件HOSThttp://localhost# NodeJS default locationAPP_DIR$HOME/vim-adventuresAPP_NAMEvim-adventuresPORT80APP_DIR设置存放最终打包得到的程序的目录需要设为绝对路径APP_NAME设置输出的程序名称可以根据需要自行设置。PORT设置端口。5. 构建安装npm run setup完成后会在APP_DIR目录下生成名为APP_NAME的程序比如在Windows下使用上述设置会在用户主目录的vim-adventures文件夹下生成vim-adventures.exe程序。另外在APP_DIR目录下也会生成一个.env文件修改该中文件PORT的值或使用命令行命令设置环境变量PORT可以设置端口。6. 运行直接运行vim-adventures.exe程序即可运行浏览器打开127.0.0.1就可以免费游玩了。2.3.3. 其他方法归档项目的主页有讲到使用docker部署的方法。2.4. 动态网页部署部署方法和上文中的原项目从源码构建部署方法相同需要下载Nodejs但不需要进行第4步构建安装的过程避免了构建安装过程中可能出现的报错。1. 安装Nodejs2. 下载动态网页版文件https://wwbbt.lanzout.com/i8P823h44uqf下载完后解压缩3. 进入工作目录cd vim-adventures-dynamic4. 运行node bin/www.js5. 端口和文件保存路径设置同原项目部署方法2.5. 静态网页部署这里你需要一个静态服务器例如nginx和apache或者托管在免费的静态网站上比如InfinityFree。这里以python示例1. 下载安装python在windows下要将python添加到环境变量2. 下载静态网页版文件在这里笔者根据不同的需求又制作了3个不同的静态网页版本大家可以根据自己的需求下载相应的版本1仅支持PC的静态网页版仅支持PC端无须联网从CDN加载资源文件https://wwbbt.lanzout.com/iSs783h44ush2兼容移动端的静态网页版兼容移动端和PC端浏览器不兼容平板需要联网从CDN加载资源文件https://wwbbt.lanzout.com/i644c3h44urg3兼容移动端的完全静态网页版兼容移动端和PC端浏览器不兼容平板所有资源文件均托管于静态服务器上可以部署于独立的局域网无须访问互联网也可正常游玩https://wwbbt.lanzout.com/iGzYj3h44uwb下载完后解压缩3. 进入工作目录4. 运行服务器python -m http.server 80这里设为80端口浏览器打开127.0.0.1即可游玩注意静态网页版会将游戏进度数据保存在浏览器如果浏览器数据清空那么游戏进度也会清空。3. 简单上手游戏进度管理1. 保存进度:w filename可以将当前游戏进度以文件形式保存并将其命名为filename2. 显示已有存档:!ls可以列出已保存的游戏进度3. 载入存档:e filename可以载入名为filename的存档4. 删除存档:!rm filename可以删除名为filename的存档5. 载入指定关卡:level n直接载入第n关这样的话即使没有保存进度也不用从第一关开始打了其他相关的命令信息都可以在游戏界面的左下方找到。4. 相关链接源码及各修改版下载及在线游玩https://vim-adventures2.pages.dev原项目归档https://web.archive.org/web/20201013182809/https://github.com/wattry/vim-adventures原项目文件备用链接1https://fileditchfiles.me/file.php?f/s22/ohjZVGOJHmWPUdwageo.zip原项目文件备用链接2https://files.catbox.moe/chq283.zip原项目文件备用链接3https://wwbbt.lanzout.com/iaAtW3h469ni动态网页版文件https://wwbbt.lanzout.com/i8P823h44uqfPC端静态网页版文件https://wwbbt.lanzout.com/iSs783h44ush兼容移动端且依赖外部资源的静态网页版https://wwbbt.lanzout.com/i644c3h44urg兼容移动端的独立静态网页版https://wwbbt.lanzout.com/iGzYj3h44uwbGithub DMCA 2020-11-12-VIMAdventures.mdhttps://github.com/github/dmca/blob/fe3a3533c22817d674fec81fd4f814f7d3f187c2/2020/11/2020-11-12-VIMAdventures.md