H5 网络版坦克大战

最近研究了一下网游帧同步技术， 用H5实现了一个demo

demo比较简单，实现了一个坦克游戏， 能发子弹， 能上下左右移动， 坦克 和子弹 能和墙壁做碰撞检测，没有实现子弹击杀对方的效果， 多个客户端可以互相看到对方的操作，而且保持一致。当然还有很多值得优化的地方

客户端技术

1.  使用websocket 通讯协议
2. 使用protobuf 封包解包
3. 使用react 脚手架 create-react-app 快速搭建客户端应用，使用antd 组件库实现登录UI
4. 使用canvas 绘制坦克和子弹
5. 使用帧同步技术同步玩家操作，逻辑帧和渲染帧分离， 逻辑帧和服务器帧一致，逻辑帧每秒15帧， 渲染帧每秒30帧
6. 每个子弹有独立的定时器处理
7. 断线重连时会下发历史帧记录， 客户端根据历史帧快速进行追帧推演

服务器技术

1.    nodejs 语言，高度封装websocket 协议，使用protobuf 封包解包
2.   固定帧率广播所有玩家的帧操作

git地址： https://github.com/zhengjinwei123/GameTech

最后， 欢迎Star 或 打赏