bp-space-invaders
Version:
The BP Space Invaders Game
64 lines • 12.5 kB
JavaScript
import { Component, ElementRef, ViewChild, HostListener } from '@angular/core';
import { BLOCK_SIZE, COLS, ROWS } from '../bomb-constants';
import { BombClass } from '../bomb.class';
import { GameService } from '../../service/game.service';
import { AssetAlignEnum } from '../../asset/enum/asset-align.enum';
import { AssetAlignVerticalEnum } from '../../asset/enum/asset-align-vertical.enum';
import { ObservableTypeEnum } from '../../enum/observable-type.enum';
import * as i0 from "@angular/core";
import * as i1 from "../../service/game.service";
export class BombComponent {
constructor(gameService) {
this.gameService = gameService;
}
ngOnInit() {
this.ctx = this.gameService.initBoard(this.canvas, COLS, ROWS, BLOCK_SIZE);
const boundary = {
x: 0,
y: 0,
height: ROWS,
width: COLS
};
this.bomb = new BombClass(this.gameService, this.ctx, boundary, 0);
this.bomb.move(this.bomb.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.top));
this.isAnimateOnce = true;
this.animate();
}
animateAsset() {
this.isAnimateOnce = !this.isAnimateOnce;
this.bomb.isDestroyed = false;
this.bomb.move(this.bomb.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.top));
cancelAnimationFrame(this.requestId);
this.animate();
}
draw() {
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
this.gameService.addOutlines(this.ctx, 1, 0.025);
}
animate(now = 0) {
this.draw();
this.bomb.animate(now);
if (!this.isAnimateOnce) {
this.requestId = requestAnimationFrame(this.animate.bind(this));
}
}
keyEvent(event) {
this.gameService.emitMasterObservableEvent({
type: ObservableTypeEnum.keyDownEvent,
stringData: event.code
});
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: BombComponent, deps: [{ token: i1.GameService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: BombComponent, selector: "bp-bomb", host: { listeners: { "window:keydown": "keyEvent($event)" } }, viewQueries: [{ propertyName: "canvas", first: true, predicate: ["board"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"game-container\">\n Bomb\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 .header{display:grid;grid-template-columns:200px auto 200px;height:25px}.game-container .header .game-title{text-align:center;border:1px solid black}.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-direction:row;justify-content:center}.game-container .button-container .animation-button{background-color:#4caf50}.game-container .button-container .button{font-size:16px;padding:15px 30px;cursor:pointer;width:165px;border:1px solid black}\n"] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: BombComponent, decorators: [{
type: Component,
args: [{ selector: 'bp-bomb', template: "<div class=\"game-container\">\n Bomb\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 .header{display:grid;grid-template-columns:200px auto 200px;height:25px}.game-container .header .game-title{text-align:center;border:1px solid black}.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-direction:row;justify-content:center}.game-container .button-container .animation-button{background-color:#4caf50}.game-container .button-container .button{font-size:16px;padding:15px 30px;cursor:pointer;width:165px;border:1px solid black}\n"] }]
}], ctorParameters: () => [{ type: i1.GameService }], propDecorators: { canvas: [{
type: ViewChild,
args: ['board', { static: true }]
}], keyEvent: [{
type: HostListener,
args: ['window:keydown', ['$event']]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiYm9tYi5jb21wb25lbnQuanMiLCJzb3VyY2VSb290IjoiIiwic291cmNlcyI6WyIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zcGFjZS1pbnZhZGVycy9zcmMvbGliL2JvbWIvdGVzdC1jb21wb25lbnQvYm9tYi5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zcGFjZS1pbnZhZGVycy9zcmMvbGliL2JvbWIvdGVzdC1jb21wb25lbnQvYm9tYi5jb21wb25lbnQuaHRtbCJdLCJuYW1lcyI6W10sIm1hcHBpbmdzIjoiQUFBQSxPQUFPLEVBQUUsU0FBUyxFQUFVLFVBQVUsRUFBRSxTQUFTLEVBQUUsWUFBWSxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXZGLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxNQUFNLG1CQUFtQixDQUFDO0FBQzNELE9BQU8sRUFBRSxTQUFTLEVBQUUsTUFBTSxlQUFlLENBQUM7QUFDMUMsT0FBTyxFQUFFLFdBQVcsRUFBRSxNQUFNLDRCQUE0QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxjQUFjLEVBQUUsTUFBTSxtQ0FBbUMsQ0FBQztBQUNuRSxPQUFPLEVBQUUsc0JBQXNCLEVBQUUsTUFBTSw0Q0FBNEMsQ0FBQztBQUVwRixPQUFPLEVBQUUsa0JBQWtCLEVBQUUsTUFBTSxpQ0FBaUMsQ0FBQzs7O0FBV3JFLE1BQU0sT0FBTyxhQUFhO0lBK0J4QixZQUFvQixXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtJQUFHLENBQUM7SUFLaEQsUUFBUTtRQUNOLElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLFVBQVUsQ0FBQyxDQUFDO1FBQzNFLE1BQU0sUUFBUSxHQUFHO1lBQ2YsQ0FBQyxFQUFFLENBQUM7WUFDSixDQUFDLEVBQUUsQ0FBQztZQUNKLE1BQU0sRUFBRSxJQUFJO1lBQ1osS0FBSyxFQUFFLElBQUk7U0FDVSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxJQUFJLEdBQUcsSUFBSSxTQUFTLENBQUMsSUFBSSxDQUFDLFdBQVcsRUFBRSxJQUFJLENBQUMsR0FBRyxFQUFFLFFBQVEsRUFBRSxDQUFDLENBQUMsQ0FBQztRQUNuRSxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsQ0FBQyxjQUFjLENBQUMsTUFBTSxFQUFFLHNCQUFzQixDQUFDLEdBQUcsQ0FBQyxDQUFDLENBQUM7UUFDM0YsSUFBSSxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDMUIsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFLRCxZQUFZO1FBQ1YsSUFBSSxDQUFDLGFBQWEsR0FBRyxDQUFDLElBQUksQ0FBQyxhQUFhLENBQUM7UUFDekMsSUFBSSxDQUFDLElBQUksQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQzlCLElBQUksQ0FBQyxJQUFJLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUUsc0JBQXNCLENBQUMsR0FBRyxDQUFDLENBQUMsQ0FBQztRQUMzRixvQkFBb0IsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO0lBQ2pCLENBQUM7SUFLTyxJQUFJO1FBQ1YsSUFBSSxDQUFDLEdBQUcsQ0FBQyxTQUFTLENBQUMsQ0FBQyxFQUFFLENBQUMsRUFBRSxJQUFJLENBQUMsR0FBRyxDQUFDLE1BQU0sQ0FBQyxLQUFLLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsTUFBTSxDQUFDLENBQUM7UUFDeEUsSUFBSSxDQUFDLFdBQVcsQ0FBQyxXQUFXLENBQUMsSUFBSSxDQUFDLEdBQUcsRUFBRSxDQUFDLEVBQUUsS0FBSyxDQUFDLENBQUM7SUFDbkQsQ0FBQztJQU1NLE9BQU8sQ0FBQyxHQUFHLEdBQUcsQ0FBQztRQUNwQixJQUFJLENBQUMsSUFBSSxFQUFFLENBQUM7UUFDWixJQUFJLENBQUMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxHQUFHLENBQUMsQ0FBQztRQUN2QixJQUFJLENBQUMsSUFBSSxDQUFDLGFBQWEsRUFBRTtZQUN2QixJQUFJLENBQUMsU0FBUyxHQUFHLHFCQUFxQixDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBeUIsQ0FBQyxDQUFDO1NBQ3pGO0lBQ0gsQ0FBQztJQU9ELFFBQVEsQ0FBQyxLQUFvQjtRQUMzQixJQUFJLENBQUMsV0FBVyxDQUFDLHlCQUF5QixDQUFDO1lBQ3pDLElBQUksRUFBRSxrQkFBa0IsQ0FBQyxZQUFZO1lBQ3JDLFVBQVUsRUFBRSxLQUFLLENBQUMsSUFBSTtTQUNKLENBQUMsQ0FBQztJQUN4QixDQUFDOzhHQTNGVSxhQUFhO2tHQUFiLGFBQWEsNk5DbkIxQixnU0FTQTs7MkZEVWEsYUFBYTtrQkFMekIsU0FBUzsrQkFDRSxTQUFTO2dGQVNuQixNQUFNO3NCQURMLFNBQVM7dUJBQUMsT0FBTyxFQUFFLEVBQUUsTUFBTSxFQUFFLElBQUksRUFBRTtnQkFrRnBDLFFBQVE7c0JBRFAsWUFBWTt1QkFBQyxnQkFBZ0IsRUFBRSxDQUFDLFFBQVEsQ0FBQyIsInNvdXJjZXNDb250ZW50IjpbImltcG9ydCB7IENvbXBvbmVudCwgT25Jbml0LCBFbGVtZW50UmVmLCBWaWV3Q2hpbGQsIEhvc3RMaXN0ZW5lciB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBCTE9DS19TSVpFLCBDT0xTLCBST1dTIH0gZnJvbSAnLi4vYm9tYi1jb25zdGFudHMnO1xuaW1wb3J0IHsgQm9tYkNsYXNzIH0gZnJvbSAnLi4vYm9tYi5jbGFzcyc7XG5pbXBvcnQgeyBHYW1lU2VydmljZSB9IGZyb20gJy4uLy4uL3NlcnZpY2UvZ2FtZS5zZXJ2aWNlJztcbmltcG9ydCB7IEFzc2V0QWxpZ25FbnVtIH0gZnJvbSAnLi4vLi4vYXNzZXQvZW51bS9hc3NldC1hbGlnbi5lbnVtJztcbmltcG9ydCB7IEFzc2V0QWxpZ25WZXJ0aWNhbEVudW0gfSBmcm9tICcuLi8uLi9hc3NldC9lbnVtL2Fzc2V0LWFsaWduLXZlcnRpY2FsLmVudW0nO1xuaW1wb3J0IHsgT2JzZXJ2YWJsZU1vZGVsIH0gZnJvbSAnLi4vLi4vbW9kZWwvb2JzZXJ2YWJsZS5tb2RlbCc7XG5pbXBvcnQgeyBPYnNlcnZhYmxlVHlwZUVudW0gfSBmcm9tICcuLi8uLi9lbnVtL29ic2VydmFibGUtdHlwZS5lbnVtJztcbmltcG9ydCB7IEJvdW5kYXJ5U2V0dXBNb2RlbCB9IGZyb20gJy4uLy4uL21vZGVsL2JvdW5kYXJ5LXNldC5tb2RlbCc7XG5cbi8qKlxuICogVGhlIEJvbWIgQ29tcG9uZW50XG4gKi9cbkBDb21wb25lbnQoe1xuICBzZWxlY3RvcjogJ2JwLWJvbWInLFxuICB0ZW1wbGF0ZVVybDogJy4vYm9tYi5jb21wb25lbnQuaHRtbCcsXG4gIHN0eWxlVXJsczogWycuL2JvbWIuY29tcG9uZW50LnNjc3MnXVxufSlcbmV4cG9ydCBjbGFzcyBCb21iQ29tcG9uZW50IGltcGxlbWVudHMgT25Jbml0IHtcbiAgLyoqXG4gICAqIFRoZSBjYW52YXNcbiAgICovXG4gIEBWaWV3Q2hpbGQoJ2JvYXJkJywgeyBzdGF0aWM6IHRydWUgfSlcbiAgY2FudmFzOiBFbGVtZW50UmVmPEhUTUxDYW52YXNFbGVtZW50PjtcblxuICAvKipcbiAgICogQ1RTXG4gICAqL1xuICBwcml2YXRlIGN0eDogQ2FudmFzUmVuZGVyaW5nQ29udGV4dDJEO1xuXG4gIC8qKlxuICAgKiBUaGUgYm9tYlxuICAgKi9cbiAgcHJpdmF0ZSBib21iOiBCb21iQ2xhc3M7XG5cbiAgLyoqXG4gICAqIHJlcXVlc3RJXG4gICAqL1xuICBwcml2YXRlIHJlcXVlc3RJZDogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiByZXF1ZXN0XG4gICAqL1xuICBwcml2YXRlIGlzQW5pbWF0ZU9uY2U6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFRoZSBDb25zdHJ1Y3RvclxuICAgKiBAcGFyYW0gZ2FtZVNlcnZpY2UgVGhlIEdhbWVTZXJ2aWNlIGZyb20gRElcbiAgICovXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZ2FtZVNlcnZpY2U6IEdhbWVTZXJ2aWNlKSB7fVxuXG4gIC8qKlxuICAgKiBPbiBJbml0XG4gICAqL1xuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmN0eCA9IHRoaXMuZ2FtZVNlcnZpY2UuaW5pdEJvYXJkKHRoaXMuY2FudmFzLCBDT0xTLCBST1dTLCBCTE9DS19TSVpFKTtcbiAgICBjb25zdCBib3VuZGFyeSA9IHtcbiAgICAgIHg6IDAsXG4gICAgICB5OiAwLFxuICAgICAgaGVpZ2h0OiBST1dTLFxuICAgICAgd2lkdGg6IENPTFNcbiAgICB9IGFzIEJvdW5kYXJ5U2V0dXBNb2RlbDtcbiAgICB0aGlzLmJvbWIgPSBuZXcgQm9tYkNsYXNzKHRoaXMuZ2FtZVNlcnZpY2UsIHRoaXMuY3R4LCBib3VuZGFyeSwgMCk7XG4gICAgdGhpcy5ib21iLm1vdmUodGhpcy5ib21iLnBvc2l0aW9uQXNzZXQoQXNzZXRBbGlnbkVudW0uY2VudGVyLCBBc3NldEFsaWduVmVydGljYWxFbnVtLnRvcCkpO1xuICAgIHRoaXMuaXNBbmltYXRlT25jZSA9IHRydWU7XG4gICAgdGhpcy5hbmltYXRlKCk7XG4gIH1cblxuICAvKipcbiAgICogQW5pbWF0ZSB0aGUgb2JqZWN0IG9uY2VcbiAgICovXG4gIGFuaW1hdGVBc3NldCgpOiB2b2lkIHtcbiAgICB0aGlzLmlzQW5pbWF0ZU9uY2UgPSAhdGhpcy5pc0FuaW1hdGVPbmNlO1xuICAgIHRoaXMuYm9tYi5pc0Rlc3Ryb3llZCA9IGZhbHNlO1xuICAgIHRoaXMuYm9tYi5tb3ZlKHRoaXMuYm9tYi5wb3NpdGlvbkFzc2V0KEFzc2V0QWxpZ25FbnVtLmNlbnRlciwgQXNzZXRBbGlnblZlcnRpY2FsRW51bS50b3ApKTtcbiAgICBjYW5jZWxBbmltYXRpb25GcmFtZSh0aGlzLnJlcXVlc3RJZCk7XG4gICAgdGhpcy5hbmltYXRlKCk7XG4gIH1cblxuICAvKipcbiAgICogRHJhdyB0aGUgYm9hcmRcbiAgICovXG4gIHByaXZhdGUgZHJhdygpIHtcbiAgICB0aGlzLmN0eC5jbGVhclJlY3QoMCwgMCwgdGhpcy5jdHguY2FudmFzLndpZHRoLCB0aGlzLmN0eC5jYW52YXMuaGVpZ2h0KTtcbiAgICB0aGlzLmdhbWVTZXJ2aWNlLmFkZE91dGxpbmVzKHRoaXMuY3R4LCAxLCAwLjAyNSk7XG4gIH1cblxuICAvKipcbiAgICogQW5pbWF0ZVxuICAgKiBAcGFyYW0gbm93IHRoZSBjdXJyZW50IHRpbWVcbiAgICovXG4gIHB1YmxpYyBhbmltYXRlKG5vdyA9IDApOiB2b2lkIHtcbiAgICB0aGlzLmRyYXcoKTtcbiAgICB0aGlzLmJvbWIuYW5pbWF0ZShub3cpO1xuICAgIGlmICghdGhpcy5pc0FuaW1hdGVPbmNlKSB7XG4gICAgICB0aGlzLnJlcXVlc3RJZCA9IHJlcXVlc3RBbmltYXRpb25GcmFtZSh0aGlzLmFuaW1hdGUuYmluZCh0aGlzKSBhcyBGcmFtZVJlcXVlc3RDYWxsYmFjayk7XG4gICAgfVxuICB9XG5cbiAgLyoqXG4gICAqIFRoZSBrZXlFdmVudCBsaXN0ZW5lclxuICAgKiBAcGFyYW0gZXZlbnQgdGhlIEtleWJvYXJkIGV2ZW50XG4gICAqL1xuICBASG9zdExpc3RlbmVyKCd3aW5kb3c6a2V5ZG93bicsIFsnJGV2ZW50J10pXG4gIGtleUV2ZW50KGV2ZW50OiBLZXlib2FyZEV2ZW50KSB7XG4gICAgdGhpcy5nYW1lU2VydmljZS5lbWl0TWFzdGVyT2JzZXJ2YWJsZUV2ZW50KHtcbiAgICAgIHR5cGU6IE9ic2VydmFibGVUeXBlRW51bS5rZXlEb3duRXZlbnQsXG4gICAgICBzdHJpbmdEYXRhOiBldmVudC5jb2RlXG4gICAgfSBhcyBPYnNlcnZhYmxlTW9kZWwpO1xuICB9XG59XG4iLCI8ZGl2IGNsYXNzPVwiZ2FtZS1jb250YWluZXJcIj5cbiAgQm9tYlxuICA8ZGl2IGNsYXNzPVwiZ2FtZS1ib2FyZC1jb250YWluZXJcIj5cbiAgICA8Y2FudmFzICNib2FyZCBjbGFzcz1cImdhbWUtYm9hcmRcIj48L2NhbnZhcz5cbiAgPC9kaXY+XG4gIDxkaXYgY2xhc3M9XCJidXR0b24tY29udGFpbmVyXCI+XG4gICAgPGJ1dHRvbiAoY2xpY2spPVwiYW5pbWF0ZUFzc2V0KClcIiBjbGFzcz1cImFuaW1hdGlvbi1idXR0b24gYnV0dG9uXCI+QW5pbWF0ZTwvYnV0dG9uPlxuICA8L2Rpdj5cbjwvZGl2PlxuIl19