added Vue

frontend/game/game.ts

@@ -0,0 +1,219 @@
+const PIPE_IMAGE_PATH: string = "resources/raspberry-low-res.png";
+const BACKGROUND_IMAGE_PATH: string = "resources/raspberry-low-res.png";
+const RASPBERRY_IMAGE_PATH: string = "resources/raspberry-rocket.png";
+const OBSTACLE_WIDTH: number = 88;
+const OBSTACLE_COUNT: number = 3;
+const BOOST_KEYS = ["k", " "];
+let obstacleOffset: number;
+let backgroundImage: any;
+
+let obstacles: Obstacle[] = [];
+let raspberry: Raspberry;
+let paused: boolean;
+let score: number = 0;
+let hasAlreadyScored: boolean = false;
+let hasDied: boolean = false;
+let ready: boolean = true;
+
+/**
+ * p5 setup function.
+ */
+function setup() {
+    backgroundImage = loadImage(BACKGROUND_IMAGE_PATH);
+    createCanvas(1200, 750);
+    setupObstacleConsts();
+    setupFont();
+    setupGame();
+}
+
+/**
+ * Sets up the constants needed for the game.
+ */
+function setupObstacleConsts() {
+    obstacleOffset = width / OBSTACLE_COUNT;
+    Obstacle.distanceBetweenPipes = height / 2.5
+    Obstacle.startX = width;
+}
+
+/**
+ * Set up the font.
+ */
+function setupFont() {
+    textSize(150);
+    textFont(loadFont("resources/PressStart2P-Regular.ttf"));
+}
+
+/**
+ * Sets up everything needed for the game.
+ */
+function setupGame() {
+    paused = true;
+    raspberry = new Raspberry(RASPBERRY_IMAGE_PATH);
+    setupObstacles();
+}
+
+/**
+ * Clears the obstacles and reinitializes them.
+ */
+function setupObstacles() {
+    obstacles = [];
+    instantiateObstacles(OBSTACLE_COUNT);
+    obstacles.forEach((obstacle) => obstacle.randomizeHeight());
+}
+
+/**
+ * Instantiates a certain amount of obstacles.
+ * @param number
+ */
+function instantiateObstacles(number: number) {
+    for (let i = 0; i < number; i++) {
+        obstacles.push(
+            new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, PIPE_IMAGE_PATH));
+    }
+}
+
+/**
+ * Draws and updates the game.
+ */
+function draw() {
+    update();
+    gameLoop();
+    drawGame();
+}
+
+/**
+ * Draws the game's elements.
+ */
+function drawGame() {
+    background(backgroundImage);
+    drawEntities();
+    displayScore();
+}
+
+/**
+ * Draws the game's enities.
+ */
+function drawEntities() {
+    raspberry.draw();
+    drawObstacles();
+}
+
+/**
+ * Operations for the game's functionality.
+ */
+function gameLoop() {
+    if (!paused) {
+        collisionCheck(obstacles[0]);
+        checkRaspberryScore();
+    }
+}
+
+/**
+ * Checks the collision between an obstacle and the raspberry.
+ * @param o
+ */
+function collisionCheck(o: Obstacle) {
+    if (o.collides(raspberry)) {
+        die();
+        setupGame();
+    }
+}
+
+/**
+ * Timeouts key events.
+ */
+function die() {
+    ready = false;
+    hasDied = true;
+    setTimeout(() => ready = true, 1000);
+}
+
+/**
+ * Displays the game score.
+ */
+function displayScore() {
+    push();
+    fill(200, 100, 60);
+    text(score, width / 2, height / 10, width, height);
+    pop();
+}
+
+/**
+ * Updates all objects.
+ */
+function update() {
+    if (!paused) {
+        raspberry.update();
+    }
+    obstacles.forEach((obstacle: Obstacle) => {
+        if (!paused) {
+            obstacle.update();
+            // Reset Obstacles Position
+            checkObstacleReset(obstacle);
+        }
+    })
+}
+
+/**
+ * Draws the obstacles.
+ */
+function drawObstacles() {
+    obstacles.forEach((obstacle) => {
+        obstacle.draw();
+    });
+}
+
+
+/**
+ * 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) {
+        obstacle.resetPosition();
+        obstacles.shift();
+        obstacles.push(obstacle);
+        hasAlreadyScored = false;
+    }
+}
+
+/**
+ * Check if the raspberry should score and set score
+ */
+function checkRaspberryScore() {
+    if ((obstacles[0].position.x + obstacles[0].width / 2) < (raspberry.position.x + raspberry.width / 2)
+        && !hasAlreadyScored) {
+        score += 1;
+        hasAlreadyScored = true;
+    }
+}
+
+/**
+ * Resets the score if game is started
+ */
+function resetScore(): void {
+    if (hasDied) {
+        hasDied = false;
+        score = 0;
+        hasAlreadyScored = false;
+    }
+}
+
+/**
+ * Handler for key events.
+ */
+function keyPressed() {
+    if (!ready) return;
+    // Jump
+    if (BOOST_KEYS.includes(key.toLowerCase())) {
+        resetScore();
+        raspberry.boost();
+    }
+
+    // Pause the Game
+    if (key == "Escape") {
+        paused = !paused;
+    } else if (paused) {
+        paused = false;
+    }
+}

frontend/game/global.d.ts

@@ -0,0 +1,4 @@
+// This file will add both p5 instanced and global intellisense
+import module = require('p5');
+export = module;
+export as namespace p5;

frontend/game/model/Collidable.ts

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

frontend/game/model/Entity.ts

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

frontend/game/model/Obstacle.ts

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

frontend/game/model/Pipe.ts

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

frontend/game/model/Position.ts

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

frontend/game/model/Raspberry.ts

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

frontend/game/tsconfig.json

@@ -0,0 +1,17 @@
+{
+  "compilerOptions": {
+    "noImplicitAny": true,
+    "outFile": "../public/game/build.js",
+    "preserveConstEnums": true,
+    "removeComments": true,
+    "rootDir": ".",
+    "sourceMap": true,
+    "target": "es5",
+    "moduleResolution": "node",
+    "lib": [
+      "dom",
+      "es5",
+      "scripthost"
+    ]
+  }
+}