gennia.io开发小记
休假期间我在家里玩一个即时战略的网页小游戏，叫做 generals.io 我觉得特别有趣，很适合多个朋友一起联机玩。我就萌生了想要开发这个游戏练练手的想法。
最终陆续花了一个半月时间的成果在这里： https://gennia.io 或者国内版本 https://gennia.cn/zh
但是我是一个完全的游戏开发小白，对网站开发，后端开发，数据库也没有什么经验。当我很好奇如果有chatgpt的加持，是否会很大程度上降低我开发的难度，chatgpt是否能帮助我们成为“超级个体”，即便我对那个领域的知识所知不多。
事实证明chatgpt的确帮了我很多，没有chatgpt我无法在短时间内完成这个项目，但我依然需要学习很多东西才能使chatgpt发挥它的作用，做这个项目我大部分时间花在学习上而不是开发上。
![[Pasted image 20230804173635.png]]
开工前的调研
一开始我考虑了几个方向，一个是微信小游戏，一个是开发一个网站，一个是做一个APP。最终我选择写一个网站 gennia.io 理由如下：
通过微信小游戏来做的话，会有几个问题，第一个的话，你需要有软件著作权，第二个你必须通过微信小游戏的框架来做，也就是必须用canvas。不能通过普通小程序的方式来做小游戏。然后还会有游戏的审核。
没有开发app最重要的一个考量是这只是我个人的业余爱好，我并不是专业的游戏开发者，加上我也想学习网站开发，最终我选择的开发一个网站游戏，而不是选择嗯cocos creator或者Unity这种专业游戏开发框架。这个游戏的界面和交互比较简单，所以普通html也可以胜任。
前端框架我选择 react + nextjs，css 一开始用 tailwindcss，不过使用现成的框架例如 mui 对新手更友好一些，所以就切换到 mui 了
至于后端开发框架的话，我一开始其实也是采用nextjs的，但是nextjs对socket.io支持的有问题，所以我还是切换成了express。至于为什么不使用自己熟悉的Python，比如说fast api来开发，是因为这样可以共用前后端的部分游戏代码
我也调研了很多游戏后端框架。比如
但我还是一个新手，目前的游戏逻辑还是比较简单，所以暂时没有使用这些游戏后端框架，但未来如果有时间的话应该会考虑使用。
小白的我是如何快速入门的
我真正花在学习的时间可能累计不到一个月，学的很粗糙，也非常宽泛（看的东西真的很多）就开始看别人的前端代码了，学习的时候严重依赖chatgpt（我主要用 chatgpt sidebar chrome插件，真的非常好用，在网页上划线不懂的术语或者句子，它就能给我解释个大概，对我这种刚入门的人太友好了）
这种囫囵吞枣的方式不太好，但我还是倾向于边做边学，可能是急于速成的心态让我没办法按照常规路线一点一点的从头学习，那样太久了。有好有坏，看大家如何抉择。
javascript 我是看一个 cheatsheet 还有跟 python 语法的异同就开始搞了，typescripts就看别人是怎么用的，照葫芦画瓢。所以学习时间不长，遇到不懂的概念就网上搜搜。
css 我也是速成（所以UI其实写的比较糟糕），有些概念真的要看视频才能懂，看文字描述真的头大
- b站视频:解释了 box position flex 的各种属性值的含义
- 我快速过了一下 https://web.dev/learn/css/ ，没有完全看完，也是看了基础篇就开始搞，后面写代码的时候看到不懂的再回去查
另外看了一下B站教程 chrome 调试工具的使用
html 我只知道它类似 xml 就跳过了，后面看别人代码才知道有 document / window 这些概念
react 和 nextjs 看的是官方的 quick-start 教程，至于详细手册我就跳过了，以至于后面不得不回头来学习 useCallBack, useMemo, useContext 这些基础的概念。 不得不说 nextjs 的 快速开始教程写的是真的好啊，深入浅出，通俗易懂，我看的时候拍案叫绝！
express eslint prettier 这些我就直接跳过教程了，在github上找一个脚手架（关键词是 scaffold, template），在上面魔改，我用到的代码比较简单，一看就懂，遇到bug再问chatgpt。
开工！
我采用的工具
- chatgpt 3.5 + github copilot chat （10美刀每月）
日常问题用 chatgpt3.5也足够了，代码生成听说copilot chat效果比得上 gpt4？所以我就没有用 gpt4了
现成的作品
我在开发游戏的过程中陆陆续续搜索到很多类似的项目，我惊喜的发现这个游戏吸引了很多”程序员“，尤其是 oi er，也就是信息学奥林匹克竞赛（Olympiad in Informatics）的参加者，他们不仅用各种语言C++/php/javascript/python... 复现了这个游戏，而且还开发了很多机器人，我最终选择基于 gennia 和 generals-io-web 的项目进行二次开发（但前端完全重写了，后端也改了很多），但是在其他项目上我也学到了很多
失败的开始
我一开始试图用 copilot 来生成全部代码，就像官方示例生成贪吃蛇游戏那样，我写了很多游戏机制的描述，但显然 copilot 无法生成这么多的代码，对于复杂需求，超过两三百行的代码 copilot 就无能为力了。
一开始我参考 generals-io-webapp 这个仓库实现了简单的前端，由于它比较老了，参考现在的格式简单整理了一遍代码。但后面实际上我完全弃用了这个代码，因为它写法实在太古怪了，采用了视图和逻辑分离的写法，加了很多接口数据验证，代码相当冗余。不过至少看别人代码学习是基础的一步。
找到一起开发的伙伴！
开发的时候，我就在github找到两个开发者，他们也在开发类似的应用。
我直接联系过的就有 8 个至少，一半国外，一半中国
一个是美国人，开发的是 madjs 他参考generals的游戏机制，换成“航海”占领类游戏，我们在开发的时候一直保持交流联系，巧合的是，我们两个都是待业，旅游，然后准备找工作的人，又都有很棒的女朋友（他的女朋友给他准备了一个惊喜礼物，为他的游戏做了一个很棒的UI，原先他的UI只是很丑陋的方格，见下图，我的女朋友不管我做什么都无条件支持我）。
一个是国内即将上高三的学生，有信息学竞赛的背景（玩generals.io的学生似乎大部分都是搞信息学竞赛的），做了一个 genniaApp （基于 electron 的桌面应用），我知道他是高中生的时候真的很惊讶...... 至少网页开发上比我强多了，看他的QQ动态，也觉得他思维相当活跃，估计成绩也很好，高考能奔着top10的学校去的吧。真是青出于蓝胜于蓝，想到我高二那会还在折腾无聊的社团活动，成绩年级八百名开外就觉得惭愧。
![[Pasted image 20230802113745.png]]
开发！
我阅读了他们两的代码，发现了bug，提交了修复PR。在交流中决定将自己基于 react 的版本并入到后者 gennia 团队仓库里头开发，作为第2个版本 genniaServer2.
看完框架的快速开始我就开干了，开发的时候基本就是跟 copilot 聊天，遇到不会的东西再针对性地回去看一下教程。其实有一小段时间很崩溃，因为太多不懂的了，怀疑自己这种学习模式是不是有大病，毛还没长齐就想飞，但是我受不了认真全面学习几个月之后再开干的模式，只能遇到问题一点一点查，如果这中间有人能指导一下我就好了，需要的指导不多，给个方向以及正确的参考资料就可以省去我很多时间。
搭建完基本框架，从0到1之后就轻松不少了，那位高中生也跟我一起开发，两个人协作比较简单，互相改改bug，改改UI，想到什么功能就补上什么功能。
7月份我们两人就陆陆续续的抽时间开发，我在旅游，高中生在高考集训[Doge]。月底把基础功能开发了七七八八。
数据库与ORM
诚实讲，我对数据库了解不多，所以一开始并没有使用。
游戏开发到后期的话，我发现我需要通过数据库来存储地图数据。因为我需要呈现最新的，最热门的地图，还要提供搜索功能。如果直接用文件来存储地图，各种元信息检索排序起来不是很方便。而且数据库看起来是一个更加通用的选择。
数据库我选择最流行的postgresql，一开始使用的是supabase的免费数据库（vercel也有，但明显没有比 supabase 提供的好），但是国内访问延迟比较高。最后还是选择了通过自行部署
由于我对sql 不熟悉，并没有直接采用 sql，而是使用 ORM。ORM 我用的是 prisma， 我觉得这个对我这种新手小白特别的友好，因为我甚至不需要去学习 sql 相关的知识，我直接通过对象操作的方式来对数据库进行检索就可以了。相关的prisma代码也是 chatgpt 生成的，我并没有花时间学习 Prisma
域名&服务器的选择
当时那个高中生使用的是 Electron 开发的应用，我当时问他，你为什么用开发桌面应用，而不是做成一个网站，他的回答让我哭笑不得，没钱。
随后我就购买了gennia.io / cn 的域名，还有国内外的服务器
cn 域名在腾讯云上买，io 域名在 namecheap 上买
服务器的选择花了不少时间
选择国内服务器的问题就是需要各种各样的备案......
- gennia.io 的域名是在国外网站买的，要迁移到国内进行备案很麻烦，不得已只能买了个 gennia.cn 的域名
- 新网站备案得保证之前的备案过的网站在运行，不得已我只能用 streamlit 搭建了一个有“实质性内容仅供分享但不是交流的个人的非盈利性质的中文网站”..... 别问我描述词为什么要这么多.... 说多了都是泪.... 用于搭建一个demo备案网站的代码在这
选择国外的服务器主要考虑的是性价比.....
- 一开始想的是使用腾讯云香港服务器，但是发现成本还是挺高的，最低配的服务器 2核 2GB 1Mbps带宽 三年的费用是两千多。然后流量费也特别贵，接近1元1GB。而且也不好部署你懂的的那种服务。
- 后面想着白嫖微软云azure一年免费额度，但过于折腾还是算了，而且 azure 只有一种按流量计费的方式。流量费价格跟腾讯香港服务器差不多。
- 最后在查各种资料的找到了一家相对而言性价比比较高的小众供应商 Dmit.io 。 1GB内存，1核，20G SSD，0.8TB流量/月，1Gbps带宽，$28.8/季（一年800元左右） DMIT 厂家，美国 Premium，CN2 GIA。160ms 延迟，晚高峰也不卡。搬瓦工的我觉得性价比不高就没有买。
部署
买了服务器就可以部署啦，不过部署上我没有花心思，主打一个能跑就行。也没有怎么考虑安全问题，网上简单搜索了一下方案就开搞了。
为了支持 https 和反向代理（比如将我某个端口号的服务绑定到 api.gennia.io 上），我使用了 caddy，这个用起来比 nginx 简单多了。
还需要改一下域名的DNS解析到自己的服务器
为了部署和监控 nextjs & express 的进程和日志，我用的是 pm2 （实际上也可以加到 docker-compose 里头）
我还用 docker-compose 的方式来创建数据库 postgresql 还有 pgadmin（查看管理postgres的）。
此外，gennia.io 的前端我部署在 vercel 上了，vercel 部署很方便，自动开CDN，跟github流水线集成，很是好用。
修bug
由于自己前端速成，对 js, css， react 都只是粗浅的理解，加上第一次写游戏，代码中有非常多bug和性能问题。断断续续缝缝补补了一两周。到目前（2023-09-09）为止，游戏基础操作的bug基本已经修复了，但是还遗留了很多问题，比如后端没有做数据校验，没有做请求限制，随便攻击一下游戏后端可能就崩溃了。
后续自己打算两个事情，一个是慢慢把 js css html react 重新学一下，多看一下优秀的项目；一个是学习 nakama 开源的游戏后端，看一下一个成熟的游戏后端应该是怎么写的；我基于nakama写的一个简单的 xoxo 在这里
特别的点
由于我这个游戏是克隆 generals.io 的，虽然用户系统，匹配功能，锦标赛，排位赛之类的还没有做，但也有自己一点点小特色，一是优化了手机端的交互体验（可以拖动攻击），这个比 generals.io 好得多（不过拖动攻击容易误触）；二是添加了一个中国特色的“战国”游戏模式。玩自己开发的联机游戏还是蛮自豪的。
小结
这是我个人的业余兴趣项目，把generals.io的基础游戏功能复刻完成后，我就没有计划再投入许多精力了，也只是在generals的游戏群里头简单提一下，没有做宣传。
chatgpt确实能够极大地帮助我熟悉新的领域并且快速开发出一个 demo，但是对于稍微复杂一些的项目，其实主要还是靠个人学习，没有专业领域的知识也用不好chatgpt，但chatgpt 确实把很多领域的入门门槛降低了。
超级个体是可能的，但是还要勤奋咧。
jackiexiao