feat: Hをたくさん描画

package.json

@@ -1,6 +1,6 @@
 {
   "name": "mizu-ts",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Mizu-ts is a joke script that simulates water(H2o) generation in TypeScript.",
   "type": "module",
   "scripts": {

src/main.ts

@@ -1,23 +1,8 @@
-import { Coordinate } from './atoms/Coordinate';
-import { H } from './atoms/H';
+import { MizuSimulator } from './simulator/MizuSimulator';
 
 document.addEventListener('DOMContentLoaded', () => {
-  const canvas = document.querySelector('#myCanvas') as HTMLCanvasElement;
-  if (!canvas) {
-    throw new Error('Canvas not found.');
-  }
-  canvas.width = window.innerWidth;
-  canvas.height = window.innerHeight;
-  document.body.appendChild(canvas);
-
-  const ctx = canvas.getContext('2d');
-  if (!ctx) {
-    throw new Error('Canvas context is not available.');
-  }
-
-  const hAtom = new H(canvas.width);
-  hAtom.initializeDrawingProperties(
-    new Coordinate(canvas.width * Math.random(), canvas.height * Math.random()),
-  );
-  hAtom.render(ctx);
+  const simulator = new MizuSimulator();
+  const scale = simulator.getScale();
+  simulator.init(30 * scale);
+  simulator.renderFrame();
 });

src/simulator/MizuSimulator.ts

@@ -0,0 +1,78 @@
+import { Coordinate } from '../atoms/Coordinate';
+import { H } from '../atoms/H';
+
+export class MizuSimulator {
+  private h: H[] = [];
+  private cw: number;
+  private ch: number;
+  private ctx: CanvasRenderingContext2D;
+  private bufferCanvas: HTMLCanvasElement;
+  private bufferCtx: CanvasRenderingContext2D;
+
+  constructor() {
+    const canvas = document.querySelector<HTMLCanvasElement>('#myCanvas');
+    if (!canvas) {
+      throw new Error('Canvas element not found');
+    }
+
+    canvas.width = window.innerWidth;
+    canvas.height = window.innerHeight;
+    this.cw = canvas.width;
+    this.ch = canvas.height;
+
+    const ctx = canvas.getContext('2d');
+    if (!ctx) {
+      throw new Error('Canvas context not available');
+    }
+    this.ctx = ctx;
+
+    // ダブルバッファリング
+    this.bufferCanvas = document.createElement('canvas');
+    this.bufferCanvas.width = this.cw;
+    this.bufferCanvas.height = this.ch;
+    const bufferCtx = this.bufferCanvas.getContext('2d');
+    if (!bufferCtx) {
+      throw new Error('Buffer canvas context not available');
+    }
+    this.bufferCtx = bufferCtx;
+  }
+
+  public init(hCount: number): void {
+    for (let i = 0; i < hCount; i++) {
+      this.h.push(this.createAtom());
+    }
+  }
+
+  public renderFrame(): void {
+    this.bufferCtx.fillStyle = '#fff';
+    this.bufferCtx.fillRect(0, 0, this.cw, this.ch);
+
+    this.renderAtoms();
+
+    this.ctx.drawImage(this.bufferCanvas, 0, 0);
+  }
+
+  public getScale(): number {
+    if (this.cw < 768) {
+      return 1.0;
+    }
+    if (this.cw >= 768 && this.cw < 1280) {
+      return 1.2;
+    }
+    return 1.5;
+  }
+
+  private createAtom(): H {
+    const x = this.cw * Math.random();
+    const y = this.ch * Math.random();
+    const h = new H(this.cw);
+    h.initializeDrawingProperties(new Coordinate(x, y));
+    return h;
+  }
+
+  private renderAtoms(): void {
+    for (const h of this.h) {
+      h.render(this.bufferCtx);
+    }
+  }
+}

tests/simulator/MizuSimulator.test.ts

@@ -0,0 +1,41 @@
+import { describe, expect, it, beforeEach } from 'vitest';
+import { MizuSimulator } from '../../src/simulator/MizuSimulator';
+
+describe('MizuSimulator クラスのテスト', () => {
+  let simulator: MizuSimulator;
+
+  beforeEach(() => {
+    simulator = new MizuSimulator();
+  });
+
+  it('初期化時に指定された数の H が生成されること', () => {
+    simulator.init(10); // H を10個生成
+    expect(simulator['h'].length).toBe(10); // プライベート変数を直接確認
+  });
+
+  it('H がランダムな座標で初期化されること', () => {
+    simulator.init(1); // H を1個生成
+    const h = simulator['h'][0];
+    expect(h.x).toBeGreaterThanOrEqual(0);
+    expect(h.x).toBeLessThanOrEqual(simulator['cw']);
+    expect(h.y).toBeGreaterThanOrEqual(0);
+    expect(h.y).toBeLessThanOrEqual(simulator['ch']);
+  });
+
+  it('フレームの描画がエラーなく実行されること', () => {
+    simulator.init(5); // H を5個生成
+    expect(() => simulator.renderFrame()).not.toThrow(); // 描画がエラーをスローしない
+  });
+
+  it('スケール係数が正しく計算されること', () => {
+    // 環境によって異なるスケール値の確認
+    Object.defineProperty(simulator, 'cw', { value: 500 }); // 横幅500でテスト
+    expect(simulator.getScale()).toBe(1.0);
+
+    Object.defineProperty(simulator, 'cw', { value: 800 }); // 横幅800でテスト
+    expect(simulator.getScale()).toBe(1.2);
+
+    Object.defineProperty(simulator, 'cw', { value: 1300 }); // 横幅1300でテスト
+    expect(simulator.getScale()).toBe(1.5);
+  });
+});