fix: remove game lags on low frame rate (#110)

FrontHeads · Aug 5, 2023 · 9b2115b · 9b2115b
1 parent 7f973c8
commit 9b2115b
Show file tree

Hide file tree

Showing 2 changed files with 29 additions and 8 deletions.
diff --git a/packages/client/package.json b/packages/client/package.json
@@ -3,7 +3,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host 0.0.0.0",
     "build:ssr": "tsc && vite build --config ssr.config.ts",
     "build:client": "tsc && vite build --config vite.config.ts",
     "build": "yarn build:ssr && yarn build:client",

diff --git a/packages/client/src/game/services/Loop/Loop.ts b/packages/client/src/game/services/Loop/Loop.ts
@@ -3,11 +3,19 @@ import { EntityEvent } from '../../entities/Entity/typings';
 import { type LoopDelays, type LoopIntervals } from './typings';
 
 export class Loop {
+  /** Минимальное время игрового цикла в миллисекундах */
   loopTimeMs = 16;
+  /** Количество игровых циклов, которые могут быть выполнены за раз в случае задержек */
+  maxConsecutiveLoops = 4;
+  /** Счётчик игровых циклов */
   loopCount = 0;
+  /** Список внутриигровых таймаутов */
   loopDelays: LoopDelays = {};
+  /** Список внутриигровых интервалов */
   loopIntervals: LoopIntervals = {};
+  /** Список динамических игровых сущностей */
   loopEntities: Set<Tank | Projectile> = new Set();
+  /** Запущен ли данный сервис */
   active = false;
   lastTimestamp = 0;
 
@@ -28,6 +36,7 @@ export class Loop {
 
   start() {
     this.active = true;
+    this.lastTimestamp = 0;
     this.loop();
   }
 
@@ -53,23 +62,35 @@ export class Loop {
     this.loopEntities = new Set();
   }
 
+  tick() {
+    ++this.loopCount;
+    this.checkLoopDelays();
+    this.checkLoopIntervals();
+    for (const entity of this.loopEntities) {
+      entity.update();
+      if (entity.shouldBeDestroyed) {
+        this.loopEntities.delete(entity);
+      }
+    }
+  }
+
   loop(timestamp = 0) {
     if (!this.active) {
       return;
     }
 
     if (timestamp) {
       const timeDifference = timestamp - this.lastTimestamp;
+
       if (timeDifference >= this.loopTimeMs) {
-        ++this.loopCount;
-        this.checkLoopDelays();
-        this.checkLoopIntervals();
-        for (const entity of this.loopEntities) {
-          entity.update();
-          if (entity.shouldBeDestroyed) {
-            this.loopEntities.delete(entity);
+        if (this.lastTimestamp !== 0) {
+          const ticksCount = Math.min(Math.round(timeDifference / this.loopTimeMs), this.maxConsecutiveLoops);
+
+          for (let i = ticksCount; i > 0; --i) {
+            this.tick();
           }
         }
+
         this.lastTimestamp = timestamp;
       }
     }