- Added Angular Material

- Added Ubuntu font - Added leaderboards - Small code optimization - Fixed minor bugs
Timic3 · Mar 22, 2018 · a4c866b · a4c866b
1 parent 01696d4
commit a4c866b
Show file tree

Hide file tree

Showing 18 changed files with 324 additions and 25 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -13,15 +13,18 @@
   "private": true,
   "dependencies": {
     "@angular/animations": "^5.2.9",
+    "@angular/cdk": "^5.2.4",
     "@angular/common": "^5.2.9",
     "@angular/compiler": "^5.2.9",
     "@angular/core": "^5.2.9",
     "@angular/forms": "^5.2.9",
     "@angular/http": "^5.2.9",
+    "@angular/material": "^5.2.4",
     "@angular/platform-browser": "^5.2.9",
     "@angular/platform-browser-dynamic": "^5.2.9",
     "@angular/router": "^5.2.9",
     "core-js": "^2.4.1",
+    "hammerjs": "^2.0.8",
     "rxjs": "^5.5.7",
     "zone.js": "^0.8.19"
   },

diff --git a/src/app/app.component.html b/src/app/app.component.html
@@ -1 +1,7 @@
+<div class="settings">
+    <button mat-mini-fab (click)="openLeaderboard()">
+        <mat-icon>star rate</mat-icon>
+    </button>
+</div>
+
 <canvas id="breakout" width="700" height="700"></canvas>
diff --git a/src/app/app.component.ts b/src/app/app.component.ts
@@ -1,4 +1,8 @@
 import { Component, AfterContentInit, HostListener } from '@angular/core';
+import { MatDialog } from '@angular/material';
+
+import { HelloComponent } from './hello/hello.component';
+import { LeaderboardComponent } from './leaderboard/leaderboard.component';
 
 import { AppConstants } from './app.constants';
 import { AppStates } from './app.states';
@@ -41,6 +45,9 @@ export class AppComponent implements AfterContentInit {
   public levelUpSize = 0;
 
   public heart;
+  public helloScreen = true;
+
+  constructor(public dialog: MatDialog) { }
 
   ngAfterContentInit() {
     this.game = <HTMLCanvasElement>document.getElementById('breakout');
@@ -57,6 +64,9 @@ export class AppComponent implements AfterContentInit {
           packetY = this.bouncer.y - AppConstants.PACKET_RADIUS - 5;
     this.packet = new Packet(packetX, packetY, this.bouncer, this.context);
     this.then = Date.now();
+
+    this.initiateHelloScreen();
+
     this.gameLoop();
   }
 
@@ -68,17 +78,6 @@ export class AppComponent implements AfterContentInit {
     if (this.elapsed > 1000 / this.gameFPS) {
       this.then = this.now - (this.elapsed % (1000 / this.gameFPS));
 
-      this.context.clearRect(0, 0, AppConstants.GAME_WIDTH, AppConstants.GAME_HEIGHT + 40);
-      this.context.fillStyle = 'rgba(16, 16, 16, 0.5)';
-      this.context.fillRect(0, 0, AppConstants.GAME_WIDTH, AppConstants.GAME_HEIGHT + 40);
-
-      this.cameraShake();
-
-      this.context.font = '85px Arial';
-      this.context.textAlign = 'center';
-      this.context.fillStyle = 'rgba(111, 111, 111, 1.0)';
-      this.context.fillText(String(AppStates.STAGE), AppConstants.HALF_WIDTH, AppConstants.HALF_HEIGHT, AppConstants.GAME_WIDTH);
-
       if (this.gameStarting) {
         this.levelUpSize -= 0.03;
         if (this.levelUpSize <= 0) {
@@ -119,19 +118,32 @@ export class AppComponent implements AfterContentInit {
         }
       }
 
-      this.context.font = (Easing.easeInOutCubic(this.levelUpSize) * 50) + 'px Arial';
+      this.context.clearRect(0, 0, AppConstants.GAME_WIDTH, AppConstants.GAME_HEIGHT + 40);
+      this.context.fillStyle = 'rgba(16, 16, 16, 0.5)';
+      this.context.fillRect(0, 0, AppConstants.GAME_WIDTH, AppConstants.GAME_HEIGHT + 40);
+
+      // this.cameraShake();
+
+      this.context.font = '85px Ubuntu';
+      this.context.textAlign = 'center';
+      this.context.fillStyle = 'rgba(111, 111, 111, 1.0)';
+      this.context.fillText(String(AppStates.STAGE), AppConstants.HALF_WIDTH, AppConstants.HALF_HEIGHT, AppConstants.GAME_WIDTH);
+
+      this.context.font = (Easing.easeInOutCubic(this.levelUpSize) * 50) + 'px Ubuntu';
       this.context.fillStyle = 'rgba(255, 255, 255, ' + this.levelUpSize + ')';
       this.context.fillText('Level up!', AppConstants.HALF_WIDTH, AppConstants.HALF_HEIGHT - 130, AppConstants.GAME_WIDTH);
 
       this.context.beginPath();
       this.context.strokeStyle = 'rgba(111, 111, 111, ' + (1 - this.circleExpand) + ')';
       this.context.lineWidth = 15;
       const radius = 70 + 20 * this.circleExpand;
-      this.context.arc(AppConstants.HALF_WIDTH, AppConstants.HALF_HEIGHT - 30, radius, 0, Math.PI * this.circleAnimation);
+      const startAngle = -Math.PI / 2;
+      const endAngle = startAngle + (Math.PI) * this.circleAnimation;
+      this.context.arc(AppConstants.HALF_WIDTH, AppConstants.HALF_HEIGHT - 30, radius, startAngle, endAngle);
       this.context.stroke();
       this.context.closePath();
 
-      this.context.font = '25px Arial';
+      this.context.font = '25px Ubuntu';
       this.context.fillStyle = 'rgba(255, 255, 255, 1.0)';
       if (!this.gameStarting && !AppStates.STARTED) {
         this.context.fillText('Press SPACE to begin', AppConstants.HALF_WIDTH, AppConstants.HALF_HEIGHT + 100, AppConstants.GAME_WIDTH);
@@ -157,9 +169,9 @@ export class AppComponent implements AfterContentInit {
       this.context.stroke();
       this.context.closePath();*/
 
-      if (this.shakeTickStart !== -1) {
+      /*if (this.shakeTickStart !== -1) {
         this.restoreCamera();
-      }
+      }*/
     }
   }
 
@@ -168,11 +180,34 @@ export class AppComponent implements AfterContentInit {
   onKeyEvent(event: KeyboardEvent) {
     this.bouncer.onKeyChange(event, event.type === 'keydown' ? true : false);
 
-    if (event.keyCode === 32) {
+    if (event.keyCode === 32 && !this.helloScreen) {
+      // Prevent from firing focused Material element
+      event.preventDefault();
       this.gameStarting = true;
     }
   }
 
+  initiateHelloScreen() {
+    setTimeout(() => {
+      const dialog = this.dialog.open(HelloComponent, {
+        width: '500px',
+        disableClose: true
+      });
+
+      dialog.afterClosed()
+        .subscribe((nameInput) => {
+          AppStates.NAME = nameInput;
+          this.helloScreen = false;
+        });
+    });
+  }
+
+  openLeaderboard() {
+    const dialog = this.dialog.open(LeaderboardComponent, {
+      width: '500px'
+    });
+  }
+
   cameraShake() {
     if (this.shakeTickStart === -1) {
       return;

diff --git a/src/app/app.module.ts b/src/app/app.module.ts
@@ -1,18 +1,35 @@
 import { BrowserModule } from '@angular/platform-browser';
+import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { NgModule } from '@angular/core';
 
+import {
+  MatButtonModule,
+  MatDialogModule,
+  MatIconModule,
+  MatInputModule
+} from '@angular/material';
 
 import { AppComponent } from './app.component';
+import { HelloComponent } from './hello/hello.component';
+import { LeaderboardComponent } from './leaderboard/leaderboard.component';
 
 
 @NgModule({
   declarations: [
-    AppComponent
+    AppComponent,
+    HelloComponent,
+    LeaderboardComponent
   ],
   imports: [
-    BrowserModule
+    BrowserModule,
+    BrowserAnimationsModule,
+    MatButtonModule,
+    MatDialogModule,
+    MatIconModule,
+    MatInputModule
   ],
   providers: [],
-  bootstrap: [AppComponent]
+  bootstrap: [AppComponent],
+  entryComponents: [HelloComponent, LeaderboardComponent]
 })
 export class AppModule { }
diff --git a/src/app/app.states.ts b/src/app/app.states.ts
@@ -13,4 +13,6 @@ export class AppStates {
 
   public static WALLS_WIDTH = AppConstants.GAME_WIDTH / AppStates.WALLS_X;
   static readonly WALLS_HEIGHT = 40;
+
+  public static NAME = 'guest';
 }
diff --git a/src/app/classes/Packet.ts b/src/app/classes/Packet.ts
@@ -1,3 +1,5 @@
+import { LeaderboardComponent } from '../leaderboard/leaderboard.component';
+
 import { AppConstants } from '../app.constants';
 import { AppStates } from '../app.states';
 import { Drawable } from './Drawable';
@@ -13,6 +15,10 @@ export class Packet extends Drawable {
   private velocityX = Math.random() * (Math.floor(Math.random() * 2) === 1 ? 1 : -1);
   private velocityY = -1;
 
+  private angle = Math.atan2(this.velocityY, this.velocityX);
+  private angleX = Math.cos(this.angle);
+  private angleY = Math.sin(this.angle);
+
   private hitRight = false;
   private hitLeft = false;
   private erpRight = 0;
@@ -31,9 +37,8 @@ export class Packet extends Drawable {
     // Trigonometry - calculate direction in radians and multiply with speed
     // This allows us to keep constant ball speed
     if (AppStates.STARTED) {
-      const angle = Math.atan2(this.velocityY, this.velocityX);
-      this.x += Math.cos(angle) * (AppStates.PACKET_SPEED + AppConstants.PROGRESSIVENESS * (AppStates.STAGE - 1));
-      this.y += Math.sin(angle) * (AppStates.PACKET_SPEED + AppConstants.PROGRESSIVENESS * (AppStates.STAGE - 1));
+      this.x += this.angleX * (AppStates.PACKET_SPEED + AppConstants.PROGRESSIVENESS * (AppStates.STAGE - 1));
+      this.y += this.angleY * (AppStates.PACKET_SPEED + AppConstants.PROGRESSIVENESS * (AppStates.STAGE - 1));
     }
 
     for (let x = 0; x < AppStates.WALLS_X; x++) {
@@ -55,6 +60,7 @@ export class Packet extends Drawable {
           // Just a safety check
           this.y = this.bouncer.y - AppConstants.PACKET_RADIUS;
           this.velocityX = (this.x - this.bouncer.x - AppConstants.BOUNCER_WIDTH / 2) / 100;
+          this.updateAngle();
           if (this.bounces[0]) {
             this.bounces[0].returnX = this.x;
             this.bounces[0].returnY = this.y;
@@ -70,7 +76,7 @@ export class Packet extends Drawable {
         this.context.shadowColor = 'black';
         this.context.shadowOffsetX = 1;
         this.context.shadowOffsetY = 1;
-        this.context.font = '15px Arial';
+        this.context.font = '15px Ubuntu';
         this.context.textAlign = 'center';
         this.context.strokeStyle = 'rgba(255, 255, 255, ' + packetIP.uiAlpha + ')';
 
@@ -125,6 +131,12 @@ export class Packet extends Drawable {
     this.context.closePath();
   }
 
+  updateAngle() {
+    this.angle = Math.atan2(this.velocityY, this.velocityX);
+    this.angleX = Math.cos(this.angle);
+    this.angleY = Math.sin(this.angle);
+  }
+
   managePacketIP(lost?) {
     if (this.bounces.length === 1) {
       const bounce = this.bounces[0];
@@ -191,7 +203,9 @@ export class Packet extends Drawable {
     this.bouncer.y = AppConstants.GAME_HEIGHT - AppConstants.BOUNCER_HEIGHT - 10;
     this.x = this.bouncer.x + AppConstants.BOUNCER_WIDTH / 2;
     this.y = this.bouncer.y - AppConstants.PACKET_RADIUS - 5;
-    this.bounces.push(new PacketIP(this.bouncer.x + AppConstants.BOUNCER_WIDTH / 2, this.bouncer.y - 5));
+    if (!hardReset) {
+      this.bounces.push(new PacketIP(this.bouncer.x + AppConstants.BOUNCER_WIDTH / 2, this.bouncer.y - 5));
+    }
   }
 
   bounceOnIntersection(wall) {
@@ -222,6 +236,7 @@ export class Packet extends Drawable {
         const normalY = packetDistanceY * sideY < 0 ? -1 : 1;
         this.velocityY = normalY;
       }
+      this.updateAngle();
       this.manageWallHit(wall);
       return; // Yes, bounced!
     }
@@ -238,13 +253,15 @@ export class Packet extends Drawable {
           vectorY = packetDistanceY < 0 ? -1 : 1;
     this.velocityX = vectorX * sideX / normalize;
     this.velocityY = vectorY * sideY / normalize;
+    this.updateAngle();
     this.manageWallHit(wall);
     return; // Yes, bounced!
   }
 
   bounceOnBoundsIntersection() {
     if (this.x > AppConstants.GAME_WIDTH - AppConstants.PACKET_RADIUS) {
       this.velocityX = -this.velocityX;
+      this.updateAngle();
       this.hitRight = true;
       // Don't bug out!
       this.x = AppConstants.GAME_WIDTH - AppConstants.PACKET_RADIUS;
@@ -253,6 +270,7 @@ export class Packet extends Drawable {
     if (this.y >= AppConstants.GAME_HEIGHT - AppConstants.PACKET_RADIUS) {
       this.velocityX = Math.random() * (Math.floor(Math.random() * 2) === 1 ? 1 : -1);
       this.velocityY = -this.velocityY;
+      this.updateAngle();
 
       for (let i = 0; i < this.bounces.length; i++) {
         const packetIP = this.bounces[i];
@@ -265,6 +283,7 @@ export class Packet extends Drawable {
       if (--Packet.health <= 0) {
         // Reset game
         AppStates.STARTED = false;
+        LeaderboardComponent.saveScore(AppStates.STAGE);
         AppStates.STAGE = 1;
         AppStates.WALLS_X = 3;
         AppStates.WALLS_WIDTH = AppConstants.GAME_WIDTH / AppStates.WALLS_X;
@@ -277,13 +296,15 @@ export class Packet extends Drawable {
 
     if (this.x < AppConstants.PACKET_RADIUS) {
       this.velocityX = -this.velocityX;
+      this.updateAngle();
       this.hitLeft = true;
       // Bug check
       this.x = AppConstants.PACKET_RADIUS;
     }
 
     if (this.y < AppConstants.PACKET_RADIUS) {
       this.velocityY = -this.velocityY;
+      this.updateAngle();
       this.managePacketIP(true);
       // Bug check
       this.y = AppConstants.PACKET_RADIUS;