summaryrefslogtreecommitdiff
path: root/packages/frontend/src/scripts
diff options
context:
space:
mode:
Diffstat (limited to 'packages/frontend/src/scripts')
-rw-r--r--packages/frontend/src/scripts/drop-and-fusion-engine.ts424
-rw-r--r--packages/frontend/src/scripts/sound.ts1
2 files changed, 157 insertions, 268 deletions
diff --git a/packages/frontend/src/scripts/drop-and-fusion-engine.ts b/packages/frontend/src/scripts/drop-and-fusion-engine.ts
index d64c6015a5..41af9cb7a4 100644
--- a/packages/frontend/src/scripts/drop-and-fusion-engine.ts
+++ b/packages/frontend/src/scripts/drop-and-fusion-engine.ts
@@ -6,7 +6,6 @@
import { EventEmitter } from 'eventemitter3';
import * as Matter from 'matter-js';
import seedrandom from 'seedrandom';
-import * as sound from '@/scripts/sound.js';
export type Mono = {
id: string;
@@ -33,47 +32,48 @@ type Log = {
operation: 'surrender';
};
-// TODO: インスタンスを作り直さなくてもゲームをリスタートできるようにする
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: () => void;
+ dropped: (x: number) => void;
fusioned: (x: number, y: number, scoreDelta: number) => 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
+ public readonly GAME_VERSION = 1;
+ public readonly GAME_WIDTH = 450;
+ public readonly GAME_HEIGHT = 600;
public readonly DROP_INTERVAL = 500;
public readonly PLAYAREA_MARGIN = 25;
private STOCK_MAX = 4;
private TICK_DELTA = 1000 / 60; // 60fps
- private loaded = false;
- private frame = 0;
- private engine: Matter.Engine;
- private render: Matter.Render;
- private tickRaf: ReturnType<typeof requestAnimationFrame> | null = null;
+
+ public frame = 0;
+ public engine: Matter.Engine;
private tickCallbackQueue: { frame: number; callback: () => void; }[] = [];
private overflowCollider: Matter.Body;
private isGameOver = false;
- private gameWidth: number;
- private gameHeight: number;
private monoDefinitions: Mono[] = [];
- private monoTextures: Record<string, Blob> = {};
- private monoTextureUrls: Record<string, string> = {};
private rng: () => number;
private logs: Log[] = [];
private replaying = false;
- private sfxVolume = 1;
-
/**
* フィールドに出ていて、かつ合体の対象となるアイテム
*/
private activeBodyIds: Matter.Body['id'][] = [];
+ /**
+ * fusion予約アイテムのペア
+ * TODO: これらのモノは光らせるなどの演出をすると視覚的に楽しそう
+ */
+ private fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
+
private latestDroppedBodyId: Matter.Body['id'] | null = null;
private latestDroppedAt = 0;
@@ -99,30 +99,16 @@ export class DropAndFusionGame extends EventEmitter<{
this.emit('changeScore', value);
}
- private comboIntervalId: number | null = null;
-
public replayPlaybackRate = 1;
- constructor(opts: {
- canvas: HTMLCanvasElement;
- width: number;
- height: number;
- monoDefinitions: Mono[];
- seed: string;
- sfxVolume?: number;
- }) {
+ constructor(env: { monoDefinitions: Mono[]; seed: string; replaying?: boolean }) {
super();
- this.tick = this.tick.bind(this);
-
- this.gameWidth = opts.width;
- this.gameHeight = opts.height;
- this.monoDefinitions = opts.monoDefinitions;
- this.rng = seedrandom(opts.seed);
+ this.replaying = !!env.replaying;
+ this.monoDefinitions = env.monoDefinitions;
+ this.rng = seedrandom(env.seed);
- if (opts.sfxVolume) {
- this.sfxVolume = opts.sfxVolume;
- }
+ this.tick = this.tick.bind(this);
this.engine = Matter.Engine.create({
constraintIterations: 2 * this.PHYSICS_QUALITY_FACTOR,
@@ -138,22 +124,6 @@ export class DropAndFusionGame extends EventEmitter<{
enableSleeping: false,
});
- this.render = Matter.Render.create({
- engine: this.engine,
- canvas: opts.canvas,
- options: {
- width: this.gameWidth,
- height: this.gameHeight,
- background: 'transparent', // transparent to hide
- wireframeBackground: 'transparent', // transparent to hide
- wireframes: false,
- showSleeping: false,
- pixelRatio: Math.max(2, window.devicePixelRatio),
- },
- });
-
- Matter.Render.run(this.render);
-
this.engine.world.bodies = [];
//#region walls
@@ -170,13 +140,13 @@ export class DropAndFusionGame extends EventEmitter<{
const thickness = 100;
Matter.Composite.add(this.engine.world, [
- Matter.Bodies.rectangle(this.gameWidth / 2, this.gameHeight + (thickness / 2) - this.PLAYAREA_MARGIN, this.gameWidth, thickness, WALL_OPTIONS),
- Matter.Bodies.rectangle(this.gameWidth + (thickness / 2) - this.PLAYAREA_MARGIN, this.gameHeight / 2, thickness, this.gameHeight, WALL_OPTIONS),
- Matter.Bodies.rectangle(-((thickness / 2) - this.PLAYAREA_MARGIN), this.gameHeight / 2, thickness, this.gameHeight, WALL_OPTIONS),
+ Matter.Bodies.rectangle(this.GAME_WIDTH / 2, this.GAME_HEIGHT + (thickness / 2) - this.PLAYAREA_MARGIN, this.GAME_WIDTH, thickness, WALL_OPTIONS),
+ Matter.Bodies.rectangle(this.GAME_WIDTH + (thickness / 2) - this.PLAYAREA_MARGIN, this.GAME_HEIGHT / 2, thickness, this.GAME_HEIGHT, WALL_OPTIONS),
+ Matter.Bodies.rectangle(-((thickness / 2) - this.PLAYAREA_MARGIN), this.GAME_HEIGHT / 2, thickness, this.GAME_HEIGHT, WALL_OPTIONS),
]);
//#endregion
- this.overflowCollider = Matter.Bodies.rectangle(this.gameWidth / 2, 0, this.gameWidth, 200, {
+ this.overflowCollider = Matter.Bodies.rectangle(this.GAME_WIDTH / 2, 0, this.GAME_WIDTH, 200, {
isStatic: true,
isSensor: true,
render: {
@@ -185,12 +155,10 @@ export class DropAndFusionGame extends EventEmitter<{
},
});
Matter.Composite.add(this.engine.world, this.overflowCollider);
+ }
- // fit the render viewport to the scene
- Matter.Render.lookAt(this.render, {
- min: { x: 0, y: 0 },
- max: { x: this.gameWidth, y: this.gameHeight },
- });
+ private msToFrame(ms: number) {
+ return Math.round(ms / this.TICK_DELTA);
}
private createBody(mono: Mono, x: number, y: number) {
@@ -246,7 +214,7 @@ export class DropAndFusionGame extends EventEmitter<{
// 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする
this.tickCallbackQueue.push({
- frame: this.frame + 6,
+ frame: this.frame + this.msToFrame(100),
callback: () => {
this.activeBodyIds.push(body.id);
},
@@ -256,29 +224,69 @@ export class DropAndFusionGame extends EventEmitter<{
const additionalScore = Math.round(currentMono.score * comboBonus);
this.score += additionalScore;
- // TODO: 効果音再生はコンポーネント側の責務なので移動するべき？
- const panV = newX - this.PLAYAREA_MARGIN;
- const panW = this.gameWidth - this.PLAYAREA_MARGIN - this.PLAYAREA_MARGIN;
- const pan = ((panV / panW) - 0.5) * 2;
- sound.playUrl('/client-assets/drop-and-fusion/bubble2.mp3', {
- volume: this.sfxVolume,
- pan,
- playbackRate: nextMono.sfxPitch * this.replayPlaybackRate,
- });
-
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 {
- //const VELOCITY = 30;
- //for (let i = 0; i < 10; i++) {
- // const body = createBody(FRUITS.find(x => x.level === (1 + Math.floor(this.rng() * 3)))!, x + ((this.rng() * VELOCITY) - (VELOCITY / 2)), y + ((this.rng() * VELOCITY) - (VELOCITY / 2)));
- // Matter.Composite.add(world, body);
- // bodies.push(body);
- //}
- //sound.playUrl({
- // type: 'syuilo/bubble2',
- // volume: this.sfxVolume,
- //});
+ // nop
+ }
+ }
+
+ 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;
+
+ if (bodyA.id === this.overflowCollider.id || bodyB.id === this.overflowCollider.id) {
+ if (bodyA.id === this.latestDroppedBodyId || bodyB.id === this.latestDroppedBodyId) {
+ continue;
+ }
+ this.gameOver();
+ break;
+ }
+
+ const shouldFusion = (bodyA.label === bodyB.label) &&
+ !this.fusionReservedPairs.some(x =>
+ x.bodyA.id === bodyA.id ||
+ x.bodyA.id === bodyB.id ||
+ x.bodyB.id === bodyA.id ||
+ x.bodyB.id === bodyB.id);
+
+ if (shouldFusion) {
+ if (this.activeBodyIds.includes(bodyA.id) && this.activeBodyIds.includes(bodyB.id)) {
+ this.fusion(bodyA, bodyB);
+ } else {
+ this.fusionReservedPairs.push({ bodyA, bodyB });
+ this.tickCallbackQueue.push({
+ frame: this.frame + this.msToFrame(100),
+ callback: () => {
+ this.fusionReservedPairs = this.fusionReservedPairs.filter(x => x.bodyA.id !== bodyA.id && x.bodyB.id !== bodyB.id);
+ this.fusion(bodyA, bodyB);
+ },
+ });
+ }
+ } else {
+ const energy = pairs.collision.depth;
+ if (energy > minCollisionEnergyForSound) {
+ const volume = (Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4;
+ const panV =
+ pairs.bodyA.label === '_wall_' ? bodyB.position.x - this.PLAYAREA_MARGIN :
+ pairs.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 });
+ }
+ }
}
}
@@ -293,50 +301,10 @@ export class DropAndFusionGame extends EventEmitter<{
private gameOver() {
this.isGameOver = true;
- if (this.tickRaf) window.cancelAnimationFrame(this.tickRaf);
- this.tickRaf = null;
this.emit('gameOver');
-
- // TODO: 効果音再生はコンポーネント側の責務なので移動するべき？
- sound.playUrl('/client-assets/drop-and-fusion/gameover.mp3', {
- volume: this.sfxVolume,
- });
- }
-
- /** テクスチャをすべてキャッシュする */
- private async loadMonoTextures() {
- async function loadSingleMonoTexture(mono: Mono, game: DropAndFusionGame) {
- // Matter-js内にキャッシュがある場合はスキップ
- if (game.render.textures[mono.img]) return;
-
- let src = mono.img;
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
- if (game.monoTextureUrls[mono.img]) {
- src = game.monoTextureUrls[mono.img];
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
- } else if (game.monoTextures[mono.img]) {
- src = URL.createObjectURL(game.monoTextures[mono.img]);
- game.monoTextureUrls[mono.img] = src;
- } else {
- const res = await fetch(mono.img);
- const blob = await res.blob();
- game.monoTextures[mono.img] = blob;
- src = URL.createObjectURL(blob);
- game.monoTextureUrls[mono.img] = src;
- }
-
- const image = new Image();
- image.src = src;
- game.render.textures[mono.img] = image;
- }
-
- return Promise.all(this.monoDefinitions.map(x => loadSingleMonoTexture(x, this)));
}
- public start(logs?: Log[]) {
- if (!this.loaded) throw new Error('game is not loaded yet');
- if (logs) this.replaying = true;
-
+ public start() {
for (let i = 0; i < this.STOCK_MAX; i++) {
this.stock.push({
id: this.rng().toString(),
@@ -345,118 +313,20 @@ export class DropAndFusionGame extends EventEmitter<{
}
this.emit('changeStock', this.stock);
- // TODO: fusion予約状態のアイテムは光らせるなどの演出をすると楽しそう
- let fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
-
- const minCollisionEnergyForSound = 2.5;
- const maxCollisionEnergyForSound = 9;
- const soundPitchMax = 4;
- const soundPitchMin = 0.5;
-
- Matter.Events.on(this.engine, 'collisionStart', (event) => {
- for (const pairs of event.pairs) {
- const { bodyA, bodyB } = pairs;
- if (bodyA.id === this.overflowCollider.id || bodyB.id === this.overflowCollider.id) {
- if (bodyA.id === this.latestDroppedBodyId || bodyB.id === this.latestDroppedBodyId) {
- continue;
- }
- this.gameOver();
- break;
- }
- const shouldFusion = (bodyA.label === bodyB.label) && !fusionReservedPairs.some(x => x.bodyA.id === bodyA.id || x.bodyA.id === bodyB.id || x.bodyB.id === bodyA.id || x.bodyB.id === bodyB.id);
- if (shouldFusion) {
- if (this.activeBodyIds.includes(bodyA.id) && this.activeBodyIds.includes(bodyB.id)) {
- this.fusion(bodyA, bodyB);
- } else {
- fusionReservedPairs.push({ bodyA, bodyB });
- this.tickCallbackQueue.push({
- frame: this.frame + 6,
- callback: () => {
- fusionReservedPairs = fusionReservedPairs.filter(x => x.bodyA.id !== bodyA.id && x.bodyB.id !== bodyB.id);
- this.fusion(bodyA, bodyB);
- },
- });
- }
- } else {
- const energy = pairs.collision.depth;
- if (energy > minCollisionEnergyForSound) {
- // TODO: 効果音再生はコンポーネント側の責務なので移動するべき？
- const vol = ((Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4) * this.sfxVolume;
- const panV =
- pairs.bodyA.label === '_wall_' ? bodyB.position.x - this.PLAYAREA_MARGIN :
- pairs.bodyB.label === '_wall_' ? bodyA.position.x - this.PLAYAREA_MARGIN :
- ((bodyA.position.x + bodyB.position.x) / 2) - this.PLAYAREA_MARGIN;
- const panW = this.gameWidth - this.PLAYAREA_MARGIN - this.PLAYAREA_MARGIN;
- const pan = ((panV / panW) - 0.5) * 2;
- const pitch = soundPitchMin + ((soundPitchMax - soundPitchMin) * (1 - (Math.min(10, energy) / 10)));
- sound.playUrl('/client-assets/drop-and-fusion/poi1.mp3', {
- volume: vol,
- pan,
- playbackRate: pitch * this.replayPlaybackRate,
- });
- }
- }
- }
- });
-
- if (logs) {
- const playTick = () => {
- for (let i = 0; i < this.replayPlaybackRate; i++) {
- this.frame++;
- if (this.latestFusionedAt < this.frame - this.COMBO_INTERVAL) {
- this.combo = 0;
- }
- const log = logs.find(x => x.frame === this.frame - 1);
- if (log) {
- switch (log.operation) {
- case 'drop': {
- this.drop(log.x);
- break;
- }
- case 'hold': {
- this.hold();
- break;
- }
- case 'surrender': {
- this.surrender();
- break;
- }
- default:
- break;
- }
- }
- this.tickCallbackQueue = this.tickCallbackQueue.filter(x => {
- if (x.frame === this.frame) {
- x.callback();
- return false;
- } else {
- return true;
- }
- });
-
- Matter.Engine.update(this.engine, this.TICK_DELTA);
- }
-
- if (!this.isGameOver) {
- this.tickRaf = window.requestAnimationFrame(playTick);
- }
- };
-
- playTick();
- } else {
- this.tick();
- }
+ Matter.Events.on(this.engine, 'collisionStart', this.onCollision.bind(this));
}
public getLogs() {
return this.logs;
}
- private tick() {
+ public tick() {
this.frame++;
+
if (this.latestFusionedAt < this.frame - this.COMBO_INTERVAL) {
this.combo = 0;
}
+
this.tickCallbackQueue = this.tickCallbackQueue.filter(x => {
if (x.frame === this.frame) {
x.callback();
@@ -465,35 +335,12 @@ export class DropAndFusionGame extends EventEmitter<{
return true;
}
});
+
Matter.Engine.update(this.engine, this.TICK_DELTA);
- if (!this.isGameOver) {
- this.tickRaf = window.requestAnimationFrame(this.tick);
- }
- }
- public async load() {
- await this.loadMonoTextures();
- this.loaded = true;
- }
+ const hasNextTick = !this.isGameOver;
- public setSfxVolume(volume: number) {
- this.sfxVolume = volume;
- }
-
- public getTextureImageUrl(mono: Mono) {
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
- if (this.monoTextureUrls[mono.img]) {
- return this.monoTextureUrls[mono.img];
-
- // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
- } else if (this.monoTextures[mono.img]) {
- // Gameクラス内にキャッシュがある場合はそれを使う
- const out = URL.createObjectURL(this.monoTextures[mono.img]);
- this.monoTextureUrls[mono.img] = out;
- return out;
- } else {
- return mono.img;
- }
+ return hasNextTick;
}
public getActiveMonos() {
@@ -502,6 +349,7 @@ export class DropAndFusionGame extends EventEmitter<{
public drop(_x: number) {
if (this.isGameOver) return;
+ // TODO: フレームで計算するようにすればリプレイかどうかのチェックは不要になる
if (!this.replaying && (Date.now() - this.latestDroppedAt < this.DROP_INTERVAL)) return;
const head = this.stock.shift()!;
@@ -512,7 +360,7 @@ export class DropAndFusionGame extends EventEmitter<{
this.emit('changeStock', this.stock);
const inputX = Math.round(_x);
- const x = Math.min(this.gameWidth - this.PLAYAREA_MARGIN - (head.mono.size / 2), Math.max(this.PLAYAREA_MARGIN + (head.mono.size / 2), inputX));
+ const x = Math.min(this.GAME_WIDTH - this.PLAYAREA_MARGIN - (head.mono.size / 2), Math.max(this.PLAYAREA_MARGIN + (head.mono.size / 2), inputX));
const body = this.createBody(head.mono, x, 50 + head.mono.size / 2);
this.logs.push({
frame: this.frame,
@@ -523,18 +371,8 @@ export class DropAndFusionGame extends EventEmitter<{
this.activeBodyIds.push(body.id);
this.latestDroppedBodyId = body.id;
this.latestDroppedAt = Date.now();
- this.emit('dropped');
+ this.emit('dropped', x);
this.emit('monoAdded', head.mono);
-
- // TODO: 効果音再生はコンポーネント側の責務なので移動するべき？
- const panV = x - this.PLAYAREA_MARGIN;
- const panW = this.gameWidth - this.PLAYAREA_MARGIN - this.PLAYAREA_MARGIN;
- const pan = ((panV / panW) - 0.5) * 2;
- sound.playUrl('/client-assets/drop-and-fusion/poi2.mp3', {
- volume: this.sfxVolume,
- pan,
- playbackRate: this.replayPlaybackRate,
- });
}
public hold() {
@@ -561,17 +399,69 @@ export class DropAndFusionGame extends EventEmitter<{
this.emit('changeHolding', this.holding);
this.emit('changeStock', this.stock);
}
+ }
- sound.playUrl('/client-assets/drop-and-fusion/hold.mp3', {
- volume: 0.5 * this.sfxVolume,
- });
+ public static serializeLogs(logs: Log[]) {
+ const _logs: number[][] = [];
+
+ for (let i = 0; i < logs.length; i++) {
+ const log = logs[i];
+ const frameDelta = i === 0 ? log.frame : log.frame - logs[i - 1].frame;
+
+ switch (log.operation) {
+ case 'drop':
+ _logs.push([frameDelta, 0, log.x]);
+ break;
+ case 'hold':
+ _logs.push([frameDelta, 1]);
+ break;
+ case 'surrender':
+ _logs.push([frameDelta, 2]);
+ break;
+ }
+ }
+
+ return _logs;
+ }
+
+ public static deserializeLogs(logs: number[][]) {
+ const _logs: Log[] = [];
+
+ let frame = 0;
+
+ for (const log of logs) {
+ const frameDelta = log[0];
+ frame += frameDelta;
+
+ const operation = log[1];
+
+ switch (operation) {
+ case 0:
+ _logs.push({
+ frame,
+ operation: 'drop',
+ x: log[2],
+ });
+ break;
+ case 1:
+ _logs.push({
+ frame,
+ operation: 'hold',
+ });
+ break;
+ case 2:
+ _logs.push({
+ frame,
+ operation: 'surrender',
+ });
+ break;
+ }
+ }
+
+ return _logs;
}
public dispose() {
- if (this.comboIntervalId) window.clearInterval(this.comboIntervalId);
- if (this.tickRaf) window.cancelAnimationFrame(this.tickRaf);
- this.tickRaf = null;
- Matter.Render.stop(this.render);
Matter.World.clear(this.engine.world, false);
Matter.Engine.clear(this.engine);
}
diff --git a/packages/frontend/src/scripts/sound.ts b/packages/frontend/src/scripts/sound.ts
index 05c8977ecf..9c74a8b870 100644
--- a/packages/frontend/src/scripts/sound.ts
+++ b/packages/frontend/src/scripts/sound.ts
@@ -92,7 +92,6 @@ export type OperationType = typeof operationTypes[number];
* @param options `useCache`: デフォルトは`true` 一度再生した音声はキャッシュする
*/
export async function loadAudio(url: string, options?: { useCache?: boolean; }) {
- if (_DEV_) console.log('loading audio. opts:', options);
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
if (ctx == null) {
ctx = new AudioContext();
generated by cgit v1.2.3-freya (git 2.53.0.84.g453e7b744a) at 2026-03-03 23:06:19 +0000