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

added Vue

Browse source
This commit is contained in:
j-weissen 2023-01-12 12:14:59 +01:00
parent d93a5fd6a1
commit 2d7ab30ec6
36 changed files with 15930 additions and 2884 deletions
Download patch file Download diff file Expand all files Collapse all files

10
frontend/game/model/Collidable.ts Normal file
View file

@ -0,0 +1,10 @@
/**
* Collide-able objects.
*/
interface Collidable {
/**
* Determines when two entities collide
* @param o other entity
*/
collides(o: Entity): boolean;
}

127
frontend/game/model/Entity.ts Normal file
View file

@ -0,0 +1,127 @@
/**
* General rectangular entities.
*/
abstract class Entity {
/**
* Position.
* @private
*/
private _position: Position;
/**
* Width.
* @private
*/
private _width: number;
/**
* Height.
* @private
*/
private _height: number;
/**
* Color.
* @private
*/
private fill: number;
/**
* Whether the hitbox (rectangular surrounding) is shown, or not.
* @private
*/
private _showHitbox: boolean;
//region Getter & Setter
/**
* Get position.
*/
get position(): Position {
return this._position;
}
/**
* Set position.
* @param value
*/
set position(value: Position) {
this._position = value;
}
/**
* Get width.
*/
get width(): number {
return this._width;
}
/**
* Set width.
* @param value
*/
set width(value: number) {
this._width = value;
}
/**
* Get height.
*/
get height(): number {
return this._height;
}
/**
* Set height.
* @param value
*/
set height(value: number) {
this._height = value;
}
/**
* Get the hitbox's visibility.
*/
get showHitbox(): boolean {
return this._showHitbox;
}
/**
* Set the hitbox's visibility.
* @param value
*/
set showHitbox(value: boolean) {
this._showHitbox = value;
}
//endregion
/**
* Constructs the Entity.
* @param position starting Position
* @param width entity width
* @param height entity height
* @param fill fill color
*/
protected constructor(position: Position, width: number, height: number, fill: number) {
this.position = position;
this.width = width;
this.height = height;
this.fill = fill;
this._showHitbox = false;
}
/**
* Updates the entity.
*/
public abstract update(): void;
/**
* Draws the entity.
*/
public draw(): void {
push();
fill(this.fill);
rect(this.position.x, this.position.y, this.width, this.height);
pop();
}
}

92
frontend/game/model/Obstacle.ts Normal file
View file

@ -0,0 +1,92 @@
/**
* Obstacle of the game. Built from 2 pipes, one at the bottom, one at the top.
*/
class Obstacle extends Entity implements Collidable {
private pipeTop: Pipe;
private pipeBottom: Pipe;
private readonly padding: number = 150;
private readonly speed: number = 3;
private static _distanceBetweenPipes: number;
private static _startX: number;
static set startX(value: number) {
this._startX = value;
}
static set distanceBetweenPipes(value: number) {
this._distanceBetweenPipes = value;
}
/**
* Constructs the Obstacle with the given image.
* @param position starting position of the obstacle
* @param obstacleWidth width of the obstacle
* @param obstacleHeight height of the obstacle
* @param pipeImagePath path to the image to be used
*/
constructor(position: Position, obstacleWidth: number, obstacleHeight: number, pipeImagePath: string) {
super(position, obstacleWidth, obstacleHeight, 0);
this.createPipes(position, obstacleHeight, obstacleWidth, pipeImagePath);
}
/**
* Creates the pipes.
* @param position
* @param obstacleHeight
* @param obstacleWidth
* @param pipeImagePath
* @private
*/
private createPipes(position: Position, obstacleHeight: number, obstacleWidth: number, pipeImagePath: string) {
this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImagePath);
this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImagePath);
}
/**
* Resets the position of the obstacle to the Obstacle.startX variable
* Randomises the height of the pipes using the padding variable
*/
public resetPosition(): void {
this.randomizeHeight();
this.pipeBottom.position.x = Obstacle._startX;
this.pipeTop.position.x = Obstacle._startX;
}
/**
* Randomizes the height of the pipes
*/
public randomizeHeight(): void {
this.pipeTop.height = this.randomRange(this.padding, height - this.padding - Obstacle._distanceBetweenPipes);
this.pipeBottom.position.y = this.pipeTop.height + Obstacle._distanceBetweenPipes;
this.pipeBottom.height = height - this.pipeTop.height - this.padding;
}
/**
* Creates a random number between the min and max parameter
* @param min minimum number
* @param max maximum number
*/
private randomRange(min: number, max: number): number {
return Math.random() * (max - min) + min;
}
public update(): void {
this.pipeTop.move(this.speed);
this.pipeBottom.move(this.speed);
this.position.x = this.pipeTop.position.x;
}
public draw(): void {
this.pipeTop.draw();
this.pipeBottom.draw();
}
/**
* Determines when the obstacle is colliding with another entity
* @param o other entity
*/
public collides(o: Entity): boolean {
return this.pipeTop.collides(o) || this.pipeBottom.collides(o);
}
}

74
frontend/game/model/Pipe.ts Normal file
View file

@ -0,0 +1,74 @@
/**
* Rectangular obstacle.
*/
class Pipe extends Entity implements Collidable {
/**
* Pipe's image.
* @private
*/
private _image: p5.Image;
//region Getter & Setter
/**
* Gets the image.
*/
get image(): p5.Image {
return this._image;
}
/**
* Sets the image.
* @param path Path to image
*/
set image(path: any) {
this._image = loadImage(path);
}
//endregion
/**
* Constructs the pipe.
* @param positionX starting x-Position
* @param width pipe width
* @param height pipe height
* @param image path to image.
*/
constructor(positionX: number, width: number, height: number, image: string) {
super(new Position(positionX, 0), width, height, 0);
this.image = image;
}
/**
* YAGNI.
*/
public update(): void {}
/**
* Draws the pipe.
*/
public draw(): void {
push();
noFill();
image(this.image, this.position.x, this.position.y, this.width, this.height);
rect(this.position.x, this.position.y, this.width, this.height);
pop();
}
/**
* Moves the pipe to the lift with the given speed
* @param speed how fast the pipe moves
*/
public move(speed: number): void {
this.position.x -= speed;
}
/**
* Determines when the pipe is colliding with another entity
* @param o other entity
*/
collides(o: Entity): boolean {
return this.position.x < (o.position.x + o.width) && //inside left border
(this.position.x + this.width) > o.position.x && //but not outside right border
this.position.y < (o.position.y + o.height) && //inside top border
(this.position.y + this.height) > o.position.y; //but not outside bottom border
}
}

59
frontend/game/model/Position.ts Normal file
View file

@ -0,0 +1,59 @@
/**
* 2D Point.
*/
class Position {
/**
* X coordinate.
* @private
*/
private _x: number;
/**
* Y coordinate.
* @private
*/
private _y: number;
//region Getter & Setter
/**
* Get x.
*/
get x(): number {
return this._x;
}
/**
* Set x.
* @param value
*/
set x(value: number) {
this._x = value;
}
/**
* Get y.
*/
get y(): number {
return this._y;
}
/**
* Set y.
* @param value
*/
set y(value: number) {
this._y = value;
}
//endregion
/**
* Constructs the position.
* @param x x-Position
* @param y y-Position
*/
constructor(x: number, y: number) {
this._x = x;
this._y = y;
}
}

202
frontend/game/model/Raspberry.ts Normal file
View file

@ -0,0 +1,202 @@
/**
* Raspberry class.
*/
class Raspberry extends Entity {
/**
* Amount of lift applied when boosting.
* @private
*/
private readonly lift: number = -15;
/**
* Gravity applied.
* @private
*/
private readonly gravity: number = 0.45;
/**
* Current speed.
* @private
*/
private _velocity: number = 0;
/**
* Image for the raspberry.
* @private
*/
private _image: p5.Image;
/**
* Position.
* @private
*/
private static position: Position;
/**
* Maximum velocity, so the raspberry doesn't get to infinite speed when boosting.
* @private
*/
private static readonly maxVelocity: number = 100;
/**
* Width.
* @private
*/
private static readonly WIDTH: number = 180;
/**
* Height.
* @private
*/
private static readonly HEIGHT: number = 70;
/**
* Color.
* @private
*/
private static readonly FILL: number = 0;
//region Getter & Setter
/**
* Gets the velocity.
*/
get velocity(): number {
return this._velocity;
}
/**
* Sets the velocity.
* @param value
*/
set velocity(value: number) {
this._velocity = (Math.abs(this.velocity) > Raspberry.maxVelocity) ? Raspberry.maxVelocity : value;
}
/**
* Gets the image.
*/
get image(): p5.Image {
return this._image;
}
/**
* Sets the image by path.
* @param {string} path
*/
set image(path: any) {
this._image = loadImage(path);
}
//endregion
/**
* Constructs the Raspberry with fixed sizes.
* @param image Path to image
*/
constructor(image: string) {
Raspberry.position = new Position(width / 6, height / 2);
super(Raspberry.position, Raspberry.WIDTH, Raspberry.HEIGHT, Raspberry.FILL);
this.image = image;
}
/**
* Applies gravity and keeps the raspberry within the canvas.
*/
public update(): void {
this.applyGravity();
this.forceBoundaries();
}
/**
* Lets the Raspberry fall to the ground
*/
private applyGravity(): void {
this.velocity += this.gravity;
this.position.y += this.velocity;
}
/**
* Limits the raspberry's movement to the shown canvas.
* @private
*/
private forceBoundaries(): void {
this.boundaryTop();
this.boundaryBottom();
}
/**
* Forces the boundaries at the canvas' top.
* @private
*/
private boundaryTop(): void {
if (this.position.y < 0) {
this.position.y = 0;
this.velocity = 0;
}
}
/**
* Forces the boundaries at the canvas' bottom.
* @private
*/
private boundaryBottom(): void {
if (this.position.y + this.height > height) {
this.position.y = height - this.height;
this.velocity = 0;
}
}
/**
* Lets the raspberry jump.
*/
public boost(): void {
this.velocity += this.lift;
}
/**
* Draws raspberry.
*/
public draw(): void {
push();
noFill();
this.setPose();
this.drawObject();
pop();
}
/**
* Draws the rocket.
* @private
*/
private drawObject() {
this.drawHitBox();
this.drawRocket();
}
/**
* Handles the drawing of the object.
*/
private drawRocket() {
image(this.image, 0, 0, this.width, this.height);
rect(0, 0, this.width, this.height);
}
/**
* If enabled, draws the hitbox.
*/
private drawHitBox() {
if (!this.showHitbox) {
noStroke();
}
}
/**
* Rotation and position of the rocket.
* @private
*/
private setPose() {
translate(this.position.x, this.position.y);
rotate((PI / 2) * (this.velocity / Raspberry.maxVelocity));
}
}