feat: #197 classes init

src/app/game/data/games.ts

@@ -3,9 +3,11 @@ import { Pong } from '../games/pong/models/pong.class';
 import { FlappyBird } from '../games/flappybird/models/flappybird.class';
 import { SkiJump } from '../games/skijump/models/skijump.class';
 import { HappyJump } from '../games/happyjump/models/happyjump.class';
+import { ClimbHill } from '../games/climbhill/models/climbhill.class';
 export const games: Record<string, Game> = {
   pong: new Pong(),
   skijump: new SkiJump(),
   flappybird: new FlappyBird(),
   happyjump: new HappyJump(),
+  climbhill: new ClimbHill(),
 };

src/app/game/game.page.component.ts

@@ -27,6 +27,7 @@ import { CantDisplayGameComponent } from './components/cant-display-game/cant-di
 import { FlappyBirdComponent } from './games/flappybird/flappybird.component';
 import { SkiJumpGameWindowComponent } from './games/skijump/skijump.component';
 import { HappyJumpComponent } from './games/happyjump/happyjump.component';
+import { ClimbHillComponent } from './games/climbhill/climbhill.component';
 
 @Component({
   selector: 'app-game',
@@ -44,7 +45,6 @@ import { HappyJumpComponent } from './games/happyjump/happyjump.component';
     SkiJumpGameWindowComponent,
     GameControlsComponent,
     FlappyBirdComponent,
-    HappyJumpComponent,
   ],
   template: `
     <div class="flex flex-col min-h-all w-full items-center bg-zinc-400">
@@ -115,6 +115,15 @@ import { HappyJumpComponent } from './games/happyjump/happyjump.component';
                   [gameRestart]="gameRestartSubject.asObservable()"
                   [gamePause]="gamePauseSubject.asObservable()" />
               }
+              @case ('climbhill') {
+                <app-climbhill
+                  class="flex flex-col items-center w-3/4"
+                  [setSocketInputDataReceive]="socketInputData"
+                  (gameStateDataEmitter)="receiveGameOutputData($event)"
+                  [setAbstractGame]="game"
+                  [gameRestart]="gameRestartSubject.asObservable()"
+                  [gamePause]="gamePauseSubject.asObservable()" />
+              }
             }
           </div>
         }

src/app/game/games/climbhill/climbhill.component.ts

@@ -0,0 +1,63 @@
+/* eslint-disable max-lines */
+import { AfterViewInit, Component, OnDestroy, OnInit } from '@angular/core';
+import { CanvasComponent } from 'app/game/components/canvas/canvas.component';
+import { BaseGameWindowComponent } from '../base-game.component';
+import { ClimbHill, ClimbHillState } from './models/climbhill.class';
+
+@Component({
+  selector: 'app-climbhill',
+  standalone: true,
+  imports: [CanvasComponent],
+  template: `<div>
+      score: <b>{{ game.state.score }}</b>
+    </div>
+    <app-canvas
+      [displayMode]="'horizontal'"
+      class="bg-zinc-300"
+      #gameCanvas></app-canvas>
+    <b>FPS: {{ fps }}</b> `,
+})
+export class ClimbHillComponent
+  extends BaseGameWindowComponent
+  implements OnInit, AfterViewInit, OnDestroy
+{
+  public override game!: ClimbHill;
+
+  public override ngOnInit(): void {
+    super.ngOnInit();
+    this.game = this.game as ClimbHill;
+  }
+
+  public override ngAfterViewInit(): void {
+    super.ngAfterViewInit();
+    this.render();
+  }
+
+  public override restart(): void {
+    this.game.state = new ClimbHillState();
+  }
+
+  protected override update(): void {
+    super.update();
+
+    //update
+
+    this.render();
+  }
+
+  //
+
+  private render(): void {
+    const context = this._canvas.getContext('2d');
+    if (!context) return;
+    context.clearRect(0, 0, this._canvas.width, this._canvas.height);
+  }
+
+  private random(min: number, max: number): number {
+    return Math.floor(Math.random() * (max - min + 1) + min);
+  }
+
+  private round(value: number, decimals = 2): number {
+    return Math.round(value * Math.pow(10, decimals)) / Math.pow(10, decimals);
+  }
+}

src/app/game/games/climbhill/models/climbhill.class.ts

@@ -0,0 +1,36 @@
+import { TGameState } from '@gameModels/game-state.type';
+import { Game } from '@gameModels/game.class';
+import { Player } from '@gameModels/player.class';
+
+export class ClimbHillState implements TGameState {
+  public score = 0;
+}
+
+export class ClimbHill extends Game {
+  public override name = 'climbhill';
+  public override state = new ClimbHillState();
+  public override outputSpec = ``;
+
+  public override players = [
+    new Player(
+      0,
+      true,
+      'Player 1',
+      { gas: 0, brake: 0 },
+      {
+        ArrowRight: {
+          variableName: 'gas',
+          pressedValue: 1,
+          releasedValue: 0,
+        },
+        ArrowLeft: {
+          variableName: 'brake',
+          pressedValue: 1,
+          releasedValue: 0,
+        },
+      },
+      '<gas>, <brake>:  value of {0, 1}, 0: gas/brake released, 1: gas/brake pressed',
+      { gas: '[ArrowRight]', brake: '[ArrowLeft]' }
+    ),
+  ];
+}