bp-space-invaders
Version:
The BP Space Invaders Game
57 lines • 11.7 kB
JavaScript
import { Component, ElementRef, ViewChild } from '@angular/core';
import { BLOCK_SIZE, COLS, ROWS } from '../moon-defense-constants';
import { MoonDefenseClass } from '../moon-defense.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 * as i0 from "@angular/core";
import * as i1 from "../../service/game.service";
export class MoonDefenseComponent {
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.defense = new MoonDefenseClass(this.gameService, this.ctx, boundary, 0);
this.defense.move(this.defense.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
this.isAnimateOnce = true;
this.animate();
this.defense.isAnimateOnce = true;
this.defense.animate();
}
animateAsset() {
this.isAnimateOnce = !this.isAnimateOnce;
this.defense.isAnimateOnce = this.isAnimateOnce;
this.defense.isDestroyed = false;
this.defense.move(this.defense.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
cancelAnimationFrame(this.requestId);
this.animate();
this.defense.animate();
}
draw() {
this.ctx.clearRect(0, 0, this.ctx.canvas.width, this.ctx.canvas.height);
this.gameService.addOutlines(this.ctx, 1, 0.025);
}
animate() {
this.draw();
if (!this.isAnimateOnce) {
this.requestId = requestAnimationFrame(this.animate.bind(this));
}
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: MoonDefenseComponent, deps: [{ token: i1.GameService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: MoonDefenseComponent, selector: "bp-moon-defense", viewQueries: [{ propertyName: "canvas", first: true, predicate: ["board"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"game-container\">\n <div class=\"asset-title\">Moon Defense</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: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-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: MoonDefenseComponent, decorators: [{
type: Component,
args: [{ selector: 'bp-moon-defense', template: "<div class=\"game-container\">\n <div class=\"asset-title\">Moon Defense</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: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-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 }]
}] } });
//# sourceMappingURL=data:application/json;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoibW9vbi1kZWZlbnNlLmNvbXBvbmVudC5qcyIsInNvdXJjZVJvb3QiOiIiLCJzb3VyY2VzIjpbIi4uLy4uLy4uLy4uLy4uLy4uL3Byb2plY3RzL3NwYWNlLWludmFkZXJzL3NyYy9saWIvbW9vbi1kZWZlbnNlL3Rlc3QtY29tcG9uZW50L21vb24tZGVmZW5zZS5jb21wb25lbnQudHMiLCIuLi8uLi8uLi8uLi8uLi8uLi9wcm9qZWN0cy9zcGFjZS1pbnZhZGVycy9zcmMvbGliL21vb24tZGVmZW5zZS90ZXN0LWNvbXBvbmVudC9tb29uLWRlZmVuc2UuY29tcG9uZW50Lmh0bWwiXSwibmFtZXMiOltdLCJtYXBwaW5ncyI6IkFBQUEsT0FBTyxFQUFFLFNBQVMsRUFBVSxVQUFVLEVBQUUsU0FBUyxFQUFFLE1BQU0sZUFBZSxDQUFDO0FBRXpFLE9BQU8sRUFBRSxVQUFVLEVBQUUsSUFBSSxFQUFFLElBQUksRUFBRSxNQUFNLDJCQUEyQixDQUFDO0FBQ25FLE9BQU8sRUFBRSxnQkFBZ0IsRUFBRSxNQUFNLHVCQUF1QixDQUFDO0FBQ3pELE9BQU8sRUFBRSxXQUFXLEVBQUUsTUFBTSw0QkFBNEIsQ0FBQztBQUN6RCxPQUFPLEVBQUUsY0FBYyxFQUFFLE1BQU0sbUNBQW1DLENBQUM7QUFDbkUsT0FBTyxFQUFFLHNCQUFzQixFQUFFLE1BQU0sNENBQTRDLENBQUM7OztBQVdwRixNQUFNLE9BQU8sb0JBQW9CO0lBK0IvQixZQUFvQixXQUF3QjtRQUF4QixnQkFBVyxHQUFYLFdBQVcsQ0FBYTtJQUFHLENBQUM7SUFLaEQsUUFBUTtRQUNOLElBQUksQ0FBQyxHQUFHLEdBQUcsSUFBSSxDQUFDLFdBQVcsQ0FBQyxTQUFTLENBQUMsSUFBSSxDQUFDLE1BQU0sRUFBRSxJQUFJLEVBQUUsSUFBSSxFQUFFLFVBQVUsQ0FBQyxDQUFDO1FBQzNFLE1BQU0sUUFBUSxHQUFHO1lBQ2YsQ0FBQyxFQUFFLENBQUM7WUFDSixDQUFDLEVBQUUsQ0FBQztZQUNKLE1BQU0sRUFBRSxJQUFJO1lBQ1osS0FBSyxFQUFFLElBQUk7U0FDVSxDQUFDO1FBQ3hCLElBQUksQ0FBQyxPQUFPLEdBQUcsSUFBSSxnQkFBZ0IsQ0FBQyxJQUFJLENBQUMsV0FBVyxFQUFFLElBQUksQ0FBQyxHQUFHLEVBQUUsUUFBUSxFQUFFLENBQUMsQ0FBQyxDQUFDO1FBQzdFLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUUsc0JBQXNCLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztRQUNwRyxJQUFJLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQztRQUMxQixJQUFJLENBQUMsT0FBTyxFQUFFLENBQUM7UUFDZixJQUFJLENBQUMsT0FBTyxDQUFDLGFBQWEsR0FBRyxJQUFJLENBQUM7UUFDbEMsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBS0QsWUFBWTtRQUNWLElBQUksQ0FBQyxhQUFhLEdBQUcsQ0FBQyxJQUFJLENBQUMsYUFBYSxDQUFDO1FBQ3pDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxHQUFHLElBQUksQ0FBQyxhQUFhLENBQUM7UUFDaEQsSUFBSSxDQUFDLE9BQU8sQ0FBQyxXQUFXLEdBQUcsS0FBSyxDQUFDO1FBQ2pDLElBQUksQ0FBQyxPQUFPLENBQUMsSUFBSSxDQUFDLElBQUksQ0FBQyxPQUFPLENBQUMsYUFBYSxDQUFDLGNBQWMsQ0FBQyxNQUFNLEVBQUUsc0JBQXNCLENBQUMsTUFBTSxDQUFDLENBQUMsQ0FBQztRQUNwRyxvQkFBb0IsQ0FBQyxJQUFJLENBQUMsU0FBUyxDQUFDLENBQUM7UUFDckMsSUFBSSxDQUFDLE9BQU8sRUFBRSxDQUFDO1FBQ2YsSUFBSSxDQUFDLE9BQU8sQ0FBQyxPQUFPLEVBQUUsQ0FBQztJQUN6QixDQUFDO0lBS08sSUFBSTtRQUNWLElBQUksQ0FBQyxHQUFHLENBQUMsU0FBUyxDQUFDLENBQUMsRUFBRSxDQUFDLEVBQUUsSUFBSSxDQUFDLEdBQUcsQ0FBQyxNQUFNLENBQUMsS0FBSyxFQUFFLElBQUksQ0FBQyxHQUFHLENBQUMsTUFBTSxDQUFDLE1BQU0sQ0FBQyxDQUFDO1FBQ3hFLElBQUksQ0FBQyxXQUFXLENBQUMsV0FBVyxDQUFDLElBQUksQ0FBQyxHQUFHLEVBQUUsQ0FBQyxFQUFFLEtBQUssQ0FBQyxDQUFDO0lBQ25ELENBQUM7SUFLTSxPQUFPO1FBQ1osSUFBSSxDQUFDLElBQUksRUFBRSxDQUFDO1FBQ1osSUFBSSxDQUFDLElBQUksQ0FBQyxhQUFhLEVBQUU7WUFDdkIsSUFBSSxDQUFDLFNBQVMsR0FBRyxxQkFBcUIsQ0FBQyxJQUFJLENBQUMsT0FBTyxDQUFDLElBQUksQ0FBQyxJQUFJLENBQXlCLENBQUMsQ0FBQztTQUN6RjtJQUNILENBQUM7OEdBakZVLG9CQUFvQjtrR0FBcEIsb0JBQW9CLHNLQ2pCakMseVVBU0E7OzJGRFFhLG9CQUFvQjtrQkFMaEMsU0FBUzsrQkFDRSxpQkFBaUI7Z0ZBUzNCLE1BQU07c0JBREwsU0FBUzt1QkFBQyxPQUFPLEVBQUUsRUFBRSxNQUFNLEVBQUUsSUFBSSxFQUFFIiwic291cmNlc0NvbnRlbnQiOlsiaW1wb3J0IHsgQ29tcG9uZW50LCBPbkluaXQsIEVsZW1lbnRSZWYsIFZpZXdDaGlsZCB9IGZyb20gJ0Bhbmd1bGFyL2NvcmUnO1xuXG5pbXBvcnQgeyBCTE9DS19TSVpFLCBDT0xTLCBST1dTIH0gZnJvbSAnLi4vbW9vbi1kZWZlbnNlLWNvbnN0YW50cyc7XG5pbXBvcnQgeyBNb29uRGVmZW5zZUNsYXNzIH0gZnJvbSAnLi4vbW9vbi1kZWZlbnNlLmNsYXNzJztcbmltcG9ydCB7IEdhbWVTZXJ2aWNlIH0gZnJvbSAnLi4vLi4vc2VydmljZS9nYW1lLnNlcnZpY2UnO1xuaW1wb3J0IHsgQXNzZXRBbGlnbkVudW0gfSBmcm9tICcuLi8uLi9hc3NldC9lbnVtL2Fzc2V0LWFsaWduLmVudW0nO1xuaW1wb3J0IHsgQXNzZXRBbGlnblZlcnRpY2FsRW51bSB9IGZyb20gJy4uLy4uL2Fzc2V0L2VudW0vYXNzZXQtYWxpZ24tdmVydGljYWwuZW51bSc7XG5pbXBvcnQgeyBCb3VuZGFyeVNldHVwTW9kZWwgfSBmcm9tICcuLi8uLi9tb2RlbC9ib3VuZGFyeS1zZXQubW9kZWwnO1xuXG4vKipcbiAqIFRoZSBCb21iIENvbXBvbmVudFxuICovXG5AQ29tcG9uZW50KHtcbiAgc2VsZWN0b3I6ICdicC1tb29uLWRlZmVuc2UnLFxuICB0ZW1wbGF0ZVVybDogJy4vbW9vbi1kZWZlbnNlLmNvbXBvbmVudC5odG1sJyxcbiAgc3R5bGVVcmxzOiBbJy4vbW9vbi1kZWZlbnNlLmNvbXBvbmVudC5zY3NzJ11cbn0pXG5leHBvcnQgY2xhc3MgTW9vbkRlZmVuc2VDb21wb25lbnQgaW1wbGVtZW50cyBPbkluaXQge1xuICAvKipcbiAgICogVGhlIGNhbnZhc1xuICAgKi9cbiAgQFZpZXdDaGlsZCgnYm9hcmQnLCB7IHN0YXRpYzogdHJ1ZSB9KVxuICBjYW52YXM6IEVsZW1lbnRSZWY8SFRNTENhbnZhc0VsZW1lbnQ+O1xuXG4gIC8qKlxuICAgKiBDVFNcbiAgICovXG4gIHByaXZhdGUgY3R4OiBDYW52YXNSZW5kZXJpbmdDb250ZXh0MkQ7XG5cbiAgLyoqXG4gICAqIFRoZSBkZWZlbnNlXG4gICAqL1xuICBwcml2YXRlIGRlZmVuc2U6IE1vb25EZWZlbnNlQ2xhc3M7XG5cbiAgLyoqXG4gICAqIHJlcXVlc3RJXG4gICAqL1xuICBwcml2YXRlIHJlcXVlc3RJZDogbnVtYmVyO1xuXG4gIC8qKlxuICAgKiByZXF1ZXN0XG4gICAqL1xuICBwcml2YXRlIGlzQW5pbWF0ZU9uY2U6IGJvb2xlYW47XG5cbiAgLyoqXG4gICAqIFRoZSBDb25zdHJ1Y3RvclxuICAgKiBAcGFyYW0gZ2FtZVNlcnZpY2UgVGhlIEdhbWVTZXJ2aWNlIGZyb20gRElcbiAgICovXG4gIGNvbnN0cnVjdG9yKHByaXZhdGUgZ2FtZVNlcnZpY2U6IEdhbWVTZXJ2aWNlKSB7fVxuXG4gIC8qKlxuICAgKiBPbiBJbml0XG4gICAqL1xuICBuZ09uSW5pdCgpIHtcbiAgICB0aGlzLmN0eCA9IHRoaXMuZ2FtZVNlcnZpY2UuaW5pdEJvYXJkKHRoaXMuY2FudmFzLCBDT0xTLCBST1dTLCBCTE9DS19TSVpFKTtcbiAgICBjb25zdCBib3VuZGFyeSA9IHtcbiAgICAgIHg6IDAsXG4gICAgICB5OiAwLFxuICAgICAgaGVpZ2h0OiBST1dTLFxuICAgICAgd2lkdGg6IENPTFNcbiAgICB9IGFzIEJvdW5kYXJ5U2V0dXBNb2RlbDtcbiAgICB0aGlzLmRlZmVuc2UgPSBuZXcgTW9vbkRlZmVuc2VDbGFzcyh0aGlzLmdhbWVTZXJ2aWNlLCB0aGlzLmN0eCwgYm91bmRhcnksIDApO1xuICAgIHRoaXMuZGVmZW5zZS5tb3ZlKHRoaXMuZGVmZW5zZS5wb3NpdGlvbkFzc2V0KEFzc2V0QWxpZ25FbnVtLmNlbnRlciwgQXNzZXRBbGlnblZlcnRpY2FsRW51bS5taWRkbGUpKTtcbiAgICB0aGlzLmlzQW5pbWF0ZU9uY2UgPSB0cnVlO1xuICAgIHRoaXMuYW5pbWF0ZSgpO1xuICAgIHRoaXMuZGVmZW5zZS5pc0FuaW1hdGVPbmNlID0gdHJ1ZTtcbiAgICB0aGlzLmRlZmVuc2UuYW5pbWF0ZSgpO1xuICB9XG5cbiAgLyoqXG4gICAqIEFuaW1hdGUgdGhlIG9iamVjdCBvbmNlXG4gICAqL1xuICBhbmltYXRlQXNzZXQoKTogdm9pZCB7XG4gICAgdGhpcy5pc0FuaW1hdGVPbmNlID0gIXRoaXMuaXNBbmltYXRlT25jZTtcbiAgICB0aGlzLmRlZmVuc2UuaXNBbmltYXRlT25jZSA9IHRoaXMuaXNBbmltYXRlT25jZTtcbiAgICB0aGlzLmRlZmVuc2UuaXNEZXN0cm95ZWQgPSBmYWxzZTtcbiAgICB0aGlzLmRlZmVuc2UubW92ZSh0aGlzLmRlZmVuc2UucG9zaXRpb25Bc3NldChBc3NldEFsaWduRW51bS5jZW50ZXIsIEFzc2V0QWxpZ25WZXJ0aWNhbEVudW0ubWlkZGxlKSk7XG4gICAgY2FuY2VsQW5pbWF0aW9uRnJhbWUodGhpcy5yZXF1ZXN0SWQpO1xuICAgIHRoaXMuYW5pbWF0ZSgpO1xuICAgIHRoaXMuZGVmZW5zZS5hbmltYXRlKCk7XG4gIH1cblxuICAvKipcbiAgICogRHJhdyB0aGUgYm9hcmRcbiAgICovXG4gIHByaXZhdGUgZHJhdygpIHtcbiAgICB0aGlzLmN0eC5jbGVhclJlY3QoMCwgMCwgdGhpcy5jdHguY2FudmFzLndpZHRoLCB0aGlzLmN0eC5jYW52YXMuaGVpZ2h0KTtcbiAgICB0aGlzLmdhbWVTZXJ2aWNlLmFkZE91dGxpbmVzKHRoaXMuY3R4LCAxLCAwLjAyNSk7XG4gIH1cblxuICAvKipcbiAgICogQW5pbWF0ZVxuICAgKi9cbiAgcHVibGljIGFuaW1hdGUoKTogdm9pZCB7XG4gICAgdGhpcy5kcmF3KCk7XG4gICAgaWYgKCF0aGlzLmlzQW5pbWF0ZU9uY2UpIHtcbiAgICAgIHRoaXMucmVxdWVzdElkID0gcmVxdWVzdEFuaW1hdGlvbkZyYW1lKHRoaXMuYW5pbWF0ZS5iaW5kKHRoaXMpIGFzIEZyYW1lUmVxdWVzdENhbGxiYWNrKTtcbiAgICB9XG4gIH1cbn1cbiIsIjxkaXYgY2xhc3M9XCJnYW1lLWNvbnRhaW5lclwiPlxuICA8ZGl2IGNsYXNzPVwiYXNzZXQtdGl0bGVcIj5Nb29uIERlZmVuc2U8L2Rpdj5cbiAgPGRpdiBjbGFzcz1cImdhbWUtYm9hcmQtY29udGFpbmVyXCI+XG4gICAgPGNhbnZhcyAjYm9hcmQgY2xhc3M9XCJnYW1lLWJvYXJkXCI+PC9jYW52YXM+XG4gIDwvZGl2PlxuICA8ZGl2IGNsYXNzPVwiYnV0dG9uLWNvbnRhaW5lclwiPlxuICAgIDxidXR0b24gKGNsaWNrKT1cImFuaW1hdGVBc3NldCgpXCIgY2xhc3M9XCJhbmltYXRpb24tYnV0dG9uIGJ1dHRvblwiPkFuaW1hdGU8L2J1dHRvbj5cbiAgPC9kaXY+XG48L2Rpdj5cbiJdfQ==