ConveyorBin finally finished, not entirely bugfree
This commit is contained in:
Kaloian Venkov
parent
d500e054fd
commit
970e13681c
@ -1,6 +1,9 @@
|
||||
<div class="container">
|
||||
<igx-linear-bar [max]="timeMax" [value]="time" class="timeline" [text]="getTimerText()"></igx-linear-bar>
|
||||
<div class="points">Точки: {{points}}</div>
|
||||
<div class="points">
|
||||
Точки: {{points}} <br>
|
||||
Грешки: {{mistakes}}
|
||||
</div>
|
||||
<div class="conveyor">
|
||||
<img src="/assets/images/conveyor-belt/conveyor.gif">
|
||||
<img src="/assets/images/conveyor-belt/conveyor.gif">
|
||||
@ -17,27 +20,32 @@
|
||||
</div>
|
||||
</div>
|
||||
<igx-dialog #startDialog [isOpen]="true" class="dialog" [closeOnEscape]="false">
|
||||
<div class="dialog-local" style="">
|
||||
<div class="dialog-local">
|
||||
<h4>ConveyorBin</h4>
|
||||
<p>
|
||||
В тази миниигра, вие трябва да сортирате боклуците по съответните кофи:
|
||||
хартия - синя, стъкло - зелена, пластмаса и метал - жълта и битови отпадъци - червена.
|
||||
За да преместите кофите наляво, натиснете A, а за да ги преместите надясно - D.
|
||||
За всеки боклук, чиято кофа уцелите печелите точка, а за всеки боклук, чиято кофа не уцелите - губите точка.
|
||||
Имате около една минута да сортирате всички боклуци, но ако точките ви паднат под -10, губите.
|
||||
</p>
|
||||
<button igxButton igxRipple routerLink="">Върни се в началния екран</button>
|
||||
<button igxButton igxRipple (click)="start(); startDialog.close()">Играй</button>
|
||||
<button igxButton igxRipple (click)="finalise()" routerLink="">Върни се в началния екран</button>
|
||||
</div>
|
||||
</igx-dialog>
|
||||
<igx-dialog #endDialog>
|
||||
<div class="dialog">
|
||||
<h4>Завършихте минииграта</h4>
|
||||
<igx-dialog #endDialog [isOpen]="ended">
|
||||
<div class="dialog-local">
|
||||
<h4>
|
||||
<span *ngIf="won">Завършихте минииграта</span>
|
||||
<span *ngIf="!won">Загубихте минииграта</span>
|
||||
</h4>
|
||||
<h6>Събрани точки: {{points}}</h6>
|
||||
<h6>Грешки: {{mistakes}}</h6>
|
||||
<div class="wonCard" style="display: flex; flex-direction: column; align-items: center;" *ngIf="wonCard">
|
||||
<h4>Вие спечелихте тази карта:</h4>
|
||||
<app-card [card]="wonCard" [mini]="true" style="margin: auto; display: block;"></app-card>
|
||||
<app-card [card]="wonCard" [mini]="true" style="margin: 1em auto; display: block;"></app-card>
|
||||
</div>
|
||||
<button igxButton igxRipple routerLink="">Върни се в началния екран</button>
|
||||
<button igxButton igxRipple (click)="restart()">Играй отново</button>
|
||||
<button igxButton igxRipple (click)="finalise()" routerLink="">Върни се в началния екран</button>
|
||||
</div>
|
||||
</igx-dialog>
|
||||
|
||||
@ -1,7 +1,8 @@
|
||||
import { AfterViewInit, Component, ElementRef, EventEmitter, Input, NgZone, OnInit, ViewChild, ViewChildren } from '@angular/core';
|
||||
import { NavigationStart, Router } from '@angular/router';
|
||||
import { filter } from 'rxjs/operators';
|
||||
import { Card, Saved } from '../db.service';
|
||||
import { Card, DbService, Saved } from '../db.service';
|
||||
import { Medal, UserdataService } from '../userdata.service';
|
||||
|
||||
class Rect {
|
||||
public top: number;
|
||||
@ -129,7 +130,6 @@ class Trash {
|
||||
})
|
||||
export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit {
|
||||
conveyorFrame = 1;
|
||||
frameCounterID: number;
|
||||
mainLoopID: number;
|
||||
timeCounterID: number;
|
||||
trashTypes: string[] = ['metal-plastic', 'glass', 'paper', 'other'];
|
||||
@ -137,8 +137,6 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
|
||||
|
||||
ended = false;
|
||||
|
||||
wonCard: Card;
|
||||
|
||||
throwOutSounds: HTMLAudioElement[] = [];
|
||||
backgroundMusic: HTMLAudioElement;
|
||||
|
||||
@ -158,11 +156,18 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
|
||||
milliseconds = 0;
|
||||
|
||||
won = false;
|
||||
wonCard: Card = {
|
||||
imageUrl: '',
|
||||
info: [],
|
||||
name: 'test',
|
||||
types: ['endangered'],
|
||||
};
|
||||
|
||||
timeMax = 1;
|
||||
time = 0;
|
||||
|
||||
points = 0;
|
||||
mistakes = 0;
|
||||
|
||||
binsAcceptedTypes: string[][] = [
|
||||
[ 'paper' ],
|
||||
@ -201,6 +206,8 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
|
||||
private zone: NgZone,
|
||||
private router: Router,
|
||||
private element: ElementRef,
|
||||
private db: DbService,
|
||||
private userdata: UserdataService,
|
||||
) { }
|
||||
|
||||
showPoint(points: number, x: number, y: number): void {
|
||||
@ -294,7 +301,11 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
|
||||
}
|
||||
else {
|
||||
this.points--;
|
||||
this.mistakes++;
|
||||
this.showPoint(-1, pointX, pointY);
|
||||
if (this.mistakes > 10) {
|
||||
this.end();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -309,7 +320,7 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
|
||||
this.backgroundMusic.src = '/assets/sound/music/conveyorbin.wav';
|
||||
|
||||
this.backgroundMusic.onloadedmetadata = () => {
|
||||
// this.timeMax = this.backgroundMusic.duration;
|
||||
this.timeMax = this.backgroundMusic.duration;
|
||||
};
|
||||
}
|
||||
|
||||
@ -341,13 +352,6 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
|
||||
this.conveyor = new Conveyor();
|
||||
this.conveyor.element = this.conveyorElement.first.nativeElement;
|
||||
this.conveyor.speed = 2;
|
||||
this.frameCounterID = setInterval(() => {
|
||||
if (!this.suspended) {
|
||||
this.zone.run(() => {
|
||||
this.conveyorFrame = (++this.conveyorFrame % 3);
|
||||
});
|
||||
}
|
||||
}, 1000) as any as number;
|
||||
this.mainLoopID = setInterval(() => {
|
||||
if (!this.suspended) {
|
||||
if (this.milliseconds % (this.simulationSpeed * 100) === 0) {
|
||||
@ -365,25 +369,54 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
|
||||
if (!this.suspended) {
|
||||
this.time += 0.25;
|
||||
if (this.time > this.timeMax) {
|
||||
this.stop();
|
||||
this.ended = true;
|
||||
this.won = true;
|
||||
this.end();
|
||||
}
|
||||
}
|
||||
}, 250) as any as number;
|
||||
}
|
||||
end(): void {
|
||||
this.stop();
|
||||
this.ended = true;
|
||||
}
|
||||
finalise(): void {
|
||||
clearInterval(this.frameCounterID);
|
||||
clearInterval(this.timeCounterID);
|
||||
clearInterval(this.mainLoopID);
|
||||
document.body.removeEventListener('keydown', this.keydownListener);
|
||||
this.throwOutSounds.forEach(v => this.clearSound(v));
|
||||
this.clearSound(this.backgroundMusic);
|
||||
}
|
||||
stop(): void {
|
||||
end(): void {
|
||||
this.pause();
|
||||
|
||||
this.ended = true;
|
||||
|
||||
let medal = Medal.None;
|
||||
if (this.won) {
|
||||
|
||||
const successRate = (10 - this.mistakes) / 10;
|
||||
|
||||
if (successRate > 0) {
|
||||
const owned = this.userdata.getOwnedCardIds();
|
||||
|
||||
let newCard = null;
|
||||
|
||||
do {
|
||||
newCard = this.db.getRandomCardId(successRate - .5);
|
||||
} while (owned.includes(newCard));
|
||||
|
||||
this.userdata.addCard(newCard);
|
||||
this.wonCard = this.db.getCard(newCard);
|
||||
}
|
||||
if (successRate > .5) medal = Medal.Bronze;
|
||||
if (successRate > .75) medal = Medal.Silver;
|
||||
if (successRate > .9) medal = Medal.Gold;
|
||||
}
|
||||
|
||||
const id = '0';
|
||||
const data = this.userdata.getMinigameUserdata(id);
|
||||
if (data.medal < medal) data.medal = medal;
|
||||
data.played = true;
|
||||
|
||||
this.userdata.saveMinigameUserdata(id, data);
|
||||
}
|
||||
pause(): void {
|
||||
this.suspended = true;
|
||||
this.backgroundMusic.pause();
|
||||
this.backgroundMusic.currentTime = 0;
|
||||
@ -398,6 +431,13 @@ export class MinigameConveyorRecyclingComponent implements AfterViewInit, OnInit
|
||||
|
||||
restart(): void {
|
||||
this.points = 0;
|
||||
this.ended = false;
|
||||
this.backgroundMusic.currentTime = 0;
|
||||
this.time = 0;
|
||||
this.trashes.forEach(v => v.el.element.remove());
|
||||
this.trashes = [];
|
||||
this.nextId = 0;
|
||||
this.milliseconds = 0;
|
||||
this.start();
|
||||
}
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user