Code Monkey home page Code Monkey logo

snake's Introduction

这套框架只是一套游戏的ui框架,跟游戏主体逻辑时分开的。主要方便快速开发游戏ui界面的一套框架。

游戏框架说明

一:游戏模块介绍. 游戏界面的模块主要有:CanvasScript,HandleController,MapScript,CameraScript。 1.CanvasScript:是游戏界面的主脚本,主要用于进行模块化的通信和业务逻辑的处理。 2.HandleController主要处理用户请求。把请求派发给CanvasScript处理。 3.MapScript主要处理地图方面的信息。对地图所有的元素进行操作和处理,(包括元素的生成,元素的移动控制,Ai的生成,蛇之间碰撞的逻辑等)。 4.CameraScript主要对摄像机进行处理。让屏幕跟随蛇移动。

二。游戏逻辑处理流程。 首先游戏是已帧同步的形式进行同步的。有点像回合制游戏,只是同步的时间缩短为60ms为一个逻辑帧。同步的方式为一个个网络帧的形式。服务器每过60ms进行一次广播。把在此期间收到的玩家请求整合起来广播给玩家。每一个网络帧就会触发一次客户端的逻辑处理。网络帧的形式如下"1:30!_3:10(2,5)#12"(这段可以表示为在12帧的时候1号玩家加速向30度方向移动,3号玩家向10度方向移动,期间有2和5号玩家复活)。客户端拿到这段命令,计算下一帧蛇的位置,进行一次客户端更新。然后做移动做平滑处理。(当停止收到网络帧时也就是玩家掉线,由于客户端收不到命令会导致页面卡主。)。在客户端也会做网络帧记录,代表这现在是第几个网络帧,当与从服务器收到的网络帧不一致的时候就会做处理(当客户端网络帧大于等于服务器网络帧忽略。当客户端小于服务器网络帧为1时进行一次客户端更新。当客户端网络帧小于服务器网络帧大于1时,就会做加速播放赶上服务器最新的网络帧)。

三:帧同步差异性 客户端同步的差异主要有两个方面:随机性Math.random和浮点数差异。 1.随机性。采用的时伪随机。就是指定了一个主种子。然后把这个主种子嵌入每个实体对象中生成子种子。实体对象每次调用随机函数就会更新一次子种子。子种子的构成为:主种子+行为标识+同类唯一标识+随机调用次数。 例如这段代码: initRandom(min, max) { this.initSeedCount += 1; const seedRandom = ${gameContext.randomSeed}snakeInit${this.seedId}${this.initSeedCount}; return gameContext.getRandomIntBySeed(min, max, seedRandom) } 这样的形式保证了当主种子一样时,蛇下次更新的位置就是确定的。 2.浮点数差异。每台机子的浮点数计算总是有差异的,因为这个项目采用的计算相对来说比较少,所有我直接采用的是提高精度的方法。所有可能会导致误差的方式都提高精度。例如: // 精度处理 public reducePrecision(dig: number): number { return Math.floor(dig * 10000) / 10000; } 我目前只在同一台机子上测试过。表现为一致。然后是具体不同的机子,还未进行相关的测试。

四。加速播放和断线重连。(只是提出了方案,并留下扩展接口,由于时间关系目前还未实现) 在上面有提到,当从服务器接受的网络帧于客户端的网络帧差异较大时,就会进行加速。也就是说每个网络帧就相当于一次命令。客户端每收到这个命令就会经过一次逻辑处理(前进一步),进行蛇位置的更新和碰撞逻辑的判断处理。也就是说如果连续调用了100次,客户端就会前进100帧。就是说连续的利用命令来更新客户端逻辑就是一个加速的过程。断线重连也是加速的过程。当客户端的网络帧大大小于服务器所发出的网络帧时就会请求中间缺失的网络帧,然后请求成功进行加速。至于对缺失掉的帧命令可以由服务器进行保存。 注:1.所有关于命令的发送和请求,加速播放和网络帧接受检测都是由CmdModule(命令管理器)进行缓存和处理的。 2.由于借用了碰撞组件所以加速过程可能要等待update方法更新之后再进行碰撞的判断。或者在加速的时候判断所有碰撞物。

五:关于优化方面。 1.在初始化的时候会根据配置的信息对由地图进行初始化操作。创建所有的蛇和食物。然后每当蛇和食物被吃掉的时候,只是隐藏掉并没有释放。当下一次再利用的时候再换个位置显示出来。然后蛇节点也不会进行释放,当释放一条蛇的时候,其节点的回收交由其脚本控制器完成回收和创建。 2.关于蛇的碰撞检测。我并没有完全利用碰撞组件。碰撞检测的话,在帧循环中,由于时间差和设备差异,会有一种情况,就是碰撞时机不一致,有的机子有可能在这一帧发生,有的机子有可能在下一帧发生碰撞,当有一帧的结果有区别的话,会导致接下去每个机子产生的结果不一样,就会导致后续结果完全不同。所以关于蛇的碰撞我采用的是自己计算,提高精度的方式来消除浮点数差异。但是由于食物和蛇节点的数量很多,所以不可能每个都计算。所以我采用的是借用碰撞组件来检测周围的蛇节点和食物。只计算周边的碰撞物。

snake's People

Contributors

knightxv avatar yiqingit avatar

Stargazers

 avatar kaiyun avatar

Watchers

Summer avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.