Code review 2023-01-10

frontend/model/Collidable.ts

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

frontend/model/Entity.ts

@@ -0,0 +1,65 @@
+abstract class Entity {
+    private _position: Position;
+    private _width: number;
+    private _height: number;
+    private fill: number;
+    private _showHitbox: boolean;
+
+    //region Getter & Setter
+    get position(): Position {
+        return this._position;
+    }
+
+    set position(value: Position) {
+        this._position = value;
+    }
+
+    get width(): number {
+        return this._width;
+    }
+
+    set width(value: number) {
+        this._width = value;
+    }
+
+    get height(): number {
+        return this._height;
+    }
+
+    set height(value: number) {
+        this._height = value;
+    }
+
+    get showHitbox(): boolean {
+        return this._showHitbox;
+    }
+
+    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;
+    }
+
+    public abstract update(): void;
+
+    public draw(): void {
+        push();
+        fill(this.fill);
+        rect(this.position.x, this.position.y, this.width, this.height);
+        pop();
+    }
+}

frontend/model/Obstacle.ts

@@ -0,0 +1,80 @@
+class Obstacle extends Entity implements Collidable {
+    private pipeTop: Pipe;
+    private pipeBottom: Pipe;
+    private static distanceBetweenPipes: number;
+    private readonly padding: number = 150;
+    private readonly speed: number = 3;
+
+    private static startX: number;
+
+    /**
+     * Constructs the Obstacle with the given image
+     * (fill is not used here)
+     * @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.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight);
+        this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight);
+        this.pipeTop.image = pipeImagePath;
+        this.pipeBottom.image = pipeImagePath;
+
+        Obstacle.distanceBetweenPipes = height / 2.5;
+        //TODO: Put into setupGame()
+        Obstacle.startX = width;
+    }
+
+    /**
+     * 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);
+        //TODO: Soi des do sei?
+        this.pipeTop.position.y = 0;
+        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 {
+        // TODO: Put into pipe.update
+        this.pipeTop.position.x -= this.speed;
+        this.pipeBottom.position.x -= 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);
+    }
+}

frontend/model/Pipe.ts

@@ -0,0 +1,50 @@
+class Pipe extends Entity implements Collidable {
+    private _image: any;
+
+    //region Getter & Setter
+    get image(): any {
+        return this._image;
+    }
+
+    set image(path: string) {
+        this._image = loadImage(path);
+    }
+    //endregion
+
+    /**
+     * Constructs the pipe
+     * @param positionX starting x-Position 
+     * @param width pipe width
+     * @param height pipe height
+     */
+    constructor(positionX: number, width: number, height: number) {
+        super(new Position(positionX, 0), width, height, 0);
+    }
+
+    public update(): void {
+    }
+
+    public draw(): void {
+        push();
+        image(this.image, this.position.x, this.position.y, this.width, this.height);
+        noFill();
+        rect(
+            this.position.x,
+            this.position.y,
+            this.width,
+            this.height
+        );
+        pop();
+    }
+
+    /**
+     * 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
+    }
+}

frontend/model/Position.ts

@@ -0,0 +1,32 @@
+class Position {
+    private _x: number;
+    private _y: number;
+
+    //region Getter & Setter
+    get x(): number {
+        return this._x;
+    }
+
+    set x(value: number) {
+        this._x = value;
+    }
+
+    get y(): number {
+        return this._y;
+    }
+
+    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;
+    }
+}

frontend/model/Raspberry.ts

@@ -0,0 +1,81 @@
+class Raspberry extends Entity {
+    private readonly lift: number = -20;
+    private readonly gravity: number = 1.314159265358979323846264338;
+    private _velocity: number = 0;
+    private _image: any;
+    private static readonly maxVelocity: number = 100;
+
+    //region Getter & Setter
+    get velocity(): number {
+        return this._velocity;
+    }
+
+    set velocity(value: number) {
+        this._velocity = (Math.abs(this.velocity) > Raspberry.maxVelocity) ? Raspberry.maxVelocity : value;
+    }
+
+    get image(): any {
+        return this._image;
+    }
+
+    set image(path: string) {
+        this._image = loadImage(path);
+    }
+
+    //endregion
+
+    /**
+     * Constructs the Raspberry with fixed sizes
+     */
+    constructor() {
+        // TODO: Move literals to consta
+        super(new Position(width / 6, height / 2), 180, 70, 0);
+    }
+
+    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;
+    }
+
+    private forceBoundaries(): void {
+        if (this.position.y + this.height > height) {
+            this.position.y = height - this.height;
+            this.velocity = 0;
+        }
+
+        if (this.position.y < 0) {
+            this.position.y = 0;
+            this.velocity = 0;
+        }
+    }
+    
+    public boost(): void {
+        this.velocity += this.lift;
+    }
+
+    public draw(): void {
+        push();
+        noFill();
+        translate(this.position.x, this.position.y);
+        rotate((PI / 2) * (this.velocity / Raspberry.maxVelocity));
+        image(this.image, 0, 0, this.width, this.height);
+        if (!this.showHitbox) {
+            noStroke();
+        }
+        rect(
+            0,
+            0,
+            this.width,
+            this.height
+        );
+        pop();
+    }
+}