sendnrw/misskey
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(drop-and-fusion): レンダリングや効果音に関する関心をエンジンから分離

Browse Source
This commit is contained in:
syuilo
2024-01-13 11:43:13 +09:00
parent b13410df02
commit c33f56e3ed
2 changed files with 426 additions and 323 deletions
Download Patch File Download Diff File Expand all files Collapse all files

339
packages/frontend/src/scripts/drop-and-fusion-engine.ts
View File

@@ -15,11 +15,6 @@ export type Mono = {
shape: 'circle' | 'rectangle';
score: number;
dropCandidate: boolean;
sfxPitch: number;
img: string;
imgSizeX: number;
imgSizeY: number;
spriteScale: number;
};
type Log = {
@@ -34,16 +29,266 @@ type Log = {
operation: 'surrender';
};
const NORMAL_BASE_SIZE = 30;
const NORAML_MONOS: Mono[] = [{
id: '9377076d-c980-4d83-bdaf-175bc58275b7',
level: 10,
sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 512,
dropCandidate: false,
}, {
id: 'be9f38d2-b267-4b1a-b420-904e22e80568',
level: 9,
sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 256,
dropCandidate: false,
}, {
id: 'beb30459-b064-4888-926b-f572e4e72e0c',
level: 8,
sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 128,
dropCandidate: false,
}, {
id: 'feab6426-d9d8-49ae-849c-048cdbb6cdf0',
level: 7,
sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 64,
dropCandidate: false,
}, {
id: 'd6d8fed6-6d18-4726-81a1-6cf2c974df8a',
level: 6,
sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 32,
dropCandidate: false,
}, {
id: '249c728e-230f-4332-bbbf-281c271c75b2',
level: 5,
sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 16,
dropCandidate: true,
}, {
id: '23d67613-d484-4a93-b71e-3e81b19d6186',
level: 4,
sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 8,
dropCandidate: true,
}, {
id: '3cbd0add-ad7d-4685-bad0-29f6dddc0b99',
level: 3,
sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25,
shape: 'circle',
score: 4,
dropCandidate: true,
}, {
id: '8f86d4f4-ee02-41bf-ad38-1ce0ae457fb5',
level: 2,
sizeX: NORMAL_BASE_SIZE * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25,
shape: 'circle',
score: 2,
dropCandidate: true,
}, {
id: '64ec4add-ce39-42b4-96cb-33908f3f118d',
level: 1,
sizeX: NORMAL_BASE_SIZE,
sizeY: NORMAL_BASE_SIZE,
shape: 'circle',
score: 1,
dropCandidate: true,
}];
const YEN_BASE_SIZE = 30;
const YEN_SATSU_BASE_SIZE = 70;
const YEN_MONOS: Mono[] = [{
id: '880f9bd9-802f-4135-a7e1-fd0e0331f726',
level: 10,
sizeX: (YEN_SATSU_BASE_SIZE * 2) * 1.25 * 1.25 * 1.25,
sizeY: YEN_SATSU_BASE_SIZE * 1.25 * 1.25 * 1.25,
shape: 'rectangle',
score: 10000,
dropCandidate: false,
}, {
id: 'e807beb6-374a-4314-9cc2-aa5f17d96b6b',
level: 9,
sizeX: (YEN_SATSU_BASE_SIZE * 2) * 1.25 * 1.25,
sizeY: YEN_SATSU_BASE_SIZE * 1.25 * 1.25,
shape: 'rectangle',
score: 5000,
dropCandidate: false,
}, {
id: '033445b7-8f90-4fc9-beca-71a9e87cb530',
level: 8,
sizeX: (YEN_SATSU_BASE_SIZE * 2) * 1.25,
sizeY: YEN_SATSU_BASE_SIZE * 1.25,
shape: 'rectangle',
score: 2000,
dropCandidate: false,
}, {
id: '410a09ec-5f7f-46f6-b26f-cbca4ccbd091',
level: 7,
sizeX: YEN_SATSU_BASE_SIZE * 2,
sizeY: YEN_SATSU_BASE_SIZE,
shape: 'rectangle',
score: 1000,
dropCandidate: false,
}, {
id: '2aae82bc-3fa4-49ad-a6b5-94d888e809f5',
level: 6,
sizeX: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 500,
dropCandidate: false,
}, {
id: 'a619bd67-d08f-4cc0-8c7e-c8072a4950cd',
level: 5,
sizeX: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 100,
dropCandidate: true,
}, {
id: 'c1c5d8e4-17d6-4455-befd-12154d731faa',
level: 4,
sizeX: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25,
sizeY: YEN_BASE_SIZE * 1.25 * 1.25 * 1.25,
shape: 'circle',
score: 50,
dropCandidate: true,
}, {
id: '7082648c-e428-44c4-887a-25c07a8ebdd5',
level: 3,
sizeX: YEN_BASE_SIZE * 1.25 * 1.25,
sizeY: YEN_BASE_SIZE * 1.25 * 1.25,
shape: 'circle',
score: 10,
dropCandidate: true,
}, {
id: '0d8d40d5-e6e0-4d26-8a95-b8d842363379',
level: 2,
sizeX: YEN_BASE_SIZE * 1.25,
sizeY: YEN_BASE_SIZE * 1.25,
shape: 'circle',
score: 5,
dropCandidate: true,
}, {
id: '9dec1b38-d99d-40de-8288-37367b983d0d',
level: 1,
sizeX: YEN_BASE_SIZE,
sizeY: YEN_BASE_SIZE,
shape: 'circle',
score: 1,
dropCandidate: true,
}];
const SQUARE_BASE_SIZE = 28;
const SQUARE_MONOS: Mono[] = [{
id: 'f75fd0ba-d3d4-40a4-9712-b470e45b0525',
level: 10,
sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'rectangle',
score: 512,
dropCandidate: false,
}, {
id: '7b70f4af-1c01-45fd-af72-61b1f01e03d1',
level: 9,
sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'rectangle',
score: 256,
dropCandidate: false,
}, {
id: '41607ef3-b6d6-4829-95b6-3737bf8bb956',
level: 8,
sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'rectangle',
score: 128,
dropCandidate: false,
}, {
id: '8a8310d2-0374-460f-bb50-ca9cd3ee3416',
level: 7,
sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'rectangle',
score: 64,
dropCandidate: false,
}, {
id: '1092e069-fe1a-450b-be97-b5d477ec398c',
level: 6,
sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'rectangle',
score: 32,
dropCandidate: false,
}, {
id: '2294734d-7bb8-4781-bb7b-ef3820abf3d0',
level: 5,
sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25,
shape: 'rectangle',
score: 16,
dropCandidate: true,
}, {
id: 'ea8a61af-e350-45f7-ba6a-366fcd65692a',
level: 4,
sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25,
shape: 'rectangle',
score: 8,
dropCandidate: true,
}, {
id: 'd0c74815-fc1c-4fbe-9953-c92e4b20f919',
level: 3,
sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25,
shape: 'rectangle',
score: 4,
dropCandidate: true,
}, {
id: 'd8fbd70e-611d-402d-87da-1a7fd8cd2c8d',
level: 2,
sizeX: SQUARE_BASE_SIZE * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25,
shape: 'rectangle',
score: 2,
dropCandidate: true,
}, {
id: '35e476ee-44bd-4711-ad42-87be245d3efd',
level: 1,
sizeX: SQUARE_BASE_SIZE,
sizeY: SQUARE_BASE_SIZE,
shape: 'rectangle',
score: 1,
dropCandidate: true,
}];
export class DropAndFusionGame extends EventEmitter<{
changeScore: (newScore: number) => void;
changeCombo: (newCombo: number) => void;
changeStock: (newStock: { id: string; mono: Mono }[]) => void;
changeHolding: (newHolding: { id: string; mono: Mono } | null) => void;
dropped: (x: number) => void;
fusioned: (x: number, y: number, scoreDelta: number) => void;
fusioned: (x: number, y: number, nextMono: Mono | null, scoreDelta: number) => void;
collision: (energy: number, bodyA: Matter.Body, bodyB: Matter.Body) => void;
monoAdded: (mono: Mono) => void;
gameOver: () => void;
sfx(type: string, params: { volume: number; pan: number; pitch: number; }): void;
}> {
private PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
private COMBO_INTERVAL = 60; // frame
@@ -60,8 +305,7 @@ export class DropAndFusionGame extends EventEmitter<{
private tickCallbackQueue: { frame: number; callback: () => void; }[] = [];
private overflowCollider: Matter.Body;
private isGameOver = false;
private monoDefinitions: Mono[] = [];
private hasComboBonus = true;
private gameMode: 'normal' | 'yen' | 'square';
private rng: () => number;
private logs: Log[] = [];
private replaying = false;
@@ -84,6 +328,17 @@ export class DropAndFusionGame extends EventEmitter<{
private stock: { id: string; mono: Mono }[] = [];
private holding: { id: string; mono: Mono } | null = null;
private get monoDefinitions() {
switch (this.gameMode) {
case 'normal':
return NORAML_MONOS;
case 'yen':
return YEN_MONOS;
case 'square':
return SQUARE_MONOS;
}
}
private _combo = 0;
private get combo() {
return this._combo;
@@ -102,22 +357,26 @@ export class DropAndFusionGame extends EventEmitter<{
this.emit('changeScore', value);
}
private getMonoRenderOptions: null | ((mono: Mono) => Partial<Matter.IBodyRenderOptions>) = null;
public replayPlaybackRate = 1;
constructor(env: {
monoDefinitions: Mono[];
seed: string;
hasComboBonus: boolean;
gameMode: DropAndFusionGame['gameMode'];
replaying?: boolean;
getMonoRenderOptions?: (mono: Mono) => Partial<Matter.IBodyRenderOptions>;
}) {
super();
this.replaying = !!env.replaying;
this.monoDefinitions = env.monoDefinitions;
this.hasComboBonus = env.hasComboBonus;
this.rng = seedrandom(env.seed);
//#region BIND
this.tick = this.tick.bind(this);
//#endregion
this.replaying = !!env.replaying;
this.gameMode = env.gameMode;
this.getMonoRenderOptions = env.getMonoRenderOptions ?? null;
this.rng = seedrandom(env.seed);
this.engine = Matter.Engine.create({
constraintIterations: 2 * this.PHYSICS_QUALITY_FACTOR,
@@ -182,13 +441,7 @@ export class DropAndFusionGame extends EventEmitter<{
frictionStatic: 5,
slop: 1.0,
//mass: 0,
render: {
sprite: {
texture: mono.img,
xScale: (mono.sizeX / mono.imgSizeX) * mono.spriteScale,
yScale: (mono.sizeY / mono.imgSizeY) * mono.spriteScale,
},
},
render: this.getMonoRenderOptions ? this.getMonoRenderOptions(mono) : undefined,
};
if (mono.shape === 'circle') {
return Matter.Bodies.circle(x, y, mono.sizeX / 2, options);
@@ -217,7 +470,7 @@ export class DropAndFusionGame extends EventEmitter<{
Matter.Composite.remove(this.engine.world, [bodyA, bodyB]);
const currentMono = this.monoDefinitions.find(y => y.id === bodyA.label)!;
const nextMono = this.monoDefinitions.find(x => x.level === currentMono.level + 1);
const nextMono = this.monoDefinitions.find(x => x.level === currentMono.level + 1) ?? null;
if (nextMono) {
const body = this.createBody(nextMono, newX, newY);
@@ -231,28 +484,17 @@ export class DropAndFusionGame extends EventEmitter<{
},
});
const comboBonus = this.hasComboBonus ? 1 + ((this.combo - 1) / 5) : 1;
const additionalScore = Math.round(currentMono.score * comboBonus);
this.score += additionalScore;
this.emit('monoAdded', nextMono);
this.emit('fusioned', newX, newY, additionalScore);
const panV = newX - this.PLAYAREA_MARGIN;
const panW = this.GAME_WIDTH - this.PLAYAREA_MARGIN - this.PLAYAREA_MARGIN;
const pan = ((panV / panW) - 0.5) * 2;
this.emit('sfx', 'fusion', { volume: 1, pan, pitch: nextMono.sfxPitch });
} else {
// nop
}
const comboBonus = this.gameMode === 'yen' ? 1 : 1 + ((this.combo - 1) / 5);
const additionalScore = Math.round(currentMono.score * comboBonus);
this.score += additionalScore;
this.emit('fusioned', newX, newY, nextMono, additionalScore);
}
private onCollision(event: Matter.IEventCollision<Matter.Engine>) {
const minCollisionEnergyForSound = 2.5;
const maxCollisionEnergyForSound = 9;
const soundPitchMax = 4;
const soundPitchMin = 0.5;
for (const pairs of event.pairs) {
const { bodyA, bodyB } = pairs;
@@ -277,6 +519,8 @@ export class DropAndFusionGame extends EventEmitter<{
});
}
} else {
const energy = pairs.collision.depth;
if (bodyA.label === '_overflow_' || bodyB.label === '_overflow_') continue;
if (bodyA.label !== '_wall_' && bodyB.label !== '_wall_') {
@@ -284,18 +528,7 @@ export class DropAndFusionGame extends EventEmitter<{
if (!this.gameOverReadyBodyIds.includes(bodyB.id)) this.gameOverReadyBodyIds.push(bodyB.id);
}
const energy = pairs.collision.depth;
if (energy > minCollisionEnergyForSound) {
const volume = (Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4;
const panV =
bodyA.label === '_wall_' ? bodyB.position.x - this.PLAYAREA_MARGIN :
bodyB.label === '_wall_' ? bodyA.position.x - this.PLAYAREA_MARGIN :
((bodyA.position.x + bodyB.position.x) / 2) - this.PLAYAREA_MARGIN;
const panW = this.GAME_WIDTH - this.PLAYAREA_MARGIN - this.PLAYAREA_MARGIN;
const pan = ((panV / panW) - 0.5) * 2;
const pitch = soundPitchMin + ((soundPitchMax - soundPitchMin) * (1 - (Math.min(10, energy) / 10)));
this.emit('sfx', 'collision', { volume, pan, pitch });
}
this.emit('collision', energy, bodyA, bodyB);
}
}
}