touhou-project online
Intro
东方project是一个典型的2d射击游戏(STG)，这里我要实现的是一个简单的双人联机版 东方project 游戏，内容涵盖客户端的开发和服务端的开发，主要目的是实践网络游戏的同步。
源代码仓库托管于gitee
贴图资源是来自网上下载的《东方地灵殿》图集，然后自己用PS切了切，这里给张地灵殿的游戏截图。
服务器架构
登录和房间
不需要严格意义上的账户系统，所以这方面的通信操作仅仅是客户端发出申请，服务器提供数据而已。
| 服务器操作 | 客户端操作 |
|---|---|
| 登记客户端连接，返回玩家id | 连接服务器，申请玩家id |
| 检查房间状态，返回成功与否 | 退出/进入/创建/随机 房间 |
| 是否所有玩家都已经申请开始游戏，如果是则开始游戏 | 申请开始游戏 |
游戏操作和网络同步
采用帧锁定同步机制，初步决定是使用严格帧锁定，这里是严格帧锁定相关的参考资料
对于这个流程，在开始实现服务端的时候会再做分析
基本思路是这样的，玩家操作先发送给服务器，等到收到服务器返回的关键帧后，再执行操作。
关键在于，如果不收到服务器提供的关键帧，则游戏要暂停，等待服务器关键帧抵达后才继续进行。
| 序号 | 服务器操作 | 客户端操作 |
|---|---|---|
| 1 | 关键帧计时器开始执行 | 控制帧计时器开始执行 |
| 2 | 进入关键帧如果已经收到所有客户端的控制帧，则继续下一步，否则回到上一步 | - |
| 3 | 整合控制帧，向所有客户端广播关键帧，重启关键帧计时 | 收到关键帧 |
| 4 | - | 播放游戏，使用关键帧提供的控制帧作为玩家输入 |
| 5 | - | 进入客户端控制帧 |
| 6 | - | 整合控制帧间的玩家输入，键盘状态，作为控制帧发送给服务器 |
| 7 | 收到控制帧 | 如果没有收到关键帧，发送完控制帧后继续等待 |
游戏的操作很简单，这里可以给出所有的操作类型
| 操作 | 键位定义 |
|---|---|
| 上下左右八方向移动 | 方向键 |
| 射击键 | z |
| 减速 | x |
| 符卡 | c |
客户端需要传递的主要就是键盘的状态，按下还是松开，这样子。
服务器接口
有了流程，那么可以定义出服务器的接口了
| 接口 | 描述 | 参数 | 结果 |
|---|---|---|---|
| login | 申请玩家id，也可以视作登录 | 无 | {token: string} |
| curr-room | 当前所处的房间 | 无 | {room_id: number} |
| join-room | 加入房间，需要提供要加入的房间id | room_id | {result: boolean} |
| new-room | 创建房间 | 无 | {room_id: number} |
| rand-room | 随机加入房间，如果没有房间，则返回空 | 无 | {room_id: number or null} |
| quit-room | 退出房间，理论上应该不会出现错误 | 无 | {result:boolean} |
| start | 申请开始游戏，所有人都发出申请开始游戏后，则游戏开始 | 无 | {result: true} |
| cancel-start | 取消申请开始游戏 | 无 | {result: true} |
控制帧结构
// typescript 编写的示例
// 也可以用其他方式编写，比如 protobuf 啊
// 然后拿 C++ 或者 rust 写服务端也没问题
// 不过为了开发速度，所以先拿 typescript 和 websocket 写个原型
interface ICtrlFrame {
// 这是个 tuple
// 第一个number表示在x轴上的移动，负数表示向左，正数表示向右
// 第二个表示在y轴上的移动，负数表示向下，正数表示向上
motion:[number,number];
// 射击键的按压状态
fire: boolean;
// 低速键的按压状态
slow: boolean;
// 符卡键的按压状态
spell: boolean;
}
关键帧结构
interface IKeyFrame {
// 关键帧的序号
frameIndex: number;
// 控制帧
// {[index:number]: ICtrlFrame} 这个写法是 ts 特有的
// 用起来相当于其他语言的 HashTable 之类的，举个例子来说
// 差不多像是 C++ 的 std::map<int, ICtrlFrame>
// Python 的 dict 这样
// 顺便一提 Python3 的 type annotation 可以指定 Dict[int,ICtrlFrame] 这样的类型
// import typing
// ctrl: Dict[int,ICtrlFrame] = {} # 像这样
// 但是没有强类型检查
ctrl: {[index:number]: ICtrlFrame};
}