bp-space-invaders
Version:
The BP Space Invaders Game
1,119 lines (1,091 loc) • 177 kB
JavaScript
import * as i0 from '@angular/core';
import { Injectable, Component, ViewChild, HostListener, Inject, NgModule } from '@angular/core';
import * as i1 from 'ngx-cookie-service';
import { CookieService } from 'ngx-cookie-service';
import * as i3 from '@angular/common';
import { CommonModule } from '@angular/common';
import { Subject } from 'rxjs';
class GameCookieService {
constructor(cookieService) {
this.cookieService = cookieService;
}
getCookie(cookieName) {
return this.cookieService.get(cookieName);
}
getGameData() {
const cookie = this.getCookie('bp-space-invaders');
return cookie ? JSON.parse(cookie) : { highScore: 0 };
}
setGameData(data) {
this.cookieService.set('bp-space-invaders', JSON.stringify(data));
}
getDebugData() {
const cookie = this.getCookie('bp-space-invaders-debug');
return cookie ? JSON.parse(cookie)['assetName'] : '';
}
getSecondaryDebugData() {
const cookie = this.getCookie('bp-space-invaders-debug');
return cookie ? JSON.parse(cookie)['secondaryAssetName'] : '';
}
setDebugData(debugData) {
const cookie = this.getCookie('bp-space-invaders-debug');
const existingCookie = (cookie ? JSON.parse(cookie) : {});
existingCookie.assetName = debugData.assetName ? debugData.assetName : existingCookie.assetName;
existingCookie.secondaryAssetName = debugData.secondaryAssetName
? debugData.secondaryAssetName
: existingCookie.secondaryAssetName;
this.cookieService.set('bp-space-invaders-debug', JSON.stringify(existingCookie));
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: GameCookieService, deps: [{ token: i1.CookieService }], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: GameCookieService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: GameCookieService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}], ctorParameters: () => [{ type: i1.CookieService }] });
var AssetAlignEnum;
(function (AssetAlignEnum) {
AssetAlignEnum["left"] = "left";
AssetAlignEnum["leftThird"] = "leftThird";
AssetAlignEnum["leftFourth"] = "leftFourth";
AssetAlignEnum["right"] = "right";
AssetAlignEnum["rightThird"] = "rightThird";
AssetAlignEnum["rightFourth"] = "rightFourth";
AssetAlignEnum["center"] = "center";
})(AssetAlignEnum || (AssetAlignEnum = {}));
var AssetAlignVerticalEnum;
(function (AssetAlignVerticalEnum) {
AssetAlignVerticalEnum["top"] = "top";
AssetAlignVerticalEnum["bottom"] = "bottom";
AssetAlignVerticalEnum["middle"] = "middle";
})(AssetAlignVerticalEnum || (AssetAlignVerticalEnum = {}));
const BLOCK_SIZE$6 = 3;
const COLS$6 = 260;
const ROWS$6 = 240;
const ALIEN_ROWS = 6;
const ALIEN_COLUMNS = 6;
const MOON_HEIGHT = 10;
const COLORS$6 = [
'rgba(34, 65, 4)',
'rgba(200, 95, 36)',
'rgba(8, 136, 23)'
];
class LEVELHEIGHT {
static { this[0] = 20; }
static { this[1] = 30; }
static { this[2] = 40; }
static { this[3] = 50; }
static { this[4] = 60; }
static { this[5] = 70; }
static { this[6] = 80; }
static { this[7] = 90; }
}
class LEVELSPEED {
static { this[0] = 700; }
static { this[1] = 500; }
static { this[2] = 350; }
static { this[3] = 250; }
static { this[4] = 150; }
static { this[5] = 100; }
}
class GameService {
constructor() {
this.masterSubject$ = new Subject();
}
valid(asset, boundary) {
return asset.shape.every((row, dy) => {
return row.every((value, dx) => {
const x = asset.x + dx;
const y = asset.y + dy;
return (this.isEmpty(value) ||
(this.insideWalls(x, boundary) &&
this.aboveFloor(y, boundary.floor) &&
this.belowCeiling(y, boundary.ceiling)));
});
});
}
isEmpty(value) {
return value === 0;
}
insideWalls(x, boundary) {
return x >= boundary.left && x <= boundary.right;
}
belowCeiling(y, boundaryTop) {
return y >= boundaryTop;
}
aboveFloor(y, boundaryBottom) {
return y <= boundaryBottom;
}
getBoundary(boundarySetup) {
return {
left: boundarySetup.x,
right: boundarySetup.width,
ceiling: boundarySetup.y,
floor: boundarySetup.height
};
}
isHit(asset, damageAsset) {
if (asset.x <= damageAsset.x &&
damageAsset.x <= asset.x + asset.shape[0].length &&
asset.y <= damageAsset.y &&
damageAsset.y <= asset.y + asset.shape.length) {
const startY = damageAsset.y;
let maxY = startY + damageAsset.shape.length;
if (maxY > asset.y + asset.shape.length) {
maxY = asset.y + asset.shape.length;
}
for (let y = startY; y < maxY; y++) {
for (let x = damageAsset.x; x < damageAsset.x + damageAsset.shape[y - damageAsset.y].length; x++) {
const assetY = Math.round(Math.abs(y - asset.y));
const assetX = Math.round(Math.abs(x - asset.x));
const damageAssetY = Math.round(Math.abs(y - damageAsset.y));
const damageAssetX = Math.round(Math.abs(x - damageAsset.x));
if (asset.shape[assetY][assetX] > 0 && damageAsset.shape[damageAssetY][damageAssetX] > 0) {
return true;
}
}
}
}
return false;
}
addOutlines(ctx, offset, width) {
ctx.fillStyle = 'grey';
let lastIndex = 0;
for (let index = 0; index < ctx.canvas.width; index += offset) {
ctx.fillRect(index, 0, width, ctx.canvas.height);
lastIndex = index;
}
ctx.fillRect(lastIndex + 1, 0, width, ctx.canvas.height);
for (let index = 0; index < ctx.canvas.height; index += offset) {
ctx.fillRect(0, index, ctx.canvas.width, width);
lastIndex = index;
}
ctx.fillRect(0, lastIndex + 1, ctx.canvas.width, width);
ctx.fillStyle = 'red';
ctx.fillRect(ctx.canvas.width / (BLOCK_SIZE$6 * 2), 0, width, ctx.canvas.height);
ctx.fillRect(0, ctx.canvas.height / (BLOCK_SIZE$6 * 2), ctx.canvas.width, width);
}
initBoard(canvas, columns, rows, blockSize) {
const ctx = canvas.nativeElement.getContext('2d');
this.board = {
x: 0,
y: 0,
height: rows,
width: columns
};
ctx.canvas.width = columns * blockSize + 1;
ctx.canvas.height = rows * blockSize + 1;
ctx.scale(blockSize, blockSize);
return ctx;
}
getGameboard() {
return this.board;
}
getMasterObservable() {
return this.masterSubject$;
}
emitMasterObservableEvent(data) {
this.masterSubject$.next(data);
}
positionAsset(asset, alignPosition, justifyPosition) {
let x = 0;
let y = 0;
if (alignPosition === AssetAlignEnum.center) {
x = (this.board.width - asset.getAssetWidth()) / 2;
}
else if (alignPosition === AssetAlignEnum.leftThird) {
x = this.board.width / 3 - asset.getAssetWidth() / 2;
}
else if (alignPosition === AssetAlignEnum.leftFourth) {
x = this.board.width / 4 - asset.getAssetWidth() / 2;
}
else if (alignPosition === AssetAlignEnum.rightThird) {
x = (this.board.width * 2) / 3 - asset.getAssetWidth() / 2;
}
else if (alignPosition === AssetAlignEnum.rightFourth) {
x = (this.board.width * 3) / 4 - asset.getAssetWidth() / 2;
}
else if (alignPosition === AssetAlignEnum.right) {
x = this.board.width - asset.getAssetWidth();
}
if (justifyPosition === AssetAlignVerticalEnum.bottom) {
y = this.board.height - asset.getAssetHeight();
}
else if (justifyPosition === AssetAlignVerticalEnum.middle) {
y = (this.board.height - asset.getAssetHeight()) / 2;
}
return {
x: Math.round(x),
y: Math.round(y)
};
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: GameService, deps: [], target: i0.ɵɵFactoryTarget.Injectable }); }
static { this.ɵprov = i0.ɵɵngDeclareInjectable({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: GameService, providedIn: 'root' }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: GameService, decorators: [{
type: Injectable,
args: [{
providedIn: 'root'
}]
}] });
const ASSET_ANIMATION_1$e = [
[0, 0, 0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0, 0, 0],
[0, 0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0, 0],
[0, 0, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 0, 0],
[0, 2, 2, 0, 0, 2, 0, 0, 2, 2, 0, 0, 2, 0, 0, 2, 2, 0],
[2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2, 2],
[0, 0, 2, 2, 2, 0, 0, 0, 2, 2, 0, 0, 0, 2, 2, 2, 0, 0],
[0, 0, 0, 2, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 2, 0, 0, 0]
];
const ASSET_ANIMATION$e = [ASSET_ANIMATION_1$e];
const COLS$5 = 31;
const ROWS$5 = 31;
const BLOCK_SIZE$5 = 25;
const COLORS$5 = [
'none',
'rgba(200, 95, 36)',
'rgba(255, 0, 0)',
'rgba(122, 122, 122)',
'rgba(163, 46, 132)'
];
let KEY$4 = class KEY {
static { this.DOWN = 'ArrowDown'; }
static { this.LEFT = 'ArrowLeft'; }
static { this.RIGHT = 'ArrowRight'; }
};
const DESTRUCTION_ANIMATION_1$2 = [
[2, 0, 0, 0, 0, 0, 0, 0, 0, 2],
[0, 2, 0, 0, 0, 0, 0, 0, 2, 0],
[0, 0, 2, 3, 2, 0, 2, 0, 0, 0],
[0, 0, 2, 0, 2, 2, 3, 2, 0, 0],
[0, 0, 0, 2, 3, 2, 2, 0, 0, 0],
[0, 0, 2, 3, 2, 2, 0, 2, 0, 0],
[0, 0, 2, 0, 2, 3, 2, 2, 0, 0],
[0, 2, 0, 0, 0, 0, 0, 0, 2, 0],
[2, 0, 0, 0, 0, 0, 0, 0, 0, 2]
];
const DESTRUCTION_ANIMATION_2$2 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 2, 0, 0, 0, 0, 2, 0, 0],
[0, 0, 0, 3, 0, 2, 3, 0, 0, 0],
[0, 0, 0, 0, 3, 0, 0, 0, 0, 0],
[0, 0, 0, 3, 0, 2, 2, 0, 0, 0],
[0, 0, 2, 0, 0, 0, 0, 2, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const DESTRUCTION_ANIMATION_3$2 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 3, 0, 2, 0, 0, 0, 0],
[0, 0, 0, 0, 3, 0, 0, 0, 0, 0],
[0, 0, 0, 2, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const DESTRUCTION_ANIMATION$2 = [DESTRUCTION_ANIMATION_1$2, DESTRUCTION_ANIMATION_2$2, DESTRUCTION_ANIMATION_3$2];
var ObservableTypeEnum;
(function (ObservableTypeEnum) {
ObservableTypeEnum["alienBossDestroyed"] = "alienBossDestroyed";
ObservableTypeEnum["alienCreepLeftBoundary"] = "alienCreepLeftBoundary";
ObservableTypeEnum["alienCreepRightBoundary"] = "alienCreepRightBoundary";
ObservableTypeEnum["alienDestroyed"] = "alienDestroyed";
ObservableTypeEnum["alienDrop"] = "alienDrop";
ObservableTypeEnum["bombDropped"] = "bombDropped";
ObservableTypeEnum["displayScore"] = "displayScore";
ObservableTypeEnum["gameOver"] = "gameOver";
ObservableTypeEnum["gamePaused"] = "gamePaused";
ObservableTypeEnum["gameStarted"] = "gameStarted";
ObservableTypeEnum["keyDownEvent"] = "keyDownEvent";
ObservableTypeEnum["keyUpEvent"] = "keyUpEvent";
ObservableTypeEnum["missileShot"] = "missileShot";
ObservableTypeEnum["moonDefenseDestroyed"] = "moonDefenseDestroyed";
ObservableTypeEnum["spaceshipDestroyed"] = "spaceshipDestroyed";
})(ObservableTypeEnum || (ObservableTypeEnum = {}));
class AssetClass {
constructor(gameService, ctx, boundarySetup, uid) {
this.gameService = gameService;
this.ctx = ctx;
this.boundarySetup = boundarySetup;
this.uid = uid;
this.x = 0;
this.y = 0;
this.isAnimateOnce = false;
this.isDestroyed = false;
this.isGameOver = false;
this.isGamePaused = false;
this.spawn();
this.boundary = this.gameService.getBoundary(boundarySetup);
this.init();
}
init() {
this.gameService.getMasterObservable().subscribe((result) => {
if (result.type === ObservableTypeEnum.keyDownEvent || result.type === ObservableTypeEnum.keyUpEvent) {
this.processKeyStroke(result);
}
else if (result.type === ObservableTypeEnum.gameOver) {
this.isGameOver = result.booleanData;
}
else if (result.type === ObservableTypeEnum.gamePaused) {
this.isGamePaused = result.booleanData;
}
});
}
getAssetHeight() {
return this.shape.length;
}
getAssetWidth() {
return this.shape[0].length;
}
positionAsset(alignPosition, justifyPosition) {
let x = 0;
let y = 0;
if (alignPosition === AssetAlignEnum.center) {
x = (this.boundary.right - this.getAssetWidth()) / 2;
}
else if (alignPosition === AssetAlignEnum.leftThird) {
x = this.boundary.right / 3 - this.getAssetWidth() / 2;
}
else if (alignPosition === AssetAlignEnum.leftFourth) {
x = this.boundary.right / 4 - this.getAssetWidth() / 2;
}
else if (alignPosition === AssetAlignEnum.rightThird) {
x = (this.boundary.right * 2) / 3 - this.getAssetWidth() / 2;
}
else if (alignPosition === AssetAlignEnum.rightFourth) {
x = (this.boundary.right * 3) / 4 - this.getAssetWidth() / 2;
}
else if (alignPosition === AssetAlignEnum.right) {
x = this.boundary.right - this.getAssetWidth();
}
if (justifyPosition === AssetAlignVerticalEnum.bottom) {
y = this.boundary.floor - this.getAssetHeight();
}
else if (justifyPosition === AssetAlignVerticalEnum.middle) {
y = (this.boundary.floor - this.getAssetHeight()) / 2;
}
return {
x: Math.round(x),
y: Math.round(y)
};
}
processKeyStroke(event) { }
spawn() {
if (!(this.assetAnimation && this.assetAnimation.length > 0)) {
throw new Error('You must have an asset array.');
}
if (!this.engineAnimation) {
throw new Error('You must have an engine array.');
}
this.engineXOffset = 0;
this.engineYOffset = this.assetAnimation.length;
this.assetTimer = { start: 0, elapsed: 0 };
this.destructionTimer = { start: 0, elapsed: 0 };
this.engineTimer = { start: 0, elapsed: 0 };
this.animationCounter = 0;
this.engineAnimationCounter = 0;
this.destructionAnimationCounter = 0;
this.assetTimer.start = performance.now();
this.destructionTimer.start = performance.now();
this.engineTimer.start = performance.now();
this.restore();
}
restore() {
this.shape = JSON.parse(JSON.stringify(this.assetAnimation.concat(JSON.parse(JSON.stringify(this.engineAnimation)))));
}
move(asset) {
this.x = Math.round(asset.x);
this.y = Math.round(asset.y);
}
stopAnimation() {
if (this.isDestroyed || this.isGameOver || this.isGamePaused || this.isAnimateOnce) {
cancelAnimationFrame(this.requestId);
return true;
}
return false;
}
}
class AlienClass extends AssetClass {
constructor(gameService, ctx, boundarySetup, guid, assetPoints) {
super(gameService, ctx, boundarySetup, guid);
this.assetPoints = assetPoints;
this.bombTimer = {
start: performance.now(),
elapsed: 0
};
}
spawn() {
this.assetAnimation = this.assetAnimations[0];
this.engineAnimation = [];
this.destructionAnimations = DESTRUCTION_ANIMATION$2;
this.destructionAnimation = this.destructionAnimations[0];
super.spawn();
}
draw() {
this.ctx.save();
this.ctx.translate(this.x, this.y);
this.drawAlien();
this.ctx.restore();
}
drawAlien() {
this.assetAnimation.forEach((row, y) => {
row.forEach((value, x) => {
if (value > 0) {
this.ctx.fillStyle = COLORS$5[value];
this.ctx.fillRect(x, y, 1, 1);
}
});
});
}
isHit(missileAsset) {
if (!this.isDestroyed) {
this.isDestroyed = this.gameService.isHit({
x: this.x,
y: this.y,
shape: this.shape
}, missileAsset);
const alienType = this.isAlienAsset ? ObservableTypeEnum.alienDestroyed : ObservableTypeEnum.alienBossDestroyed;
if (this.isDestroyed) {
this.gameService.emitMasterObservableEvent({
type: alienType,
numberData: this.uid,
pointData: this.points
});
missileAsset.isDestroyed = true;
}
}
}
creep(asset) {
asset.shape = this.shape;
return this.gameService.valid(asset, this.boundary);
}
randomizeDropBomb() {
if (this.canFireWeapon) {
const randomBombNumber = Math.floor(Math.random() * 10 + 1);
return randomBombNumber >= 4 && randomBombNumber <= 6;
}
return false;
}
drawAlienDestruction() {
this.destructionAnimation.forEach((row, y) => {
row.forEach((value, x) => {
if (value > 0) {
this.ctx.fillStyle = COLORS$5[value];
this.ctx.fillRect(this.x + x, this.y + y, 1, 1);
}
});
});
}
destructionAnimate(now = 0) {
this.destructionTimer.elapsed = now - this.destructionTimer.start;
if (this.destructionAnimationCounter === this.destructionAnimations.length) {
cancelAnimationFrame(this.destructionRequestId);
return;
}
if (this.destructionTimer.elapsed > 50) {
this.destructionTimer.start = now;
this.destructionAnimation =
this.destructionAnimations[this.destructionAnimationCounter++ % this.destructionAnimations.length];
}
this.drawAlienDestruction();
this.destructionRequestId = requestAnimationFrame(this.destructionAnimate.bind(this));
}
animate(now = 0) {
this.assetTimer.elapsed = now - this.assetTimer.start;
this.bombTimer.elapsed = now - this.bombTimer.start;
if (this.isDestroyed) {
this.destructionAnimate();
return;
}
this.destructionAnimationCounter = 0;
if (this.assetTimer.elapsed > 900) {
this.assetTimer.start = now;
this.assetAnimation = this.assetAnimations[this.animationCounter++ % this.assetAnimations.length];
}
if (this.bombTimer.elapsed > 1000) {
this.bombTimer.start = now;
if (this.randomizeDropBomb()) {
this.gameService.emitMasterObservableEvent({
type: ObservableTypeEnum.bombDropped,
assetCoordinateData: {
x: this.x + this.getAssetWidth() / 2 - 1,
y: this.y + this.getAssetHeight() - 5
}
});
}
}
this.draw();
}
get points() {
return this.assetPoints;
}
isAlien() {
return this.isAlienAsset;
}
}
class AlienBossClass extends AlienClass {
constructor(gameService, ctx, boundarySetup, guid, points) {
super(gameService, ctx, boundarySetup, guid, points);
this.moves = {
[KEY$4.LEFT]: (asset) => ({ ...asset, x: asset.x - 5 }),
[KEY$4.RIGHT]: (asset) => ({ ...asset, x: asset.x + 5 })
};
this.directionLeft = true;
this.isAlienAsset = false;
}
determineBossDirection() {
this.directionLeft = Math.floor(Math.random() * 10) + 1 > 5;
}
positionAlienBoss() {
this.determineBossDirection();
const direction = this.directionLeft ? AssetAlignEnum.right : AssetAlignEnum.left;
const asset = this.positionAsset(direction, AssetAlignVerticalEnum.top);
asset.y = this.y;
this.move(asset);
this.isDestroyed = false;
}
animate(now = 0) {
this.assetTimer.elapsed = now - this.assetTimer.start;
if (this.isDestroyed) {
this.destructionAnimate();
return;
}
if (this.isGameOver) {
this.isDestroyed = true;
return;
}
this.destructionAnimationCounter = 0;
if (this.assetTimer.elapsed > 200) {
this.assetTimer.start = now;
this.assetAnimation = this.assetAnimations[this.animationCounter++ % this.assetAnimations.length];
const asset = this.directionLeft ? this.moves['ArrowLeft'](this) : this.moves['ArrowRight'](this);
if (this.gameService.valid(asset, this.boundary)) {
this.move(asset);
}
else {
this.isDestroyed = true;
this.gameService.emitMasterObservableEvent({
type: ObservableTypeEnum.alienBossDestroyed,
booleanData: true,
pointData: 0
});
}
}
this.draw();
}
}
class AlienBoss1Class extends AlienBossClass {
constructor(gameService, ctx, boundarySetup, guid) {
super(gameService, ctx, boundarySetup, guid, 120);
}
spawn() {
this.assetAnimations = ASSET_ANIMATION$e;
super.spawn();
}
}
const ASSET_ANIMATION_1$d = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0],
[0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0],
[0, 0, 0, 4, 4, 0, 0, 4, 4, 0, 0, 4, 4, 0, 0, 4, 4, 0, 0, 0],
[0, 0, 0, 4, 4, 0, 0, 4, 4, 0, 0, 4, 4, 0, 0, 4, 4, 0, 0, 0],
[0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0],
[0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0],
[0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 4, 4, 4, 4, 4, 4, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATION$d = [ASSET_ANIMATION_1$d];
class AlienBoss2Class extends AlienBossClass {
constructor(gameService, ctx, boundarySetup, guid) {
super(gameService, ctx, boundarySetup, guid, 120);
}
spawn() {
this.assetAnimations = ASSET_ANIMATION$d;
super.spawn();
}
}
class AlienBossComponent {
constructor(gameService, gameCookieService) {
this.gameService = gameService;
this.gameCookieService = gameCookieService;
this.isAnimateOnce = true;
this.assets = [
{
key: 'alienBoss',
name: 'Boss'
},
{
key: 'alienBoss2',
name: 'Boss 2'
}
];
}
ngOnInit() {
const columns = 20;
const rows = 20;
this.ctx = this.gameService.initBoard(this.canvas, rows, columns, 25);
this.addAlienBosses({
x: 0,
y: 0,
height: rows,
width: columns
});
this.toggleAssets(this.gameCookieService.getSecondaryDebugData());
this.animate();
}
addAlienBosses(boundary) {
this.alienBosses = [];
const boss = new AlienBoss1Class(this.gameService, this.ctx, boundary, 1);
boss.move(boss.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
boss.isAnimateOnce = true;
this.alienBosses.push(boss);
const boss2 = new AlienBoss2Class(this.gameService, this.ctx, boundary, 1);
boss2.move(boss2.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
boss2.isAnimateOnce = true;
this.alienBosses.push(boss2);
this.alienBoss = this.alienBosses[1];
this.alienBoss.isAnimateOnce = true;
this.alienBoss.isDestroyed = false;
}
animateAsset() {
this.isAnimateOnce = !this.isAnimateOnce;
this.alienBoss.isDestroyed = false;
this.alienBoss.move(this.alienBoss.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
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() {
this.draw();
this.alienBoss.animate();
if (!this.isAnimateOnce) {
this.requestId = requestAnimationFrame(this.animate.bind(this));
}
}
toggleAssets(key) {
this.alienBoss.isDestroyed = true;
this.draw();
let index = 0;
this.alienBosses.map((alienBoss) => {
alienBoss.isDestroyed = true;
});
this.assets.map((asset, $index) => {
if (key === asset.key) {
index = $index;
this.gameCookieService.setDebugData({
secondaryAssetName: key
});
}
});
this.alienBoss = this.alienBosses[index];
this.animateAsset();
}
static { this.ɵfac = i0.ɵɵngDeclareFactory({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: AlienBossComponent, deps: [{ token: GameService }, { token: GameCookieService }], target: i0.ɵɵFactoryTarget.Component }); }
static { this.ɵcmp = i0.ɵɵngDeclareComponent({ minVersion: "14.0.0", version: "17.0.7", type: AlienBossComponent, selector: "bp-alien-boss", viewQueries: [{ propertyName: "canvas", first: true, predicate: ["board"], descendants: true, static: true }], ngImport: i0, template: "<div class=\"game-container\">\n <div class=\"asset-title\">Alien</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 *ngFor=\"let asset of assets\">\n <button (click)=\"toggleAssets(asset.key)\" class=\"animation-button button\">\n {{ asset.name }}\n </button>\n </div>\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:space-evenly}.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"], dependencies: [{ kind: "directive", type: i3.NgForOf, selector: "[ngFor][ngForOf]", inputs: ["ngForOf", "ngForTrackBy", "ngForTemplate"] }] }); }
}
i0.ɵɵngDeclareClassMetadata({ minVersion: "12.0.0", version: "17.0.7", ngImport: i0, type: AlienBossComponent, decorators: [{
type: Component,
args: [{ selector: 'bp-alien-boss', template: "<div class=\"game-container\">\n <div class=\"asset-title\">Alien</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 *ngFor=\"let asset of assets\">\n <button (click)=\"toggleAssets(asset.key)\" class=\"animation-button button\">\n {{ asset.name }}\n </button>\n </div>\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:space-evenly}.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: GameService }, { type: GameCookieService }], propDecorators: { canvas: [{
type: ViewChild,
args: ['board', { static: true }]
}] } });
const ASSET_ANIMATION_1$c = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATE_2$5 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATION$c = [ASSET_ANIMATION_1$c, ASSET_ANIMATE_2$5];
class Alien1Class extends AlienClass {
constructor(gameService, ctx, boundarySetup, guid) {
super(gameService, ctx, boundarySetup, guid, 30);
this.isAlienAsset = true;
}
spawn() {
this.assetAnimations = ASSET_ANIMATION$c;
super.spawn();
}
}
const ASSET_ANIMATION_1$b = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATE_2$4 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATION$b = [ASSET_ANIMATION_1$b, ASSET_ANIMATE_2$4];
class Alien2Class extends AlienClass {
constructor(gameService, ctx, boundarySetup, guid) {
super(gameService, ctx, boundarySetup, guid, 25);
this.isAlienAsset = true;
}
spawn() {
this.assetAnimations = ASSET_ANIMATION$b;
super.spawn();
}
}
const ASSET_ANIMATION_1$a = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATE_2$3 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATION$a = [ASSET_ANIMATION_1$a, ASSET_ANIMATE_2$3];
class Alien3Class extends AlienClass {
constructor(gameService, ctx, boundarySetup, guid) {
super(gameService, ctx, boundarySetup, guid, 20);
this.isAlienAsset = true;
}
spawn() {
this.assetAnimations = ASSET_ANIMATION$a;
super.spawn();
}
}
const ASSET_ANIMATION_1$9 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATE_2$2 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATION$9 = [ASSET_ANIMATION_1$9, ASSET_ANIMATE_2$2];
class Alien4Class extends AlienClass {
constructor(gameService, ctx, boundarySetup, guid) {
super(gameService, ctx, boundarySetup, guid, 15);
this.isAlienAsset = true;
}
spawn() {
this.assetAnimations = ASSET_ANIMATION$9;
super.spawn();
}
}
const ASSET_ANIMATION_1$8 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATE_2$1 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATION$8 = [ASSET_ANIMATION_1$8, ASSET_ANIMATE_2$1];
class Alien5Class extends AlienClass {
constructor(gameService, ctx, boundarySetup, guid) {
super(gameService, ctx, boundarySetup, guid, 10);
this.isAlienAsset = true;
}
spawn() {
this.assetAnimations = ASSET_ANIMATION$8;
super.spawn();
}
}
const ASSET_ANIMATION_1$7 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATE_2 = [
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0, 1, 1, 1, 1, 0, 0],
[0, 0, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0],
[0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 1, 1, 0, 0, 0, 0, 1, 1, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
[0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0]
];
const ASSET_ANIMATION$7 = [ASSET_ANIMATION_1$7, ASSET_ANIMATE_2];
class Alien6Class extends AlienClass {
constructor(gameService, ctx, boundarySetup, guid) {
super(gameService, ctx, boundarySetup, guid, 5);
this.isAlienAsset = true;
}
spawn() {
this.assetAnimations = ASSET_ANIMATION$7;
super.spawn();
}
}
class AlienComponent {
constructor(gameService, gameCookieService) {
this.gameService = gameService;
this.gameCookieService = gameCookieService;
this.isAnimateOnce = true;
this.assets = [
{
key: 'alien1',
name: 'A-1'
},
{
key: 'alien2',
name: 'A-2'
},
{
key: 'alien3',
name: 'A-3'
},
{
key: 'alien4',
name: 'A-4'
},
{
key: 'alien5',
name: 'A-5'
},
{
key: 'alien6',
name: 'A-6'
}
];
}
ngOnInit() {
const rows = 20;
const columns = 20;
this.ctx = this.gameService.initBoard(this.canvas, rows, columns, 25);
this.addAliens({
x: 0,
y: 0,
height: rows,
width: columns
});
this.toggleAssets(this.gameCookieService.getSecondaryDebugData());
this.animate();
}
addAliens(boundary) {
this.aliens = [];
const alien1 = new Alien1Class(this.gameService, this.ctx, boundary, 1);
alien1.move(alien1.positionAsset(AssetAlignEnum.center, AssetAlignVerticalEnum.middle));
a