# BomberServerOnly

**Repository Path**: chasing2moro/bomber-server-only

## Basic Information

- **Project Name**: BomberServerOnly
- **Description**: 帧同步pvp 服务器代码，结合 https://store.cocos.com/app/detail/4922 使用
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2023-05-27
- **Last Updated**: 2023-12-03

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

帧同步炸弹人pvp     服务器代码，结合 https://store.cocos.com/app/detail/4922 使用
本产品非常适合学习、入门帧同步。无论是服务端还是客户端，都是通过非常少的代码阐述帧同步最基本理念+LockStep

## 购前必读
- 快速预览本产品，可在上面视频，直接拖到1:20开始观看
- 请按照下面的使用教程：①启动服务端成功 并 ②体验游戏了，再购买本产品（如果操达不到预期效果，请参考上面视频）    
> 文章提到的路径，如果`.`开头代表工程根目录

## 功能介绍
- 本产品用帧同步理念实现炸弹人1v1对决：放炸弹在地图上，炸弹炸出火焰，碰到任何一方它都会死亡。
- 有2种道具藏在盒子里，炸开盒子，有可能掉落
- - 第1种道具 炸弹：增加放出的炸弹数量
- - 第2种道具 火焰：加长炸弹的火焰长度 
- 服务端、客户端都使用Typescript开发。    

帧同步理念阐述    
### 1. 乐观情况
客户端发送数据(操作记录)到服务端，隔一帧时间，服务端`能够`及时收到，直接转发客户端的数据给所有客户端，所有客户端都用这些数据更新逻辑。如下图：

![img22.png](https://download.cocos.com/CocosStore/markdown/3cba26992c1849bb8fe52ea9545074ed/3cba26992c1849bb8fe52ea9545074ed.png)    
代码体现在服务端:`.\server\src\app\framesync\FrameSync.ts`的`tick`函数，请搜索:`if(frameSend.recvs.length == thisArg.charNum)`

### 2. 悲观情况

客户端发送数据(操作记录)到服务端，隔一帧时间，服务端`无法`及时收到，不再等待(后面收到它直接抛弃)直接演算数据发给所有客户端，所有客户端都用这些数据更新逻辑。

![img23.png](https://download.cocos.com/CocosStore/markdown/3b26aad0c7e34469ac97f667d1d0a098/3b26aad0c7e34469ac97f667d1d0a098.png)    
> 也就是说在LockStep的基础理念上做了扩展：如果客户端网络延时，服务端就不Lock它的Step，直接"演算"的Step，发给所有客户端    

代码体现在服务端:`.\server\src\app\framesync\FrameSync.ts`的`tick`函数，请搜索:`一个人延时了`或`两个人都延时了`

## 使用教程
### 服务端
启动服务端使用到的源码(目录结构和本产品一致，本产品源码依然包含服务端代码)

- gitee链接：https://gitee.com/chasing2moro/bomber-server-only

- 或百度网盘链接：https://pan.baidu.com/s/1DTDESm6Q_NqhH432Fvz6-g?pwd=bomb 
      提取码：bomb


#### 1. 安装
##### 1.1. 安装npm

- 安装前请在命令窗口输入命令`npm -v`，查看自己是否安装npm工具了。如已安装，请跳到下一步。

- 去 https://nodejs.org/en 网站下载安装包，按照指引安装即可。（如果后面有问题，很大概率是环境变量没设置上）

![img6.png](https://download.cocos.com/CocosStore/markdown/be2283903fe94927abf59fa5dbdcc78b/be2283903fe94927abf59fa5dbdcc78b.png)
- 装完npm记得用`node -v`命令检验是否自动装上nodejs。

![img5.png](https://download.cocos.com/CocosStore/markdown/5858c26ab14147de9caa29f42cf22293/5858c26ab14147de9caa29f42cf22293.png)
##### 1.2. 安装typescript

任意目录下，执行`npm install -g typescript`。如已安装，请跳到下一步。

![img2.png](https://download.cocos.com/CocosStore/markdown/a87e8562675c470eabbfe886ba9d9b61/a87e8562675c470eabbfe886ba9d9b61.png)
##### 1.3. 安装node_modules文件夹
cd到./server目录，执行`npm i`。如已安装，请跳到下一步。

![img1.png](https://download.cocos.com/CocosStore/markdown/1fecf40e209a4735a1855ba2a12da988/1fecf40e209a4735a1855ba2a12da988.png)
> 如上图，我的目录**H:\CocosCreatorProject\git\bomber\server**仅供参考

#### 2. 编译

##### 用typescript编译
cd到./server/src目录，执行`tsc`

![img3.png](https://download.cocos.com/CocosStore/markdown/fd331d77f7dd47c68706934d2b326f97/fd331d77f7dd47c68706934d2b326f97.png)
> 如上图，我的目录**H:\CocosCreatorProject\git\bomber\server\src**仅供参考

#### 3. 启动
在上面编译完的窗口(依然保留在./server/src目录)，执行 `node ../dist/app.js`

![img4.png](https://download.cocos.com/CocosStore/markdown/2c75034005504b748424b3b9934b7fdc/2c75034005504b748424b3b9934b7fdc.png)    
（如果你之前已经编译过，没有改动过代码，可直接cd到./server/src目录，执行如上命令来启动）
>关闭服务器：在上面窗口，按Ctrl+C 关闭服务器。演示项目期间，千万不要关闭。仅仅告诉你，关闭服务器的方法。
### 客户端
1. Cocos Creator编辑器里用浏览器模式运行2个游戏实例。如没有拿到工程源码，直接把网址输入到浏览器运行。体验游戏网址：http://www.zhiyuanxiaoxue.cn/storecocos/bomber/index.html     

![img7.png](https://download.cocos.com/CocosStore/markdown/2f79a87abc55484e8b3c1c3e51c4b8b6/2f79a87abc55484e8b3c1c3e51c4b8b6.png)    
2. 浏览器游戏里填好ip、port点击Login按钮进入游戏

![img8.png](https://download.cocos.com/CocosStore/markdown/0b77eba0b13e4d6bb9dbe29c1e5bd6e8/0b77eba0b13e4d6bb9dbe29c1e5bd6e8.png)    

ip、port可查看./server/src/config/sys/servers.ts

![img9.png](https://download.cocos.com/CocosStore/markdown/303809a64f2740d1aa516827684b2da9/303809a64f2740d1aa516827684b2da9.png)    
如果客户端和服务器不在同一机器，请把红框的ip地方都更换为本机ip地址。

3. 如图2个游戏实例，房间名称必须一样（比如：`1`），玩家名字随意，然后按Battle按钮进入战斗

![img10.png](https://download.cocos.com/CocosStore/markdown/1122774aa5cd46d1a6581147e3853eae/1122774aa5cd46d1a6581147e3853eae.png)
4. 进入战斗后，房主按Fight按钮开始pvp战斗：用炸弹炸对方

![img11.png](https://download.cocos.com/CocosStore/markdown/d587b0180d1f4ed19c0bd4fe8a3d6b03/d587b0180d1f4ed19c0bd4fe8a3d6b03.png)
5. 操作说明：
   - 左下角按出joystick控制移动方向，右下角按钮放炸弹

![img17.png](https://download.cocos.com/CocosStore/markdown/2bf41e0ac56148a2a3819d7868aa1026/2bf41e0ac56148a2a3819d7868aa1026.png)
     电脑浏览器可用键盘`ASDW`移动方向，`空格`放炸弹

   - 箱子如果炸出炸弹，捡了它，可以增加放炸弹数量

![img12.png](https://download.cocos.com/CocosStore/markdown/11cdb0bd6a2d478984a6c4c8c8c9aa35/11cdb0bd6a2d478984a6c4c8c8c9aa35.png)
     效果如下：

   ![img15.png](https://download.cocos.com/CocosStore/markdown/9f998e347d4b4e82a4c6d8d8b4927812/9f998e347d4b4e82a4c6d8d8b4927812.png)
   - 箱子如果炸出火焰，捡了它，可以加长炸弹的火焰长度

![img13.png](https://download.cocos.com/CocosStore/markdown/1b5297efb4204d73be2064316cf98656/1b5297efb4204d73be2064316cf98656.png)
     效果如下：

   ![img14.png](https://download.cocos.com/CocosStore/markdown/b9ac75cdcd9a423d844e503adb1aacb3/b9ac75cdcd9a423d844e503adb1aacb3.png)
   - 炸弹的火焰如果碰到任何一方，都会死亡

![img16.png](https://download.cocos.com/CocosStore/markdown/348c1303a7354ec488055673b0bbd46b/348c1303a7354ec488055673b0bbd46b.png)   

## 开发环境
- 引擎版本：Cocos Creator 3.7.1
- 编程语言：TypeScript

## 源码介绍
### 服务端
- 服务端使用Typescript语言，mydog[^www.mydog.wiki]框架 编写。关于服务端框架相关任何问题，都可以去mydog[^www.mydog.wiki]官网查看
- 入口文件 `.\server\src\app.ts`
- 帧同步核心代码文件`.\server\src\app\framesync\FrameSync.ts`
### 客户端
- 入口
    - 入口场景 login.scene
    - 入口脚本 SceneLogin.ts
     
    
    ![img18.png](https://download.cocos.com/CocosStore/markdown/0d42ca4388414144a0b9cb3c2fa5e23a/0d42ca4388414144a0b9cb3c2fa5e23a.png)    
    
- 帧同步核心文件 `.\assets\scripts\battle\framesync\FrameSync.ts`，收到服务端转发的帧数据，更新逻辑代码段为:

    ```
            //接受指令
            for (const recv of recvs) {
                var unit = BattleCtrl.Instance.getUnit(recv.uid);
                if(!unit){error("玩家不存在 id:" + recv.uid);continue;}
    
                //接受指令：走路
                MapMgr.Instance.moveUnit(unit, recv.dir);
    
                //接受指令：炸弹
                if(recv.laybomb == LayBomb.Trigger){
                    BattleCtrl.Instance.unitBombMgr.create(unit, unit.getX(), unit.getY());
                }
            }
    ```
## 联系作者
邮箱：chasing2moro@qq.com
## 版权声明
- 该产品的商业授权范围仅限于在您自行开发的游戏作品中使用，不得进行任何形式的转售、租赁、传播等。
- 除了下面2个龙骨角色不能商用，工程里所有东西都可以商用

![img19.png](https://download.cocos.com/CocosStore/markdown/d81b69f3c0064412966f384c9d956167/d81b69f3c0064412966f384c9d956167.png)![img20.png](https://download.cocos.com/CocosStore/markdown/0ba4b8f5585f47c1927ce4a8d7571eef/0ba4b8f5585f47c1927ce4a8d7571eef.png)


## 购买须知
- 本产品为付费虚拟商品，一经购买成功概不退款，请支付前谨慎确认购买内容。
- 本产品不保证完全没有bug。
- 客户端入口场景一定要设置为login.scene才能正确运行
- 如果基于此工程扩展，有浮点数除法结果是无限小数情况，请保留有限小数位消除平台误差（或使用三方定点库）    

[^www.mydog.wiki]: www.mydog.wiki