diff --git a/frontend/game.ts b/frontend/game.ts index 0f293d8..ee332d7 100644 --- a/frontend/game.ts +++ b/frontend/game.ts @@ -1,19 +1,17 @@ -const PIPE_IMAGE_PATH: string = "resources/raspberry-low-res.png"; +const PIPE_IMAGE_PATH: string = "resources/seesORsoos_sad_no-bg.png"; const BACKGROUND_IMAGE_PATH: string = "resources/raspberry-low-res.png"; const RASPBERRY_IMAGE_PATH: string = "resources/raspberry-rocket.png"; -const FLOOR_IMAGE_PATH: string = "resources/"; //TODO: add image for floor -const SCROLLING_POSTER_IMAGE_PATHS: string[] = [ - "resources/rickroll.png", - "resources/seesORsoos_sad_no-bg.png", - "resources/sw_icon.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 FLOOR_HEIGHT: number = 200; const BOOST_KEYS = ["k", " "]; +let floorHeight: number; let obstacleOffset: number; -let backgroundImage: any; -let scrollingPosterImages: p5.Image[] = []; +let font: p5.Font; +let backgroundImage: p5.Image; +let pipeImage: p5.Image; +let floorImage: p5.Image; let obstacles: Obstacle[] = []; let raspberry: Raspberry; @@ -24,24 +22,24 @@ let hasDied: boolean = false; let ready: boolean = true; /** - * p5 setup function. + * p5 preload function */ -function setup() { +function preload() { + font = loadFont(FONT_PATH); backgroundImage = loadImage(BACKGROUND_IMAGE_PATH); - loadScrollingPosterImages(); - createCanvas(2000, 1000); - setupObstacleConsts(); - setupFont(); - setupGame(); + pipeImage = loadImage(PIPE_IMAGE_PATH); + floorImage = loadImage(FLOOR_IMAGE_PATH); } /** - * Loads all scrolling poster images into the `scrollingPosterImages` list + * p5 setup function. */ -function loadScrollingPosterImages(){ - for (const posterImagePath of SCROLLING_POSTER_IMAGE_PATHS) { - scrollingPosterImages.push(loadImage(posterImagePath)); - } +function setup() { + createCanvas(2000, 1000); + floorHeight = height / 5; + setupObstacleConsts(); + setupFont(); + setupGame(); } /** @@ -59,7 +57,7 @@ function setupObstacleConsts() { function setupFont() { textSize(150); textAlign(CENTER); - textFont(loadFont("resources/PressStart2P-Regular.ttf")); + textFont(font); } /** @@ -87,7 +85,7 @@ function setupObstacles() { 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)); + new Obstacle(new Position(width + obstacleOffset * i, 0), OBSTACLE_WIDTH, height, pipeImage)); } } @@ -117,7 +115,6 @@ function drawGame() { function drawScenery(){ background(backgroundImage); drawFloor(); - drawBackgroundPosters(); } /** @@ -126,22 +123,11 @@ function drawScenery(){ function drawFloor(){ push(); noFill(); - //TODO: image - // image(loadImage(FLOOR_IMAGE_PATH), 0, height - FLOOR_HEIGHT, width, FLOOR_HEIGHT); - rect(0, height - FLOOR_HEIGHT, width, FLOOR_HEIGHT); + image(floorImage, 0, height - floorHeight, width, floorHeight); + rect(0, height - floorHeight, width, floorHeight); pop(); } -function drawBackgroundPosters(){ - for (const posterImage of scrollingPosterImages){ - push(); - noFill(); - //TODO scroll images and dont load all at once - image(posterImage, 0, 0); - pop(); - } -} - /** * Draws the game's enities. */ @@ -150,6 +136,15 @@ function drawEntities() { drawObstacles(); } +/** + * Draws the obstacles. + */ +function drawObstacles() { + obstacles.forEach((obstacle) => { + obstacle.draw(); + }); +} + /** * Operations for the game's functionality. */ @@ -206,16 +201,6 @@ function update() { }) } -/** - * 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 diff --git a/frontend/model/Obstacle.ts b/frontend/model/Obstacle.ts index 01d165d..dfba302 100644 --- a/frontend/model/Obstacle.ts +++ b/frontend/model/Obstacle.ts @@ -23,11 +23,11 @@ class Obstacle extends Entity implements Collidable { * @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 + * @param image the image to be used */ - constructor(position: Position, obstacleWidth: number, obstacleHeight: number, pipeImagePath: string) { + constructor(position: Position, obstacleWidth: number, obstacleHeight: number, image: p5.Image) { super(position, obstacleWidth, obstacleHeight, 0); - this.createPipes(position, obstacleHeight, obstacleWidth, pipeImagePath); + this.createPipes(position, obstacleHeight, obstacleWidth, image); } /** @@ -35,12 +35,12 @@ class Obstacle extends Entity implements Collidable { * @param position * @param obstacleHeight * @param obstacleWidth - * @param pipeImagePath + * @param pipeImage * @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); + private createPipes(position: Position, obstacleHeight: number, obstacleWidth: number, pipeImage: p5.Image) { + this.pipeTop = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage); + this.pipeBottom = new Pipe(position.x, obstacleWidth, obstacleHeight, pipeImage); } /** diff --git a/frontend/model/Pipe.ts b/frontend/model/Pipe.ts index 016f3a8..7af7ea5 100644 --- a/frontend/model/Pipe.ts +++ b/frontend/model/Pipe.ts @@ -6,33 +6,16 @@ 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 + private readonly image: p5.Image; /** * Constructs the pipe. * @param positionX starting x-Position * @param width pipe width * @param height pipe height - * @param image path to image. + * @param image image object */ - constructor(positionX: number, width: number, height: number, image: string) { + constructor(positionX: number, width: number, height: number, image: p5.Image) { super(new Position(positionX, 0), width, height, 0); this.image = image; } @@ -40,7 +23,8 @@ class Pipe extends Entity implements Collidable { /** * YAGNI. */ - public update(): void {} + public update(): void { + } /** * Draws the pipe. @@ -48,7 +32,19 @@ class Pipe extends Entity implements Collidable { public draw(): void { push(); noFill(); - image(this.image, this.position.x, this.position.y, this.width, this.height); + + if (this.height > this.image.height) { + let maxImageYPos = Math.ceil(this.height / this.image.height) * this.image.height; + for (let imageYPos = 0; imageYPos < maxImageYPos; imageYPos += this.image.height) { + console.log("maximageypos: " + maxImageYPos); + console.log("image height: " + this.image.height); + console.log("imageypos: " + imageYPos); + image(this.image, this.position.x, this.position.y + imageYPos, this.width, this.image.height); + } + } else { + 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(); } diff --git a/frontend/model/Raspberry.ts b/frontend/model/Raspberry.ts index c42840c..59f511f 100644 --- a/frontend/model/Raspberry.ts +++ b/frontend/model/Raspberry.ts @@ -56,6 +56,12 @@ 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 /** @@ -97,6 +103,7 @@ 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); this.image = image; } @@ -117,7 +124,7 @@ class Raspberry extends Entity { } /** - * Limits the raspberry's movement to the shown canvas. + * Limits the Raspberry's movement to the shown canvas. * @private */ private forceBoundaries(): void { @@ -141,8 +148,8 @@ class Raspberry extends Entity { * @private */ private boundaryBottom(): void { - if (this.position.y + this.height > height) { - this.position.y = height - this.height; + if (this.position.y + this.height + Raspberry.BOTTOM_FLOOR_OFFSET > height) { + this.position.y = height - this.height - Raspberry.BOTTOM_FLOOR_OFFSET; this.velocity = 0; } } diff --git a/frontend/resources/dell-pc-min-min.png b/frontend/resources/dell-pc-min-min.png new file mode 100644 index 0000000..f480868 Binary files /dev/null and b/frontend/resources/dell-pc-min-min.png differ diff --git a/frontend/resources/dell-pc-min.png b/frontend/resources/dell-pc-min.png new file mode 100644 index 0000000..5fe742c Binary files /dev/null and b/frontend/resources/dell-pc-min.png differ diff --git a/frontend/resources/dell-pc.png b/frontend/resources/dell-pc.png new file mode 100644 index 0000000..bff626c Binary files /dev/null and b/frontend/resources/dell-pc.png differ diff --git a/frontend/resources/table-min-min.png b/frontend/resources/table-min-min.png new file mode 100644 index 0000000..c2e2dfe Binary files /dev/null and b/frontend/resources/table-min-min.png differ diff --git a/frontend/resources/table-min.png b/frontend/resources/table-min.png new file mode 100644 index 0000000..689238f Binary files /dev/null and b/frontend/resources/table-min.png differ diff --git a/frontend/resources/table.png b/frontend/resources/table.png new file mode 100644 index 0000000..310df2a Binary files /dev/null and b/frontend/resources/table.png differ