diff --git a/src/config/marbleConfig.ts b/src/config/marbleConfig.ts index 387208b..dd9847b 100644 --- a/src/config/marbleConfig.ts +++ b/src/config/marbleConfig.ts @@ -9,7 +9,8 @@ export const MARBLE_CONFIG = { size: { base: 192, min: 96, - maxScreenRatio: 0.25, + marbleCount: 19, + marbleArea: 0.5, }, // Marble initial speed configuration @@ -57,4 +58,3 @@ export const MARBLE_CONFIG = { } as const; export const AVATAR_BASE_URL = "https://avatar.awfufu.com/qq/"; - diff --git a/src/utils/marbleFactory.ts b/src/utils/marbleFactory.ts index 5e5f049..1a0ac84 100644 --- a/src/utils/marbleFactory.ts +++ b/src/utils/marbleFactory.ts @@ -17,10 +17,11 @@ export class MarbleFactory { } // Calculate marble size (responsive) - private calculateMarbleSize(): number { - const { base, min, maxScreenRatio } = MARBLE_CONFIG.size; - const quarter = - Math.min(window.innerWidth, window.innerHeight) * maxScreenRatio; + public calculateMarbleSize(): number { + const { base, min, marbleCount, marbleArea } = MARBLE_CONFIG.size; + const fieldArea = this.fieldWidth * this.fieldHeight; + const areaPerMarble = (fieldArea * marbleArea) / marbleCount; + const quarter = Math.sqrt((4 * areaPerMarble) / Math.PI); const capped = Math.min(base, quarter || base); return Math.max(min, Math.floor(capped)) * this.zoomLevel; } diff --git a/src/utils/marbleSystem.ts b/src/utils/marbleSystem.ts index 48b5e29..66e6707 100644 --- a/src/utils/marbleSystem.ts +++ b/src/utils/marbleSystem.ts @@ -291,7 +291,7 @@ export class MarbleSystem { // Update marble size (zoom) public updateMarbleSize(zoomLevel: number): void { this.factory.setZoomLevel(zoomLevel); - const size = this.calculateMarbleSize(zoomLevel); + const size = this.factory.calculateMarbleSize(); const radius = size / 2; for (const m of this.marbles) { @@ -304,15 +304,6 @@ export class MarbleSystem { } } - // Calculate marble size - private calculateMarbleSize(zoomLevel: number): number { - const { base, min, maxScreenRatio } = MARBLE_CONFIG.size; - const quarter = - Math.min(window.innerWidth, window.innerHeight) * maxScreenRatio; - const capped = Math.min(base, quarter || base); - return Math.max(min, Math.floor(capped)) * zoomLevel; - } - /** * Request device motion permission */