feat: add brick breaker game to graphics projects

nodejs-tools/nodejs-apps/vighnesh153-astro-svelte/src/components/projects/graphics/brick-breaker-game/ProjectRoot.svelte

@@ -0,0 +1,46 @@
+<script lang="ts">
+  import { onMount } from 'svelte';
+
+  import { BrickBreakerGame, CanvasWrapperImpl } from '@vighnesh153/graphics-programming';
+  import type { CanvasWrapper } from '@vighnesh153/graphics-programming';
+
+  let canvasElement: HTMLCanvasElement;
+  let canvasWrapper: CanvasWrapper;
+  let game: BrickBreakerGame;
+
+  function handleMouseMove(e: MouseEvent) {
+    game.handleMouseMove(e, document.documentElement.scrollLeft);
+  }
+
+  function newGame() {
+    if (canvasWrapper) {
+      game = new BrickBreakerGame(canvasWrapper, {
+        onGameOver() {
+          game.stop();
+          alert('Game over! You win!');
+          window.location.reload();
+        },
+      });
+      const frames = game.start();
+      function showNextFrame() {
+        if (!frames.next().done) {
+          requestAnimationFrame(showNextFrame);
+        }
+      }
+      showNextFrame();
+    }
+  }
+
+  onMount(() => {
+    canvasWrapper = new CanvasWrapperImpl(canvasElement);
+    newGame();
+  });
+</script>
+
+<canvas
+  class="mt-6 mx-auto w-full max-w-3xl aspect-video bg-text"
+  bind:this={canvasElement}
+  on:mousemove={handleMouseMove}
+>
+  Sorry your browser doesn't support the canvas element
+</canvas>

nodejs-tools/nodejs-apps/vighnesh153-astro-svelte/src/components/projects/graphics/pong-game/ProjectRoot.svelte

@@ -9,7 +9,7 @@
   let game: PongGame;
 
   function handleMouseMove(e: MouseEvent) {
-    game.handleMouseMove(e);
+    game.handleMouseMove(e, document.documentElement.scrollTop);
   }
 
   function newGame() {

nodejs-tools/nodejs-apps/vighnesh153-astro-svelte/src/pages/projects/graphics/brick-breaker-game.astro

@@ -0,0 +1,11 @@
+---
+import { graphicsProjectsMap } from '@vighnesh153/graphics-programming';
+import GraphicsProjectLayout from '@/layouts/GraphicsProjectLayout.astro';
+import ProjectRoot from '@/components/projects/graphics/brick-breaker-game/ProjectRoot.svelte';
+
+const project = graphicsProjectsMap.brickBreakerGame;
+---
+
+<GraphicsProjectLayout project={project}>
+  <ProjectRoot client:load />
+</GraphicsProjectLayout>

nodejs-tools/nodejs-lib/graphics-programming/src/brick-breaker-game/Ball.ts

@@ -0,0 +1,61 @@
+import { CanvasWrapper } from '@/canvas-wrapper';
+
+interface BallOptions {
+  readonly size?: number;
+  readonly color?: string;
+  readonly coordinate: Coordinate;
+  readonly velocity?: Velocity;
+}
+
+interface Coordinate {
+  x: number;
+  y: number;
+}
+
+interface Velocity {
+  dx: number;
+  dy: number;
+}
+
+export class Ball {
+  readonly size: number;
+  readonly color: string;
+  readonly coordinate: Coordinate;
+  readonly velocity: Velocity;
+
+  constructor(
+    private readonly canvasWrapper: CanvasWrapper,
+    options: BallOptions
+  ) {
+    this.coordinate = options.coordinate;
+    this.size = options.size ?? 5;
+    this.color = options.color ?? 'black';
+    this.velocity = options.velocity ?? {
+      dx: 5,
+      dy: -5,
+    };
+  }
+
+  draw(): void {
+    const {
+      canvasWrapper,
+      coordinate: { x, y },
+      color,
+      size,
+    } = this;
+    canvasWrapper.drawFilledRect(x, y, size, size, color);
+  }
+
+  update(): void {
+    this.coordinate.x += this.velocity.dx;
+    this.coordinate.y += this.velocity.dy;
+  }
+
+  flipVelocityX(): void {
+    this.velocity.dx *= -1;
+  }
+
+  flipVelocityY(): void {
+    this.velocity.dy *= -1;
+  }
+}

nodejs-tools/nodejs-lib/graphics-programming/src/brick-breaker-game/Brick.ts

@@ -0,0 +1,57 @@
+import { CanvasWrapper } from '@/canvas-wrapper';
+import { not } from '@vighnesh153/utils';
+
+interface BrickOptions {
+  readonly row: number;
+  readonly column: number;
+  readonly width: number;
+
+  readonly height?: number;
+  readonly color?: string;
+  readonly endPadding?: number;
+
+  readonly visible?: boolean;
+}
+
+export class Brick {
+  readonly row: number;
+  readonly column: number;
+
+  readonly width: number;
+  readonly height: number;
+  readonly color: string;
+  readonly endPadding: number;
+
+  private visible: boolean;
+
+  get isVisible(): boolean {
+    return this.visible;
+  }
+
+  constructor(
+    private readonly canvasWrapper: CanvasWrapper,
+    options: BrickOptions
+  ) {
+    this.row = options.row;
+    this.column = options.column;
+
+    this.width = options.width;
+    this.height = options.height ?? 20;
+    this.color = options.color ?? 'blue';
+    this.endPadding = options.endPadding ?? 1;
+    this.visible = options.visible ?? true;
+  }
+
+  draw(): void {
+    if (not(this.isVisible)) {
+      return;
+    }
+
+    const { canvasWrapper, row, column, width, height, color, endPadding } = this;
+    canvasWrapper.drawFilledRect(column * width, row * height, width - endPadding, height - endPadding, color);
+  }
+
+  destroy(): void {
+    this.visible = false;
+  }
+}