mirror of
https://github.com/kokonect-link/cherrypick
synced 2024-12-12 13:48:28 +09:00
Merge remote-branch 'misskey/develop'
This commit is contained in:
commit
18e92014c7
1204
packages/frontend/src/pages/drop-and-fusion.game.vue
Normal file
1204
packages/frontend/src/pages/drop-and-fusion.game.vue
Normal file
File diff suppressed because it is too large
Load Diff
File diff suppressed because it is too large
Load Diff
@ -6,7 +6,6 @@
|
|||||||
import { EventEmitter } from 'eventemitter3';
|
import { EventEmitter } from 'eventemitter3';
|
||||||
import * as Matter from 'matter-js';
|
import * as Matter from 'matter-js';
|
||||||
import seedrandom from 'seedrandom';
|
import seedrandom from 'seedrandom';
|
||||||
import * as sound from '@/scripts/sound.js';
|
|
||||||
|
|
||||||
export type Mono = {
|
export type Mono = {
|
||||||
id: string;
|
id: string;
|
||||||
@ -33,46 +32,47 @@ type Log = {
|
|||||||
operation: 'surrender';
|
operation: 'surrender';
|
||||||
};
|
};
|
||||||
|
|
||||||
|
// TODO: インスタンスを作り直さなくてもゲームをリスタートできるようにする
|
||||||
export class DropAndFusionGame extends EventEmitter<{
|
export class DropAndFusionGame extends EventEmitter<{
|
||||||
changeScore: (newScore: number) => void;
|
changeScore: (newScore: number) => void;
|
||||||
changeCombo: (newCombo: number) => void;
|
changeCombo: (newCombo: number) => void;
|
||||||
changeStock: (newStock: { id: string; mono: Mono }[]) => void;
|
changeStock: (newStock: { id: string; mono: Mono }[]) => void;
|
||||||
changeHolding: (newHolding: { id: string; mono: Mono } | null) => void;
|
changeHolding: (newHolding: { id: string; mono: Mono } | null) => void;
|
||||||
dropped: () => void;
|
dropped: (x: number) => void;
|
||||||
fusioned: (x: number, y: number, scoreDelta: number) => void;
|
fusioned: (x: number, y: number, scoreDelta: number) => void;
|
||||||
monoAdded: (mono: Mono) => void;
|
monoAdded: (mono: Mono) => void;
|
||||||
gameOver: () => void;
|
gameOver: () => void;
|
||||||
|
sfx(type: string, params: { volume: number; pan: number; pitch: number; }): void;
|
||||||
}> {
|
}> {
|
||||||
private PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
|
private PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高いがガタガタして安定しなくなる、逆に高すぎても何故か不安定になる
|
||||||
private COMBO_INTERVAL = 60; // frame
|
private COMBO_INTERVAL = 60; // frame
|
||||||
|
public readonly GAME_WIDTH = 450;
|
||||||
|
public readonly GAME_HEIGHT = 600;
|
||||||
public readonly DROP_INTERVAL = 500;
|
public readonly DROP_INTERVAL = 500;
|
||||||
public readonly PLAYAREA_MARGIN = 25;
|
public readonly PLAYAREA_MARGIN = 25;
|
||||||
private STOCK_MAX = 4;
|
private STOCK_MAX = 4;
|
||||||
private TICK_DELTA = 1000 / 60; // 60fps
|
private TICK_DELTA = 1000 / 60; // 60fps
|
||||||
private loaded = false;
|
public frame = 0;
|
||||||
private frame = 0;
|
public engine: Matter.Engine;
|
||||||
private engine: Matter.Engine;
|
|
||||||
private render: Matter.Render;
|
|
||||||
private tickRaf: ReturnType<typeof requestAnimationFrame> | null = null;
|
|
||||||
private tickCallbackQueue: { frame: number; callback: () => void; }[] = [];
|
private tickCallbackQueue: { frame: number; callback: () => void; }[] = [];
|
||||||
private overflowCollider: Matter.Body;
|
private overflowCollider: Matter.Body;
|
||||||
private isGameOver = false;
|
private isGameOver = false;
|
||||||
private gameWidth: number;
|
|
||||||
private gameHeight: number;
|
|
||||||
private monoDefinitions: Mono[] = [];
|
private monoDefinitions: Mono[] = [];
|
||||||
private monoTextures: Record<string, Blob> = {};
|
|
||||||
private monoTextureUrls: Record<string, string> = {};
|
|
||||||
private rng: () => number;
|
private rng: () => number;
|
||||||
private logs: Log[] = [];
|
private logs: Log[] = [];
|
||||||
private replaying = false;
|
private replaying = false;
|
||||||
|
|
||||||
private sfxVolume = 1;
|
|
||||||
|
|
||||||
/**
|
/**
|
||||||
* フィールドに出ていて、かつ合体の対象となるアイテム
|
* フィールドに出ていて、かつ合体の対象となるアイテム
|
||||||
*/
|
*/
|
||||||
private activeBodyIds: Matter.Body['id'][] = [];
|
private activeBodyIds: Matter.Body['id'][] = [];
|
||||||
|
|
||||||
|
/**
|
||||||
|
* fusion予約アイテムのペア
|
||||||
|
* TODO: これらのモノは光らせるなどの演出をすると視覚的に楽しそう
|
||||||
|
*/
|
||||||
|
private fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
|
||||||
|
|
||||||
private latestDroppedBodyId: Matter.Body['id'] | null = null;
|
private latestDroppedBodyId: Matter.Body['id'] | null = null;
|
||||||
|
|
||||||
private latestDroppedAt = 0;
|
private latestDroppedAt = 0;
|
||||||
@ -98,31 +98,17 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
this.emit('changeScore', value);
|
this.emit('changeScore', value);
|
||||||
}
|
}
|
||||||
|
|
||||||
private comboIntervalId: number | null = null;
|
|
||||||
|
|
||||||
public replayPlaybackRate = 1;
|
public replayPlaybackRate = 1;
|
||||||
|
|
||||||
constructor(opts: {
|
constructor(env: { monoDefinitions: Mono[]; seed: string; replaying?: boolean }) {
|
||||||
canvas: HTMLCanvasElement;
|
|
||||||
width: number;
|
|
||||||
height: number;
|
|
||||||
monoDefinitions: Mono[];
|
|
||||||
seed: string;
|
|
||||||
sfxVolume?: number;
|
|
||||||
}) {
|
|
||||||
super();
|
super();
|
||||||
|
|
||||||
|
this.replaying = !!env.replaying;
|
||||||
|
this.monoDefinitions = env.monoDefinitions;
|
||||||
|
this.rng = seedrandom(env.seed);
|
||||||
|
|
||||||
this.tick = this.tick.bind(this);
|
this.tick = this.tick.bind(this);
|
||||||
|
|
||||||
this.gameWidth = opts.width;
|
|
||||||
this.gameHeight = opts.height;
|
|
||||||
this.monoDefinitions = opts.monoDefinitions;
|
|
||||||
this.rng = seedrandom(opts.seed);
|
|
||||||
|
|
||||||
if (opts.sfxVolume) {
|
|
||||||
this.sfxVolume = opts.sfxVolume;
|
|
||||||
}
|
|
||||||
|
|
||||||
this.engine = Matter.Engine.create({
|
this.engine = Matter.Engine.create({
|
||||||
constraintIterations: 2 * this.PHYSICS_QUALITY_FACTOR,
|
constraintIterations: 2 * this.PHYSICS_QUALITY_FACTOR,
|
||||||
positionIterations: 6 * this.PHYSICS_QUALITY_FACTOR,
|
positionIterations: 6 * this.PHYSICS_QUALITY_FACTOR,
|
||||||
@ -137,22 +123,6 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
enableSleeping: false,
|
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 = [];
|
this.engine.world.bodies = [];
|
||||||
|
|
||||||
//#region walls
|
//#region walls
|
||||||
@ -169,13 +139,13 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
|
|
||||||
const thickness = 100;
|
const thickness = 100;
|
||||||
Matter.Composite.add(this.engine.world, [
|
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.GAME_WIDTH / 2, this.GAME_HEIGHT + (thickness / 2) - this.PLAYAREA_MARGIN, this.GAME_WIDTH, thickness, WALL_OPTIONS),
|
||||||
Matter.Bodies.rectangle(this.gameWidth + (thickness / 2) - this.PLAYAREA_MARGIN, this.gameHeight / 2, thickness, this.gameHeight, 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.gameHeight / 2, thickness, this.gameHeight, WALL_OPTIONS),
|
Matter.Bodies.rectangle(-((thickness / 2) - this.PLAYAREA_MARGIN), this.GAME_HEIGHT / 2, thickness, this.GAME_HEIGHT, WALL_OPTIONS),
|
||||||
]);
|
]);
|
||||||
//#endregion
|
//#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,
|
isStatic: true,
|
||||||
isSensor: true,
|
isSensor: true,
|
||||||
render: {
|
render: {
|
||||||
@ -184,12 +154,6 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
},
|
},
|
||||||
});
|
});
|
||||||
Matter.Composite.add(this.engine.world, this.overflowCollider);
|
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 createBody(mono: Mono, x: number, y: number) {
|
private createBody(mono: Mono, x: number, y: number) {
|
||||||
@ -255,29 +219,69 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
const additionalScore = Math.round(currentMono.score * comboBonus);
|
const additionalScore = Math.round(currentMono.score * comboBonus);
|
||||||
this.score += additionalScore;
|
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('monoAdded', nextMono);
|
||||||
this.emit('fusioned', newX, newY, additionalScore);
|
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 {
|
} else {
|
||||||
//const VELOCITY = 30;
|
// nop
|
||||||
//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);
|
private onCollision(event: Matter.IEventCollision<Matter.Engine>) {
|
||||||
//}
|
const minCollisionEnergyForSound = 2.5;
|
||||||
//sound.playUrl({
|
const maxCollisionEnergyForSound = 9;
|
||||||
// type: 'syuilo/bubble2',
|
const soundPitchMax = 4;
|
||||||
// volume: this.sfxVolume,
|
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 + 6,
|
||||||
|
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 });
|
||||||
|
}
|
||||||
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
@ -292,51 +296,10 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
|
|
||||||
private gameOver() {
|
private gameOver() {
|
||||||
this.isGameOver = true;
|
this.isGameOver = true;
|
||||||
if (this.tickRaf) window.cancelAnimationFrame(this.tickRaf);
|
|
||||||
this.tickRaf = null;
|
|
||||||
this.emit('gameOver');
|
this.emit('gameOver');
|
||||||
|
|
||||||
// TODO: 効果音再生はコンポーネント側の責務なので移動するべき?
|
|
||||||
sound.playUrl('/client-assets/drop-and-fusion/gameover.mp3', {
|
|
||||||
volume: this.sfxVolume,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
/** テクスチャをすべてキャッシュする */
|
public start() {
|
||||||
private async loadMonoTextures() {
|
|
||||||
async function loadSingleMonoTexture(mono: Mono, game: DropAndFusionGame) {
|
|
||||||
// Matter-js内にキャッシュがある場合はスキップ
|
|
||||||
if (game.render.textures[mono.img]) return;
|
|
||||||
console.log('loading', mono.img);
|
|
||||||
|
|
||||||
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;
|
|
||||||
|
|
||||||
for (let i = 0; i < this.STOCK_MAX; i++) {
|
for (let i = 0; i < this.STOCK_MAX; i++) {
|
||||||
this.stock.push({
|
this.stock.push({
|
||||||
id: this.rng().toString(),
|
id: this.rng().toString(),
|
||||||
@ -345,118 +308,20 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
}
|
}
|
||||||
this.emit('changeStock', this.stock);
|
this.emit('changeStock', this.stock);
|
||||||
|
|
||||||
// TODO: fusion予約状態のアイテムは光らせるなどの演出をすると楽しそう
|
Matter.Events.on(this.engine, 'collisionStart', this.onCollision.bind(this));
|
||||||
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();
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public getLogs() {
|
public getLogs() {
|
||||||
return this.logs;
|
return this.logs;
|
||||||
}
|
}
|
||||||
|
|
||||||
private tick() {
|
public tick() {
|
||||||
this.frame++;
|
this.frame++;
|
||||||
|
|
||||||
if (this.latestFusionedAt < this.frame - this.COMBO_INTERVAL) {
|
if (this.latestFusionedAt < this.frame - this.COMBO_INTERVAL) {
|
||||||
this.combo = 0;
|
this.combo = 0;
|
||||||
}
|
}
|
||||||
|
|
||||||
this.tickCallbackQueue = this.tickCallbackQueue.filter(x => {
|
this.tickCallbackQueue = this.tickCallbackQueue.filter(x => {
|
||||||
if (x.frame === this.frame) {
|
if (x.frame === this.frame) {
|
||||||
x.callback();
|
x.callback();
|
||||||
@ -465,35 +330,12 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
return true;
|
return true;
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
|
|
||||||
Matter.Engine.update(this.engine, this.TICK_DELTA);
|
Matter.Engine.update(this.engine, this.TICK_DELTA);
|
||||||
if (!this.isGameOver) {
|
|
||||||
this.tickRaf = window.requestAnimationFrame(this.tick);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
public async load() {
|
const hasNextTick = !this.isGameOver;
|
||||||
await this.loadMonoTextures();
|
|
||||||
this.loaded = true;
|
|
||||||
}
|
|
||||||
|
|
||||||
public setSfxVolume(volume: number) {
|
return hasNextTick;
|
||||||
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;
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public getActiveMonos() {
|
public getActiveMonos() {
|
||||||
@ -502,6 +344,7 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
|
|
||||||
public drop(_x: number) {
|
public drop(_x: number) {
|
||||||
if (this.isGameOver) return;
|
if (this.isGameOver) return;
|
||||||
|
// TODO: フレームで計算するようにすればリプレイかどうかのチェックは不要になる
|
||||||
if (!this.replaying && (Date.now() - this.latestDroppedAt < this.DROP_INTERVAL)) return;
|
if (!this.replaying && (Date.now() - this.latestDroppedAt < this.DROP_INTERVAL)) return;
|
||||||
|
|
||||||
const head = this.stock.shift()!;
|
const head = this.stock.shift()!;
|
||||||
@ -512,7 +355,7 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
this.emit('changeStock', this.stock);
|
this.emit('changeStock', this.stock);
|
||||||
|
|
||||||
const inputX = Math.round(_x);
|
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);
|
const body = this.createBody(head.mono, x, 50 + head.mono.size / 2);
|
||||||
this.logs.push({
|
this.logs.push({
|
||||||
frame: this.frame,
|
frame: this.frame,
|
||||||
@ -523,18 +366,8 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
this.activeBodyIds.push(body.id);
|
this.activeBodyIds.push(body.id);
|
||||||
this.latestDroppedBodyId = body.id;
|
this.latestDroppedBodyId = body.id;
|
||||||
this.latestDroppedAt = Date.now();
|
this.latestDroppedAt = Date.now();
|
||||||
this.emit('dropped');
|
this.emit('dropped', x);
|
||||||
this.emit('monoAdded', head.mono);
|
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() {
|
public hold() {
|
||||||
@ -561,17 +394,9 @@ export class DropAndFusionGame extends EventEmitter<{
|
|||||||
this.emit('changeHolding', this.holding);
|
this.emit('changeHolding', this.holding);
|
||||||
this.emit('changeStock', this.stock);
|
this.emit('changeStock', this.stock);
|
||||||
}
|
}
|
||||||
|
|
||||||
sound.playUrl('/client-assets/drop-and-fusion/hold.mp3', {
|
|
||||||
volume: 0.5 * this.sfxVolume,
|
|
||||||
});
|
|
||||||
}
|
}
|
||||||
|
|
||||||
public dispose() {
|
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.World.clear(this.engine.world, false);
|
||||||
Matter.Engine.clear(this.engine);
|
Matter.Engine.clear(this.engine);
|
||||||
}
|
}
|
||||||
|
Loading…
Reference in New Issue
Block a user