sprechtl/RaspberryRocketeer
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

scaling & localstorage

Browse source 
- everything scaling now
- game-score, game-isRunning and game-playTime now saving in localstorage on game start and end
This commit is contained in:
dhain 2023-01-20 14:32:45 +01:00
parent 6ceccce759
commit c8528c945e
3 changed files with 62 additions and 42 deletions
Download patch file Download diff file Expand all files Collapse all files

68
frontend/game.ts
View file

@ -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();
}
}

3
frontend/model/Obstacle.ts
View file

@ -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);
}

33
frontend/model/Raspberry.ts
View file

@ -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;
}
}