diff --git a/resources/js/Config.js b/resources/js/Config.js deleted file mode 100644 index 0567014..0000000 --- a/resources/js/Config.js +++ /dev/null @@ -1,11 +0,0 @@ -var Config = { - GAZE_SERVER_URL: "ws://localhost:8001/gaze", - TARGET_FPS: 60, - SCREEN_WIDTH: screen.width, - SCREEN_HEIGHT: screen.height, - GAME_VERSION: "$VERSION", -}; - -Object.freeze(Config); - -export default Config; \ No newline at end of file diff --git a/resources/js/config/GameConfiguration.js b/resources/js/config/GameConfiguration.js new file mode 100644 index 0000000..87c8170 --- /dev/null +++ b/resources/js/config/GameConfiguration.js @@ -0,0 +1,205 @@ +/* eslint-disable no-magic-numbers */ + +var version, + gazeServerURL, + fps, + fpsBufferLength, + screenWidth, + screenHeight, + maxGazePointAge, + gazePointRadius, + gazePointColor, + maxNumberOfEnemies, + enemySpawnDelay, + playerDamage, + worldBackgroundColor, + debugInfoPosition, + debugInfoFont, + debugInfoFonColor, + showDebugInfoOnScreen, + showVerboseDebugInfoInConsole, + useMouseInput; + +class GameConfiguration { + + constructor() {} + + reset() { + version = "$VERSION"; + gazeServerURL = "ws://localhost:8001/gaze"; + fps = 60; + fpsBufferLength = 60; + screenWidth = screen.width; + screenHeight = screen.height; + maxGazePointAge = 500; + gazePointRadius = 15; + gazePointColor = "#4cd494"; + maxNumberOfEnemies = 10; + enemySpawnDelay = 1000; + playerDamage = 15; + worldBackgroundColor = "#333"; + debugInfoPosition = { + x: 10, + y: screenHeight - 10, + }; + debugInfoFont = "16px ShareTech"; + debugInfoFonColor = "#FFF"; + } + + setVersion(value) { + version = value; + } + + getVersion() { + return version; + } + + setGazeServerURL(value) { + gazeServerURL = value; + } + + getGazeServerURL() { + return gazeServerURL; + } + + setFPS(value) { + fps = value; + } + + getFPS() { + return fps; + } + + setFPSBufferLenght(value) { + fpsBufferLength = value; + } + + getFPSBufferLenght() { + return fpsBufferLength; + } + + setScreenWidth(value) { + screenWidth = value; + } + + getScreenWidth() { + return screenWidth; + } + + setScreenHeight(value) { + screenHeight = value; + } + + getScreenHeight() { + return screenHeight; + } + + setMaxGazePointAge(value) { + maxGazePointAge = value; + } + + getMaxGazePointAge() { + return maxGazePointAge; + } + + setGazePointRadius(value) { + gazePointRadius = value; + } + + getGazePointRadius() { + return gazePointRadius; + } + + setGazePointColor(value) { + gazePointColor = value; + } + + getGazePointColor() { + return gazePointColor; + } + + setMaxNumberOfEnemies(value) { + maxNumberOfEnemies = value; + } + + getMaxNumberOfEnemies() { + return maxNumberOfEnemies; + } + + setEnemySpawnDelay(value) { + enemySpawnDelay = value; + } + + getEnemySpawnDelay() { + return enemySpawnDelay; + } + + setPlayerDamage(value) { + playerDamage = value; + } + + getPlayerDamage() { + return playerDamage; + } + + setWorldBackgroundColor(value) { + worldBackgroundColor = value; + } + + getWorldBackgroundColor() { + return worldBackgroundColor; + } + + setDebugInfoPosition(value) { + debugInfoPosition = value; + } + + getDebugInfoPosition() { + return debugInfoPosition; + } + + setDebugInfoFont(value) { + debugInfoFont = value; + } + + getDebugInfoFont() { + return debugInfoFont; + } + + setDebugInfoFonColor(value) { + debugInfoFonColor = value; + } + + getDebugInfoFonColor() { + return debugInfoFonColor; + } + + setShowDebugInfoOnScreen(value) { + showDebugInfoOnScreen = value; + } + + getShowDebugInfoOnScreen() { + return showDebugInfoOnScreen; + } + + setShowVerboseDebugInfoInConsole(value) { + showVerboseDebugInfoInConsole = value; + } + + getShowVerboseDebugInfoInConsole() { + return showVerboseDebugInfoInConsole; + } + + setUseMouseInput(value) { + useMouseInput = value; + } + + getUseMouseInput() { + return useMouseInput; + } +} + +const Config = new GameConfiguration; +Config.reset(); + +export default Config; \ No newline at end of file diff --git a/resources/js/game/GameConfig.js b/resources/js/game/GameConfig.js deleted file mode 100644 index 9e5e98d..0000000 --- a/resources/js/game/GameConfig.js +++ /dev/null @@ -1,18 +0,0 @@ -var Config = { - MAX_GAZE_POINT_AGE: 500, - MAX_NUMBER_OF_ENEMIES: 10, - TARGET_RADIUS: 100, - DEFAULT_PLAYER_DAMAGE: 5, - ENEMEY_SPAWN_DELAY: 1000, - FPS_BUFFER_LENGTH: 50, - BACKGROUND_COLOR: "#333", - DEFAULT_GAZE_POINT_RADIUS: 15, - DEFAULT_GAZE_POINT_COLOR: "#4cd494", - DEBUG_POSITION_OFFSET: 10, - DEBUG_FONT: "16px ShareTech", - DEBUG_COLOR: "#ffffff", -}; - -Object.freeze(Config); - -export default Config; \ No newline at end of file diff --git a/resources/js/game/GameManager.js b/resources/js/game/GameManager.js index 413aef6..9dbec71 100644 --- a/resources/js/game/GameManager.js +++ b/resources/js/game/GameManager.js @@ -1,18 +1,17 @@ +import GameConfig from "../config/GameConfiguration.js"; import Logger from "../utils/Logger.js"; -import Config from "./GameConfig.js"; import Time from "../utils/Time.js"; import GameRenderer from "./GameRenderer.js"; import Enemy from "./objects/Enemy.js"; -import World from "./objects/World.js"; +import Planet from "./objects/Planet.js"; var gameLoop, - gameArea, - lastUpdate, - lastEnemySpawn, - options, - world, + stage, + planet, enemies, - gazePoints; + gazePoints, + lastUpdate, + lastEnemySpawn; function onTick() { let now = Date.now(), @@ -26,31 +25,28 @@ function onTick() { function getCurrentState(delta) { return { delta: delta, - frameRate: options.frameRate, - objects: [...enemies, world], + objects: [...enemies, planet], gazePoints: gazePoints, - debug: options.debug, }; } function updateGazePoints(now) { for (let i = gazePoints.length - 1; i >= 0; i--) { let age = now - gazePoints[i].createdAt; - if (age > Config.MAX_GAZE_POINT_AGE) { + if (age > GameConfig.getMaxGazePointAge()) { gazePoints.splice(i, 1); } else { - gazePoints[i].relativeAge = age / Config.MAX_GAZE_POINT_AGE; + gazePoints[i].relativeAge = age / GameConfig.getMaxGazePointAge(); } } } function updateEnemies(now, delta) { let currentGazePosition = gazePoints[gazePoints.length - 1]; - if ((now - lastEnemySpawn) >= Config.ENEMEY_SPAWN_DELAY) { - if (enemies.length < Config.MAX_NUMBER_OF_ENEMIES) { + if ((now - lastEnemySpawn) >= GameConfig.getEnemySpawnDelay()) { + if (enemies.length < GameConfig.getMaxNumberOfEnemies()) { Logger.log("Add new enemy", "Game"); - enemies.push(Enemy.createEnemy(gameArea.width, -50, gameArea.center.x, - gameArea.center.y)); + enemies.push(Enemy.createEnemy(GameConfig.getScreenWidth(), -50, planet.x, planet.y)); lastEnemySpawn = now; } } @@ -58,11 +54,11 @@ function updateEnemies(now, delta) { // Update enemy's position enemies[i].update(delta); // Check if enemy has hit target - if (world.isHitBy(enemies[i])) { + if (planet.isHitBy(enemies[i])) { Logger.log(`Enemy hit target for ${enemies[i].damage} dmg`, "Game"); - // Reduce world health after enemy has hit - world.health -= enemies[i].damage; - if (world.health <= 0) { + // Reduce planet health after enemy has hit + planet.health -= enemies[i].damage; + if (planet.health <= 0) { onWorldDestroyed(); } // Remove enemy after it has hit target @@ -81,7 +77,7 @@ function updateEnemies(now, delta) { y: currentGazePosition.targetY, })) { // Update enemy's health - enemies[i].health -= Config.DEFAULT_PLAYER_DAMAGE; + enemies[i].health -= GameConfig.getPlayerDamage(); // Remove enemy if destroyed if (enemies[i].health <= 0) { Logger.log(`Enemy destroyed by player`, "Game"); @@ -93,32 +89,23 @@ function updateEnemies(now, delta) { } function onWorldDestroyed() { - Logger.log(`World destroyed [Current health ${world.health}]`, "Game"); + Logger.log(`World destroyed [Current health ${planet.health}]`, "Game"); } class GameManager { - init(gameOptions) { - options = gameOptions; - gameArea = { - width: options.width, - height: options.height, - center: { - x: options.width / 2, - y: options.height / 2, - }, - }; + init(canvasStage) { + stage = canvasStage; enemies = []; gazePoints = []; - world = new World(gameArea.center.x, gameArea.center.y); + planet = new Planet(GameConfig.getScreenWidth()/2, GameConfig.getScreenHeight()); lastEnemySpawn = 0; } start() { - - GameRenderer.init(options.canvas, options.width, options.height, options.version); + GameRenderer.init(stage); lastUpdate = Date.now(); - gameLoop = setInterval(onTick, (Time.ONE_SECOND_IN_MS / options.frameRate)); + gameLoop = setInterval(onTick, (Time.ONE_SECOND_IN_MS / GameConfig.getFPS())); } addGazePoint(point) { diff --git a/resources/js/game/GameRenderer.js b/resources/js/game/GameRenderer.js index 7567ee5..df0bd0e 100644 --- a/resources/js/game/GameRenderer.js +++ b/resources/js/game/GameRenderer.js @@ -1,27 +1,27 @@ -import Config from "./GameConfig.js"; +import GameConfig from "../config/GameConfiguration.js"; import Time from "../utils/Time.js"; var canvas, context, - gameVersion, fpsBuffer, currentFPS; +// TODO: Look for values to be copied and stored from GameConfig to reduce access time function draw(state) { updateFPS(state.delta); context.clearRect(0, 0, canvas.width, canvas.height); drawObjects(state.objects); drawGazePoints(state.gazePoints); - if (state.debug === true) { + if (GameConfig.getShowDebugInfoOnScreen() === true) { drawDebugInfo(); } } -// Move fps callculation to manager since we need it there to use delta +// TODO: Move fps callculation to manager since we need it there to use delta function updateFPS(delta) { let fps = Time.ONE_SECOND_IN_MS / delta; fpsBuffer.push(fps); - if (fpsBuffer.length === Config.FPS_BUFFER_LENGTH) { + if (fpsBuffer.length === GameConfig.getFPSBufferLenght()) { currentFPS = parseInt(fpsBuffer.reduce((a, b) => a + b, 0) / fpsBuffer.length); fpsBuffer.shift(); @@ -35,7 +35,7 @@ function drawObjects(objects) { } function drawGazePoints(gazePoints) { - context.fillStyle = Config.DEFAULT_GAZE_POINT_COLOR; + context.fillStyle = GameConfig.getGazePointColor(); for (let i = 0; i < gazePoints.length; i++) { drawSingleGazePoint(gazePoints[i]); } @@ -43,7 +43,7 @@ function drawGazePoints(gazePoints) { function drawSingleGazePoint(gazePoint) { let inversedAge = 1 - gazePoint.relativeAge, - radius = inversedAge * Config.DEFAULT_GAZE_POINT_RADIUS; + radius = inversedAge * GameConfig.getGazePointRadius(); context.save(); context.globalAlpha = inversedAge; context.beginPath(); @@ -56,26 +56,24 @@ function drawSingleGazePoint(gazePoint) { function drawDebugInfo() { context.beginPath(); - context.font = Config.DEBUG_FONT; - context.fillStyle = Config.DEBUG_COLOR; - context.fillText(`${gameVersion} | ${currentFPS}fps`, Config.DEBUG_POSITION_OFFSET, - canvas.height - Config.DEBUG_POSITION_OFFSET); + context.font = GameConfig.getDebugInfoFont(); + context.fillStyle = GameConfig.getDebugInfoFonColor(); + context.fillText(`${GameConfig.getVersion()} | ${currentFPS}fps`, GameConfig.getDebugInfoPosition().x, GameConfig.getDebugInfoPosition().y); context.closePath(); } class GameRenderer { - init(gameCanvas, width, height, version) { + init(gameCanvas) { fpsBuffer = []; currentFPS = 0; - gameVersion = version; canvas = gameCanvas; - canvas.width = width; - canvas.height = height; - canvas.style.width = `${width}px`; - canvas.style.height = `${height}px`; + canvas.width = GameConfig.getScreenWidth(); + canvas.height = GameConfig.getScreenHeight(); + canvas.style.width = `${GameConfig.getScreenWidth()}px`; + canvas.style.height = `${GameConfig.getScreenHeight()}px`; context = canvas.getContext("2d", { alpha: false }); - canvas.style.backgroundColor = Config.BACKGROUND_COLOR; + canvas.style.backgroundColor = GameConfig.getWorldBackgroundColor(); } render(state) { diff --git a/resources/js/game/StarGazer.js b/resources/js/game/StarGazer.js index bf79a79..ce1e935 100644 --- a/resources/js/game/StarGazer.js +++ b/resources/js/game/StarGazer.js @@ -1,19 +1,12 @@ import Logger from "../utils/Logger.js"; import GameManager from "./GameManager.js"; -var canvas, provider; +var stage, provider; function init(options) { Logger.log("Starting StarGazer game", "Game"); - canvas = options.canvas; - GameManager.init({ - canvas: canvas, - frameRate: options.fps, - version: options.version, - debug: options.showDebug, - width: options.width, - height: options.height, - }); + stage = options.canvas; + GameManager.init(stage); GameManager.start(); provider = options.gazeDataProvider; provider.addEventListener("dataavailable", onGazeUpdate); @@ -21,7 +14,7 @@ function init(options) { function onGazeUpdate(event) { let gazePoint = event.data; - gazePoint.linkTo(canvas); + gazePoint.linkTo(stage); if (gazePoint.hasLink) { GameManager.addGazePoint(gazePoint); } diff --git a/resources/js/game/objects/World.js b/resources/js/game/objects/Planet.js similarity index 64% rename from resources/js/game/objects/World.js rename to resources/js/game/objects/Planet.js index 919a254..8bd31ee 100644 --- a/resources/js/game/objects/World.js +++ b/resources/js/game/objects/Planet.js @@ -1,21 +1,21 @@ import GameObject from "./GameObject.js"; const DEFAULT_HEALTH = 100, - DEFAULT_WIDTH = 200, - DEFAULT_HEIGHT = 200, - DEFAULT_HIT_BOX_RADIUS = 100, - DEFAULT_WORLD_COLOR = "#0d396f", - DEFAULT_WORLD_BORDER_COLOR = "#dafffe", - DEFAULT_WORLD_BORDER_WIDTH = "10"; + DEFAULT_WIDTH = 500, + DEFAULT_HEIGHT = 500, + DEFAULT_HIT_BOX_RADIUS = 270, + DEFAULT_PLANET_COLOR = "#5bbe61", + DEFAULT_PLANET_BORDER_COLOR = "#dafffe", + DEFAULT_PLANET_BORDER_WIDTH = "20"; -class World extends GameObject { +class Planet extends GameObject { constructor(x, y) { super(x, y, DEFAULT_WIDTH, DEFAULT_HEIGHT, DEFAULT_HIT_BOX_RADIUS, - 0, 0, DEFAULT_WORLD_COLOR); + 0, 0, DEFAULT_PLANET_COLOR); this.health = DEFAULT_HEALTH; - this.borderColor = DEFAULT_WORLD_BORDER_COLOR; - this.borderWidth = DEFAULT_WORLD_BORDER_WIDTH; + this.borderColor = DEFAULT_PLANET_BORDER_COLOR; + this.borderWidth = DEFAULT_PLANET_BORDER_WIDTH; } draw(context) { @@ -34,4 +34,4 @@ class World extends GameObject { } -export default World; \ No newline at end of file +export default Planet; \ No newline at end of file diff --git a/resources/js/index.js b/resources/js/index.js index 0204370..c3180a4 100644 --- a/resources/js/index.js +++ b/resources/js/index.js @@ -1,60 +1,54 @@ -import Config from "./Config.js"; +import GameConfig from "./config/GameConfiguration.js"; import Logger from "./utils/Logger.js"; import StarGazer from "./game/StarGazer.js"; import FakeGazeDataProvider from "./gaze/FakeGazeDataProvider.js"; import GazeDataProvider from "./gaze/GazeDataProvider.js"; var canvas = document.querySelector("canvas"), - starScreen = document.querySelector("#startScreen"), - options = { - useMouse: false, // Defauls set in HTML document with checked attribute - showDebug: false, // Defauls set in HTML document with checked attribute - logToConsole: false, // Defauls set in HTML document with checked attribute - }; + starScreen = document.querySelector("#startScreen"); function init() { loadOptions(); - if (options.logToConsole === true) { + if (GameConfig.getShowVerboseDebugInfoInConsole() === true) { Logger.enable(); } - document.querySelector("#versionInfo").innerHTML = `build ${Config.GAME_VERSION}`; + document.querySelector("#versionInfo").innerHTML = + `build ${GameConfig.getVersion()}`; document.querySelector("#startButton").addEventListener("click", prepareGame); } function loadOptions() { - options.useMouse = document.querySelector("#useMouseInput").checked; - options.showDebug = document.querySelector("#showDebugInfo").checked; - options.logToConsole = document.querySelector("#logToConsole").checked; + let useMouse = document.querySelector("#useMouseInput").checked, + showDebug = document.querySelector("#showDebugInfo").checked, + logToConsole = document.querySelector("#logToConsole").checked; + GameConfig.setUseMouseInput(useMouse); + GameConfig.setShowDebugInfoOnScreen(showDebug); + GameConfig.setShowVerboseDebugInfoInConsole(logToConsole); } function prepareGame() { loadOptions(); StarGazer.init({ canvas: canvas, - fps: Config.TARGET_FPS, - version: `Star Gazer, build ${Config.GAME_VERSION}`, - showDebug: options.showDebug, - width: Config.SCREEN_WIDTH, - height: Config.SCREEN_HEIGHT, gazeDataProvider: getDataProvider(), }); canvas.requestFullscreen().then(startGame); } function startGame() { - starScreen.classList.add("hidden"); - canvas.classList.remove("hidden"); + starScreen.classList.add("hidden"); + canvas.classList.remove("hidden"); } function getDataProvider() { let provider; - if (options.useMouse === true) { + if (GameConfig.getUseMouseInput() === true) { provider = new FakeGazeDataProvider(); } else { provider = new GazeDataProvider(); } - provider.start(Config.GAZE_SERVER_URL); + provider.start(GameConfig.getGazeServerURL()); return provider; }