bp-prism-game
Version:
The BP Prism Game
71 lines • 11.5 kB
JavaScript
import { Component, ViewChild } from '@angular/core';
import { AssetAlignEnum } from '../../asset/enum/asset-align.enum';
import { AssetAlignVerticalEnum } from '../../asset/enum/asset-align-vertical.enum';
import { MissileClass } from '../missile.class';
import * as i0 from "@angular/core";
import * as i1 from "../../service/game.service";
/**
* The Missile Component
*/
export class MissileComponent {
/**
* The Constructor
* @param gameService The GameService from DI
*/
constructor(gameService) {
this.gameService = gameService;
}
/**
* On Init
*/
ngOnInit() {
const rows = 30;
const columns = 40;
const gameBoard = Array.from({ length: rows }, () => Array(columns).fill(0));
this.ctx = this.gameService.initBoard(this.canvas, rows, columns, 25, gameBoard);
this.missile = new MissileClass(this.gameService, this.ctx, 0);
this.missile.move(this.missile.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
this.animate();
}
/**
* Animate the object once
*/
animateAsset() {
this.missile.setMissileData({
rotation: 0,
position: {
x: 1,
y: 1
}
});
this.missile.isDestroyed = false;
this.missile.move(this.missile.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
cancelAnimationFrame(this.requestId);
this.animate();
}
/**
* Draw the board
*/
draw() {
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
this.gameService.addOutlines(this.ctx, 1, 0.025);
}
/**
* Animate
*/
animate() {
this.draw();
this.missile.animate();
this.requestId = requestAnimationFrame(this.animate.bind(this));
}
}
MissileComponent.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: MissileComponent, deps: [{ token: i1.GameService }], target: i0.ɵɵFactoryTarget.Component });
MissileComponent.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "12.0.0", version: "13.3.2", type: MissileComponent, selector: "bp-prism-missile", viewQueries: [{ propertyName: "canvas", first: true, predicate: ["board"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"game-container\">\n <div class=\"asset-title\">Missile</div>\n <div class=\"game-board-container\">\n <canvas #board class=\"game-board\"></canvas>\n </div>\n <div class=\"button-container\">\n <button (click)=\"animateAsset()\" class=\"animation-button button\">Animate</button>\n </div>\n</div>\n", styles: [".game-container .asset-title{margin-bottom:25px;width:100%;text-align:center}.game-container .game-board-container{display:flex;flex-direction:row;justify-content:center}.game-container .game-board-container .game-board{border:solid 2px grey;background-color:#000}.game-container .button-container{position:relative;margin-top:25px;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-evenly}.game-container .button-container .animation-button{background-color:#4caf50}.game-container .button-container .button{flex-wrap:wrap;font-size:16px;margin-top:10px;padding:15px 30px;cursor:pointer;width:165px;border:1px solid black}\n"] });
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "13.3.2", ngImport: i0, type: MissileComponent, decorators: [{
type: Component,
args: [{ selector: 'bp-prism-missile', template: "<div class=\"game-container\">\n <div class=\"asset-title\">Missile</div>\n <div class=\"game-board-container\">\n <canvas #board class=\"game-board\"></canvas>\n </div>\n <div class=\"button-container\">\n <button (click)=\"animateAsset()\" class=\"animation-button button\">Animate</button>\n </div>\n</div>\n", styles: [".game-container .asset-title{margin-bottom:25px;width:100%;text-align:center}.game-container .game-board-container{display:flex;flex-direction:row;justify-content:center}.game-container .game-board-container .game-board{border:solid 2px grey;background-color:#000}.game-container .button-container{position:relative;margin-top:25px;display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-evenly}.game-container .button-container .animation-button{background-color:#4caf50}.game-container .button-container .button{flex-wrap:wrap;font-size:16px;margin-top:10px;padding:15px 30px;cursor:pointer;width:165px;border:1px solid black}\n"] }]
}], ctorParameters: function () { return [{ type: i1.GameService }]; }, propDecorators: { canvas: [{
type: ViewChild,
args: ['board', { static: true }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibWlzc2lsZS5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9wcmlzbS9zcmMvbGliL21pc3NpbGUvdGVzdC1jb21wb25lbnQvbWlzc2lsZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9wcmlzbS9zcmMvbGliL21pc3NpbGUvdGVzdC1jb21wb25lbnQvbWlzc2lsZS5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFzQixTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFHekUsT0FBTyxFQUFFLGNBQWMsRUFBRSxNQUFNLG1DQUFtQyxDQUFDO0FBQ25FLE9BQU8sRUFBRSxzQkFBc0IsRUFBRSxNQUFNLDRDQUE0QyxDQUFDO0FBQ3BGLE9BQU8sRUFBRSxZQUFZLEVBQUUsTUFBTSxrQkFBa0IsQ0FBQzs7O0FBSWhEOztHQUVHO0FBTUgsTUFBTSxPQUFPLGdCQUFnQjtJQXNCM0I7OztPQUdHO0lBQ0gsWUFBb0IsV0FBd0I7UUFBeEIsZ0JBQVcsR0FBWCxXQUFXLENBQWE7SUFBRyxDQUFDO0lBRWhEOztPQUVHO0lBQ0gsUUFBUTtRQUNOLE1BQU0sSUFBSSxHQUFHLEVBQUUsQ0FBQztRQUNoQixNQUFNLE9BQU8sR0FBRyxFQUFFLENBQUM7UUFDbkIsTUFBTSxTQUFTLEdBQUcsS0FBSyxDQUFDLElBQUksQ0FBQyxFQUFFLE1BQU0sRUFBRSxJQUFJLEVBQUUsRUFBRSxHQUFHLEVBQUUsQ0FBQyxLQUFLLENBQUMsT0FBTyxDQUFDLENBQUMsSUFBSSxDQUFDLENBQUMsQ0FBYSxDQUFDLENBQUM7UUFFekYsSUFBSSxDQUFDLEdBQUcsR0FBRyxJQUFJLENBQUMsV0FBVyxDQUFDLFNBQVMsQ0FBQyxJQUFJLENBQUMsTUFBTSxFQUFFLElBQUksRUFBRSxPQUFPLEVBQUUsRUFBRSxFQUFFLFNBQVMsQ0FBQyxDQUFDO1FBQ2pGLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxZQUFZLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQy9ELElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUUsc0JBQXNCLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztRQUNwRyxJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7SUFDakIsQ0FBQztJQUVEOztPQUVHO0lBQ0gsWUFBWTtRQUNWLElBQUksQ0FBQyxPQUFPLENBQUMsY0FBYyxDQUFDO1lBQzFCLFFBQVEsRUFBRSxDQUFDO1lBQ1gsUUFBUSxFQUFFO2dCQUNSLENBQUMsRUFBRSxDQUFDO2dCQUNKLENBQUMsRUFBRSxDQUFDO2FBQ0s7U0FDVSxDQUFDLENBQUM7UUFDekIsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ2pDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUUsc0JBQXNCLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztRQUNwRyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFFRDs7T0FFRztJQUNLLElBQUk7UUFDVixJQUFJLENBQUMsR0FBRyxDQUFDLFNBQVMsQ0FBQyxDQUFDLEVBQUUsQ0FBQyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLEtBQUssRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxNQUFNLENBQUMsQ0FBQztRQUN4RSxJQUFJLENBQUMsV0FBVyxDQUFDLFdBQVcsQ0FBQyxJQUFJLENBQUMsR0FBRyxFQUFFLENBQUMsRUFBRSxLQUFLLENBQUMsQ0FBQztJQUNuRCxDQUFDO0lBRUQ7O09BRUc7SUFDSSxPQUFPO1FBQ1osSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ1osSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQztRQUN2QixJQUFJLENBQUMsU0FBUyxHQUFHLHFCQUFxQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBeUIsQ0FBQyxDQUFDO0lBQzFGLENBQUM7OzZHQTFFVSxnQkFBZ0I7aUdBQWhCLGdCQUFnQix1S0NqQjdCLG9VQVNBOzJGRFFhLGdCQUFnQjtrQkFMNUIsU0FBUzsrQkFDRSxrQkFBa0I7a0dBUzVCLE1BQU07c0JBREwsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIEVsZW1lbnRSZWYsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBHYW1lU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2UvZ2FtZS5zZXJ2aWNlJztcbmltcG9ydCB7IEFzc2V0QWxpZ25FbnVtIH0gZnJvbSAnLi4vLi4vYXNzZXQvZW51bS9hc3NldC1hbGlnbi5lbnVtJztcbmltcG9ydCB7IEFzc2V0QWxpZ25WZXJ0aWNhbEVudW0gfSBmcm9tICcuLi8uLi9hc3NldC9lbnVtL2Fzc2V0LWFsaWduLXZlcnRpY2FsLmVudW0nO1xuaW1wb3J0IHsgTWlzc2lsZUNsYXNzIH0gZnJvbSAnLi4vbWlzc2lsZS5jbGFzcyc7XG5pbXBvcnQgeyBNaXNzaWxlTGF1bmNoTW9kZWwgfSBmcm9tICcuLi9tb2RlbC9taXNzaWxlLWxhdW5jaC5tb2RlbCc7XG5pbXBvcnQgeyBJQXNzZXQgfSBmcm9tICcuLi8uLi9pbnRlcmZhY2UvYXNzZXQuaW50ZXJmYWNlJztcblxuLyoqXG4gKiBUaGUgTWlzc2lsZSBDb21wb25lbnRcbiAqL1xuQENvbXBvbmVudCh7XG4gIHNlbGVjdG9yOiAnYnAtcHJpc20tbWlzc2lsZScsXG4gIHRlbXBsYXRlVXJsOiAnLi9taXNzaWxlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbWlzc2lsZS5jb21wb25lbnQuc2NzcyddXG59KVxuZXhwb3J0IGNsYXNzIE1pc3NpbGVDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAvKipcbiAgICogVGhlIGNhbnZhc1xuICAgKi9cbiAgQFZpZXdDaGlsZCgnYm9hcmQnLCB7IHN0YXRpYzogdHJ1ZSB9KVxuICBjYW52YXM6IEVsZW1lbnRSZWY8SFRNTENhbnZhc0VsZW1lbnQ+O1xuXG4gIC8qKlxuICAgKiBDVFNcbiAgICovXG4gIHByaXZhdGUgY3R4OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQ7XG5cbiAgLyoqXG4gICAqIHJlcXVlc3QgSWRcbiAgICovXG4gIHByaXZhdGUgcmVxdWVzdElkOiBudW1iZXI7XG5cbiAgLyoqXG4gICAqIFRoZSBtaXNzaWxlXG4gICAqL1xuICBwcml2YXRlIG1pc3NpbGU6IE1pc3NpbGVDbGFzcztcblxuICAvKipcbiAgICogVGhlIENvbnN0cnVjdG9yXG4gICAqIEBwYXJhbSBnYW1lU2VydmljZSBUaGUgR2FtZVNlcnZpY2UgZnJvbSBESVxuICAgKi9cbiAgY29uc3RydWN0b3IocHJpdmF0ZSBnYW1lU2VydmljZTogR2FtZVNlcnZpY2UpIHt9XG5cbiAgLyoqXG4gICAqIE9uIEluaXRcbiAgICovXG4gIG5nT25Jbml0KCkge1xuICAgIGNvbnN0IHJvd3MgPSAzMDtcbiAgICBjb25zdCBjb2x1bW5zID0gNDA7XG4gICAgY29uc3QgZ2FtZUJvYXJkID0gQXJyYXkuZnJvbSh7IGxlbmd0aDogcm93cyB9LCAoKSA9PiBBcnJheShjb2x1bW5zKS5maWxsKDApIGFzIG51bWJlcltdKTtcblxuICAgIHRoaXMuY3R4ID0gdGhpcy5nYW1lU2VydmljZS5pbml0Qm9hcmQodGhpcy5jYW52YXMsIHJvd3MsIGNvbHVtbnMsIDI1LCBnYW1lQm9hcmQpO1xuICAgIHRoaXMubWlzc2lsZSA9IG5ldyBNaXNzaWxlQ2xhc3ModGhpcy5nYW1lU2VydmljZSwgdGhpcy5jdHgsIDApO1xuICAgIHRoaXMubWlzc2lsZS5tb3ZlKHRoaXMubWlzc2lsZS5wb3NpdGlvbkFzc2V0KEFzc2V0QWxpZ25FbnVtLmNlbnRlciwgQXNzZXRBbGlnblZlcnRpY2FsRW51bS5taWRkbGUpKTtcbiAgICB0aGlzLmFuaW1hdGUoKTtcbiAgfVxuXG4gIC8qKlxuICAgKiBBbmltYXRlIHRoZSBvYmplY3Qgb25jZVxuICAgKi9cbiAgYW5pbWF0ZUFzc2V0KCk6IHZvaWQge1xuICAgIHRoaXMubWlzc2lsZS5zZXRNaXNzaWxlRGF0YSh7XG4gICAgICByb3RhdGlvbjogMCxcbiAgICAgIHBvc2l0aW9uOiB7XG4gICAgICAgIHg6IDEsXG4gICAgICAgIHk6IDFcbiAgICAgIH0gYXMgSUFzc2V0XG4gICAgfSBhcyBNaXNzaWxlTGF1bmNoTW9kZWwpO1xuICAgIHRoaXMubWlzc2lsZS5pc0Rlc3Ryb3llZCA9IGZhbHNlO1xuICAgIHRoaXMubWlzc2lsZS5tb3ZlKHRoaXMubWlzc2lsZS5wb3NpdGlvbkFzc2V0KEFzc2V0QWxpZ25FbnVtLmNlbnRlciwgQXNzZXRBbGlnblZlcnRpY2FsRW51bS5taWRkbGUpKTtcbiAgICBjYW5jZWxBbmltYXRpb25GcmFtZSh0aGlzLnJlcXVlc3RJZCk7XG4gICAgdGhpcy5hbmltYXRlKCk7XG4gIH1cblxuICAvKipcbiAgICogRHJhdyB0aGUgYm9hcmRcbiAgICovXG4gIHByaXZhdGUgZHJhdygpIHtcbiAgICB0aGlzLmN0eC5jbGVhclJlY3QoMCwgMCwgdGhpcy5jdHguY2FudmFzLndpZHRoLCB0aGlzLmN0eC5jYW52YXMuaGVpZ2h0KTtcbiAgICB0aGlzLmdhbWVTZXJ2aWNlLmFkZE91dGxpbmVzKHRoaXMuY3R4LCAxLCAwLjAyNSk7XG4gIH1cblxuICAvKipcbiAgICogQW5pbWF0ZVxuICAgKi9cbiAgcHVibGljIGFuaW1hdGUoKTogdm9pZCB7XG4gICAgdGhpcy5kcmF3KCk7XG4gICAgdGhpcy5taXNzaWxlLmFuaW1hdGUoKTtcbiAgICB0aGlzLnJlcXVlc3RJZCA9IHJlcXVlc3RBbmltYXRpb25GcmFtZSh0aGlzLmFuaW1hdGUuYmluZCh0aGlzKSBhcyBGcmFtZVJlcXVlc3RDYWxsYmFjayk7XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJnYW1lLWNvbnRhaW5lclwiPlxuICA8ZGl2IGNsYXNzPVwiYXNzZXQtdGl0bGVcIj5NaXNzaWxlPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJnYW1lLWJvYXJkLWNvbnRhaW5lclwiPlxuICAgIDxjYW52YXMgI2JvYXJkIGNsYXNzPVwiZ2FtZS1ib2FyZFwiPjwvY2FudmFzPlxuICA8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImJ1dHRvbi1jb250YWluZXJcIj5cbiAgICA8YnV0dG9uIChjbGljayk9XCJhbmltYXRlQXNzZXQoKVwiIGNsYXNzPVwiYW5pbWF0aW9uLWJ1dHRvbiBidXR0b25cIj5BbmltYXRlPC9idXR0b24+XG4gIDwvZGl2PlxuPC9kaXY+XG4iXX0=