diff --git a/resources/js/game/GameManager.js b/resources/js/game/GameManager.js index 2873567..44d85ea 100644 --- a/resources/js/game/GameManager.js +++ b/resources/js/game/GameManager.js @@ -3,6 +3,7 @@ import Logger from "../utils/Logger.js"; const BACKGROUND_COLOR = "rgba(30,30,30,0.5)", DEFAULT_GAZE_POINT_RADIUS = 10, DEFAULT_GAZE_POINT_COLOR = "#ff007b", + FPS_COLOR = "#ffbb00", MAX_GAZE_POINT_AGE = 500; var lastUpdate, @@ -58,6 +59,7 @@ class GameManger { this.updateGazePoints(); this.context.clearRect(0, 0, this.canvas.width, this.canvas.height); this.drawGazePoints(); + this.drawFrameRate(); this.setUpdateTime(); } @@ -76,7 +78,8 @@ class GameManger { this.context.fillStyle = DEFAULT_GAZE_POINT_COLOR; for (let item of this.gazePoints) { this.context.save(); - this.context.globalAlpha = 1 - (now - item[1].createdAt) / MAX_GAZE_POINT_AGE; + this.context.globalAlpha = 1 - (now - item[1].createdAt) / + MAX_GAZE_POINT_AGE; this.context.beginPath(); this.context.ellipse(item[1].targetX, item[1].targetY, DEFAULT_GAZE_POINT_RADIUS, DEFAULT_GAZE_POINT_RADIUS, Math.PI / 4, @@ -87,6 +90,15 @@ class GameManger { } } + drawFrameRate() { + let fps = 1000 / lastDelta; + this.context.beginPath(); + this.context.font = "30px Arial"; + this.context.fillStyle = FPS_COLOR; + this.context.fillText(`FPS: ${fps}`, 20, 20); + this.context.closePath(); + } + } export default GameManger; \ No newline at end of file