From c8528c945e0724d87562b4eb5fa574e939dc51fd Mon Sep 17 00:00:00 2001 From: dhain Date: Fri, 20 Jan 2023 14:32:45 +0100 Subject: [PATCH] scaling & localstorage - everything scaling now - game-score, game-isRunning and game-playTime now saving in localstorage on game start and end --- frontend/game.ts | 68 +++++++++++++++++++++++-------------- frontend/model/Obstacle.ts | 3 +- frontend/model/Raspberry.ts | 33 ++++++++++-------- 3 files changed, 62 insertions(+), 42 deletions(-) diff --git a/frontend/game.ts b/frontend/game.ts index 0fd5dc0..52e85c5 100644 --- a/frontend/game.ts +++ b/frontend/game.ts @@ -3,22 +3,24 @@ const BACKGROUND_IMAGE_PATH: string = "resources/htl-steyr-front.jpg"; const RASPBERRY_IMAGE_PATH: string = "resources/raspberry-rocket.png"; const FLOOR_IMAGE_PATH: string = "resources/table-min-min.png"; const FONT_PATH: string = "resources/PressStart2P-Regular.ttf"; -const OBSTACLE_WIDTH: number = 88; const OBSTACLE_COUNT: number = 3; const BOOST_KEYS = ["k", " "]; let floorHeight: number; +let obstacleWidth: number; let obstacleOffset: number; -let font: p5.Font; let backgroundImage: p5.Image; let pipeImage: p5.Image; let floorImage: p5.Image; +let font: p5.Font; let obstacles: Obstacle[] = []; let raspberry: Raspberry; -let paused: boolean; +let startTime: number; +let playTime: number; let score: number = 0; +let paused: boolean; let hasAlreadyScored: boolean = false; -let hasDied: boolean = false; +let hasDied: boolean = true; let ready: boolean = true; /** @@ -45,16 +47,17 @@ function setup() { /** * Sets up the constants needed for the game. */ -function setupObstacleConsts() { +function setupObstacleConsts(): void { obstacleOffset = width / OBSTACLE_COUNT; - Obstacle.distanceBetweenPipes = height / 2.5 + obstacleWidth = width / 22.727272727272727272; + Obstacle.distanceBetweenPipes = height / 2.5; Obstacle.startX = width; } /** * Set up the font. */ -function setupFont() { +function setupFont(): void { textSize(150); textAlign(CENTER); textFont(font); @@ -63,7 +66,7 @@ function setupFont() { /** * Sets up everything needed for the game. */ -function setupGame() { +function setupGame(): void { paused = true; raspberry = new Raspberry(RASPBERRY_IMAGE_PATH); setupObstacles(); @@ -72,7 +75,7 @@ function setupGame() { /** * Clears the obstacles and reinitializes them. */ -function setupObstacles() { +function setupObstacles(): void { obstacles = []; instantiateObstacles(OBSTACLE_COUNT); obstacles.forEach((obstacle) => obstacle.randomizeHeight()); @@ -82,10 +85,10 @@ function setupObstacles() { * Instantiates a certain amount of obstacles. * @param number */ -function instantiateObstacles(number: number) { +function instantiateObstacles(number: number): void { for (let i = 0; i < number; i++) { obstacles.push( - new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, pipeImage) + new Obstacle(new Position(width + obstacleOffset * i, 0), obstacleWidth, height, pipeImage) ); } } @@ -102,7 +105,7 @@ function draw() { /** * Draws the game's elements. */ -function drawGame() { +function drawGame(): void { drawScenery(); drawEntities(); displayScore(); @@ -113,15 +116,15 @@ function drawGame() { * - background * - floor */ -function drawScenery(){ - background(backgroundImage); - drawFloor(); +function drawScenery(): void { + background(backgroundImage); + drawFloor(); } /** * Draws the floor with the corresponding image */ -function drawFloor(){ +function drawFloor(): void { push(); noFill(); image(floorImage, 0, height - floorHeight, width, floorHeight); @@ -132,7 +135,7 @@ function drawFloor(){ /** * Draws the game's entities. */ -function drawEntities() { +function drawEntities(): void { raspberry.draw(); drawObstacles(); } @@ -140,7 +143,7 @@ function drawEntities() { /** * Draws the obstacles. */ -function drawObstacles() { +function drawObstacles(): void { obstacles.forEach((obstacle) => { obstacle.draw(); }); @@ -149,7 +152,7 @@ function drawObstacles() { /** * Operations for the game's functionality. */ -function gameLoop() { +function gameLoop(): void { if (!paused) { collisionCheck(obstacles[0]); checkRaspberryScore(); @@ -160,7 +163,7 @@ function gameLoop() { * Checks the collision between an obstacle and the raspberry. * @param o */ -function collisionCheck(o: Obstacle) { +function collisionCheck(o: Obstacle): void { if (o.collides(raspberry)) { die(); setupGame(); @@ -170,16 +173,27 @@ function collisionCheck(o: Obstacle) { /** * Timeouts key events. */ -function die() { +function die(): void { ready = false; hasDied = true; + playTime = Date.now() - startTime; + exportToLocalStorage(); setTimeout(() => ready = true, 1000); } +/** + * Exports playTime, Score and if the game is running into localStorage + */ +function exportToLocalStorage(){ + localStorage.setItem("game-playTime", String(playTime)); + localStorage.setItem("game-score", String(score)); + localStorage.setItem("game-isRunning", String(!hasDied)); +} + /** * Displays the game score. */ -function displayScore() { +function displayScore(): void { push(); fill(195, 33, 34); text(score, 0, height / 10, width, height); @@ -189,7 +203,7 @@ function displayScore() { /** * Updates all objects. */ -function update() { +function update(): void { if (!paused) { raspberry.update(); } @@ -206,8 +220,8 @@ function update() { * Check if obstacle positions should be reset and reset if so * @param obstacle obstacle to check */ -function checkObstacleReset(obstacle: Obstacle) { - if (obstacle.position.x < -OBSTACLE_WIDTH) { +function checkObstacleReset(obstacle: Obstacle): void { + if (obstacle.position.x < -obstacleWidth) { obstacle.resetPosition(); obstacles.shift(); obstacles.push(obstacle); @@ -218,7 +232,7 @@ function checkObstacleReset(obstacle: Obstacle) { /** * Check if the raspberry should score and set score */ -function checkRaspberryScore() { +function checkRaspberryScore(): void { if ((obstacles[0].position.x + obstacles[0].width / 2) < (raspberry.position.x + raspberry.width / 2) && !hasAlreadyScored) { score += 1; @@ -234,6 +248,8 @@ function resetScore(): void { hasDied = false; score = 0; hasAlreadyScored = false; + startTime = Date.now(); + exportToLocalStorage(); } } diff --git a/frontend/model/Obstacle.ts b/frontend/model/Obstacle.ts index dfba302..7b96ece 100644 --- a/frontend/model/Obstacle.ts +++ b/frontend/model/Obstacle.ts @@ -4,7 +4,7 @@ class Obstacle extends Entity implements Collidable { private pipeTop: Pipe; private pipeBottom: Pipe; - private readonly padding: number = 150; + private readonly padding: number; private readonly speed: number = 3; private static _distanceBetweenPipes: number; @@ -27,6 +27,7 @@ class Obstacle extends Entity implements Collidable { */ constructor(position: Position, obstacleWidth: number, obstacleHeight: number, image: p5.Image) { super(position, obstacleWidth, obstacleHeight, 0); + this.padding = height / 6.6666666666666666; this.createPipes(position, obstacleHeight, obstacleWidth, image); } diff --git a/frontend/model/Raspberry.ts b/frontend/model/Raspberry.ts index 59f511f..34508df 100644 --- a/frontend/model/Raspberry.ts +++ b/frontend/model/Raspberry.ts @@ -6,13 +6,13 @@ class Raspberry extends Entity { * Amount of lift applied when boosting. * @private */ - private readonly lift: number = -20; + private readonly lift: number = -15; /** * Gravity applied. * @private */ - private readonly gravity: number = 1.314159265358979323846264338; + private readonly gravity: number = 0.45; /** * Current speed. @@ -36,19 +36,25 @@ class Raspberry extends Entity { * Maximum velocity, so the raspberry doesn't get to infinite speed when boosting. * @private */ - private static readonly maxVelocity: number = 100; + private static readonly maxVelocity: number = 75; /** * Width. * @private */ - private static readonly WIDTH: number = 180; + private static width: number; /** * Height. * @private */ - private static readonly HEIGHT: number = 70; + private static height: number; + + /** + * Offset off of the floor so that the raspberry looks like it's falling on the floor + * @private + */ + private static bottomFloorOffset: number; /** * Color. @@ -56,12 +62,6 @@ class Raspberry extends Entity { */ private static readonly FILL: number = 0; - /** - * Offset off of the floor so that the raspberry looks like it's falling on the floor - * @private - */ - private static BOTTOM_FLOOR_OFFSET: number; - //region Getter & Setter /** @@ -102,8 +102,11 @@ class Raspberry extends Entity { */ constructor(image: string) { Raspberry.position = new Position(width / 6, height / 2); - super(Raspberry.position, Raspberry.WIDTH, Raspberry.HEIGHT, Raspberry.FILL); - Raspberry.BOTTOM_FLOOR_OFFSET = (height / 5) - (height / 15 / 2); + Raspberry.height = height / 14.2857142857142857; + Raspberry.width = width / 11.1111111111111111; + + super(Raspberry.position, Raspberry.width, Raspberry.height, Raspberry.FILL); + Raspberry.bottomFloorOffset = (height / 5) - (height / 15 / 2); this.image = image; } @@ -148,8 +151,8 @@ class Raspberry extends Entity { * @private */ private boundaryBottom(): void { - if (this.position.y + this.height + Raspberry.BOTTOM_FLOOR_OFFSET > height) { - this.position.y = height - this.height - Raspberry.BOTTOM_FLOOR_OFFSET; + if (this.position.y + this.height + Raspberry.bottomFloorOffset > height) { + this.position.y = height - this.height - Raspberry.bottomFloorOffset; this.velocity = 0; } }