enhance(drop-and-fusion): add new mode, some tweaks

This commit is contained in:
syuilo 2024-01-12 14:48:44 +09:00
parent be57ff4985
commit d2063df78d
18 changed files with 319 additions and 89 deletions

1
locales/index.d.ts vendored
View File

@ -1200,6 +1200,7 @@ export interface Locale {
"replay": string; "replay": string;
"replaying": string; "replaying": string;
"ranking": string; "ranking": string;
"lastNDays": string;
"_bubbleGame": { "_bubbleGame": {
"howToPlay": string; "howToPlay": string;
"_howToPlay": { "_howToPlay": {

View File

@ -1197,6 +1197,7 @@ showReplay: "リプレイを見る"
replay: "リプレイ" replay: "リプレイ"
replaying: "リプレイ中" replaying: "リプレイ中"
ranking: "ランキング" ranking: "ランキング"
lastNDays: "直近{n}日"
_bubbleGame: _bubbleGame:
howToPlay: "遊び方" howToPlay: "遊び方"

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 96 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 54 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 56 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 86 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 92 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 66 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 41 KiB

Binary file not shown.

After

Width:  |  Height:  |  Size: 59 KiB

Binary file not shown.

View File

@ -65,7 +65,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass="$style.transition_picked_move" :moveClass="$style.transition_picked_move"
mode="out-in" mode="out-in"
> >
<img v-if="currentPick" :key="currentPick.id" :src="getTextureImageUrl(currentPick.mono)" :class="$style.currentMono" :style="{ marginBottom: -((currentPick?.mono.size * viewScale) / 2) + 'px', left: -((currentPick?.mono.size * viewScale) / 2) + 'px', width: `${currentPick?.mono.size * viewScale}px` }"/> <img v-if="currentPick" :key="currentPick.id" :src="getTextureImageUrl(currentPick.mono)" :class="$style.currentMono" :style="{ marginBottom: -((currentPick?.mono.sizeY * viewScale) / 2) + 'px', left: -((currentPick?.mono.sizeX * viewScale) / 2) + 'px', width: `${currentPick?.mono.sizeX * viewScale}px` }"/>
</Transition> </Transition>
<template v-if="dropReady && currentPick"> <template v-if="dropReady && currentPick">
<img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentMonoArrow"/> <img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentMonoArrow"/>
@ -75,7 +75,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<div v-if="isGameOver && !replaying" :class="$style.gameOverLabel"> <div v-if="isGameOver && !replaying" :class="$style.gameOverLabel">
<div class="_gaps_s"> <div class="_gaps_s">
<img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/> <img src="/client-assets/drop-and-fusion/gameover.png" style="width: 200px; max-width: 100%; display: block; margin: auto; margin-bottom: -5px;"/>
<div>SCORE: <MkNumber :value="score"/></div> <div>SCORE: <MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</div>
<div>MAX CHAIN: <MkNumber :value="maxCombo"/></div> <div>MAX CHAIN: <MkNumber :value="maxCombo"/></div>
</div> </div>
</div> </div>
@ -90,8 +90,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.frameInner"> <div :class="$style.frameInner">
<div class="_buttonsCenter"> <div class="_buttonsCenter">
<MkButton @click="endReplay"><i class="ti ti-player-stop"></i> END</MkButton> <MkButton @click="endReplay"><i class="ti ti-player-stop"></i> END</MkButton>
<MkButton :primary="replayPlaybackRate === 2" @click="replayPlaybackRate = replayPlaybackRate === 2 ? 1 : 2"><i class="ti ti-player-track-next"></i> x2</MkButton>
<MkButton :primary="replayPlaybackRate === 4" @click="replayPlaybackRate = replayPlaybackRate === 4 ? 1 : 4"><i class="ti ti-player-track-next"></i> x4</MkButton> <MkButton :primary="replayPlaybackRate === 4" @click="replayPlaybackRate = replayPlaybackRate === 4 ? 1 : 4"><i class="ti ti-player-track-next"></i> x4</MkButton>
<MkButton :primary="replayPlaybackRate === 16" @click="replayPlaybackRate = replayPlaybackRate === 16 ? 1 : 16"><i class="ti ti-player-track-next"></i> x16</MkButton>
</div> </div>
</div> </div>
</div> </div>
@ -108,8 +108,8 @@ SPDX-License-Identifier: AGPL-3.0-only
<div style="display: flex;"> <div style="display: flex;">
<div :class="$style.frame" style="flex: 1; margin-right: 10px;"> <div :class="$style.frame" style="flex: 1; margin-right: 10px;">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
<div>SCORE: <b><MkNumber :value="score"/></b> (MAX CHAIN: <b><MkNumber :value="maxCombo"/></b>)</div> <div>SCORE: <b><MkNumber :value="score"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b></div>
<div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/></b><b v-else>-</b></div> <div>HIGH SCORE: <b v-if="highScore"><MkNumber :value="highScore"/>{{ gameMode === 'yen' ? '円' : 'pt' }}</b><b v-else>-</b></div>
</div> </div>
</div> </div>
<div :class="[$style.frame]" style="margin-left: auto;"> <div :class="[$style.frame]" style="margin-left: auto;">
@ -167,230 +167,404 @@ const NORMAL_BASE_SIZE = 30;
const NORAML_MONOS: Mono[] = [{ const NORAML_MONOS: Mono[] = [{
id: '9377076d-c980-4d83-bdaf-175bc58275b7', id: '9377076d-c980-4d83-bdaf-175bc58275b7',
level: 10, level: 10,
size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'circle',
score: 512, score: 512,
dropCandidate: false, dropCandidate: false,
sfxPitch: 0.25, sfxPitch: 0.25,
img: '/client-assets/drop-and-fusion/exploding_head.png', img: '/client-assets/drop-and-fusion/exploding_head.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'be9f38d2-b267-4b1a-b420-904e22e80568', id: 'be9f38d2-b267-4b1a-b420-904e22e80568',
level: 9, level: 9,
size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'circle',
score: 256, score: 256,
dropCandidate: false, dropCandidate: false,
sfxPitch: 0.5, sfxPitch: 0.5,
img: '/client-assets/drop-and-fusion/face_with_symbols_on_mouth.png', img: '/client-assets/drop-and-fusion/face_with_symbols_on_mouth.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'beb30459-b064-4888-926b-f572e4e72e0c', id: 'beb30459-b064-4888-926b-f572e4e72e0c',
level: 8, level: 8,
size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'circle',
score: 128, score: 128,
dropCandidate: false, dropCandidate: false,
sfxPitch: 0.75, sfxPitch: 0.75,
img: '/client-assets/drop-and-fusion/cold_face.png', img: '/client-assets/drop-and-fusion/cold_face.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'feab6426-d9d8-49ae-849c-048cdbb6cdf0', id: 'feab6426-d9d8-49ae-849c-048cdbb6cdf0',
level: 7, level: 7,
size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'circle',
score: 64, score: 64,
dropCandidate: false, dropCandidate: false,
sfxPitch: 1, sfxPitch: 1,
img: '/client-assets/drop-and-fusion/zany_face.png', img: '/client-assets/drop-and-fusion/zany_face.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'd6d8fed6-6d18-4726-81a1-6cf2c974df8a', id: 'd6d8fed6-6d18-4726-81a1-6cf2c974df8a',
level: 6, level: 6,
size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'circle',
score: 32, score: 32,
dropCandidate: false, dropCandidate: false,
sfxPitch: 1.5, sfxPitch: 1.5,
img: '/client-assets/drop-and-fusion/pleading_face.png', img: '/client-assets/drop-and-fusion/pleading_face.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '249c728e-230f-4332-bbbf-281c271c75b2', id: '249c728e-230f-4332-bbbf-281c271c75b2',
level: 5, level: 5,
size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'circle',
score: 16, score: 16,
dropCandidate: true, dropCandidate: true,
sfxPitch: 2, sfxPitch: 2,
img: '/client-assets/drop-and-fusion/face_with_open_mouth.png', img: '/client-assets/drop-and-fusion/face_with_open_mouth.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '23d67613-d484-4a93-b71e-3e81b19d6186', id: '23d67613-d484-4a93-b71e-3e81b19d6186',
level: 4, level: 4,
size: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25, sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25 * 1.25,
shape: 'circle', shape: 'circle',
score: 8, score: 8,
dropCandidate: true, dropCandidate: true,
sfxPitch: 2.5, sfxPitch: 2.5,
img: '/client-assets/drop-and-fusion/smiling_face_with_sunglasses.png', img: '/client-assets/drop-and-fusion/smiling_face_with_sunglasses.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '3cbd0add-ad7d-4685-bad0-29f6dddc0b99', id: '3cbd0add-ad7d-4685-bad0-29f6dddc0b99',
level: 3, level: 3,
size: NORMAL_BASE_SIZE * 1.25 * 1.25, sizeX: NORMAL_BASE_SIZE * 1.25 * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25 * 1.25,
shape: 'circle', shape: 'circle',
score: 4, score: 4,
dropCandidate: true, dropCandidate: true,
sfxPitch: 3, sfxPitch: 3,
img: '/client-assets/drop-and-fusion/grinning_squinting_face.png', img: '/client-assets/drop-and-fusion/grinning_squinting_face.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '8f86d4f4-ee02-41bf-ad38-1ce0ae457fb5', id: '8f86d4f4-ee02-41bf-ad38-1ce0ae457fb5',
level: 2, level: 2,
size: NORMAL_BASE_SIZE * 1.25, sizeX: NORMAL_BASE_SIZE * 1.25,
sizeY: NORMAL_BASE_SIZE * 1.25,
shape: 'circle', shape: 'circle',
score: 2, score: 2,
dropCandidate: true, dropCandidate: true,
sfxPitch: 3.5, sfxPitch: 3.5,
img: '/client-assets/drop-and-fusion/smiling_face_with_hearts.png', img: '/client-assets/drop-and-fusion/smiling_face_with_hearts.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '64ec4add-ce39-42b4-96cb-33908f3f118d', id: '64ec4add-ce39-42b4-96cb-33908f3f118d',
level: 1, level: 1,
size: NORMAL_BASE_SIZE, sizeX: NORMAL_BASE_SIZE,
sizeY: NORMAL_BASE_SIZE,
shape: 'circle', shape: 'circle',
score: 1, score: 1,
dropCandidate: true, dropCandidate: true,
sfxPitch: 4, sfxPitch: 4,
img: '/client-assets/drop-and-fusion/heart_suit.png', img: '/client-assets/drop-and-fusion/heart_suit.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}]; }];
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,
sfxPitch: 0.25,
img: '/client-assets/drop-and-fusion/10000yen.png',
imgSizeX: 512,
imgSizeY: 256,
spriteScale: 0.97,
}, {
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,
sfxPitch: 0.5,
img: '/client-assets/drop-and-fusion/5000yen.png',
imgSizeX: 512,
imgSizeY: 256,
spriteScale: 0.97,
}, {
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,
sfxPitch: 0.75,
img: '/client-assets/drop-and-fusion/2000yen.png',
imgSizeX: 512,
imgSizeY: 256,
spriteScale: 0.97,
}, {
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,
sfxPitch: 1,
img: '/client-assets/drop-and-fusion/1000yen.png',
imgSizeX: 512,
imgSizeY: 256,
spriteScale: 0.97,
}, {
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,
sfxPitch: 1.5,
img: '/client-assets/drop-and-fusion/500yen.png',
imgSizeX: 256,
imgSizeY: 256,
spriteScale: 0.97,
}, {
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,
sfxPitch: 2,
img: '/client-assets/drop-and-fusion/100yen.png',
imgSizeX: 256,
imgSizeY: 256,
spriteScale: 0.97,
}, {
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,
sfxPitch: 2.5,
img: '/client-assets/drop-and-fusion/50yen.png',
imgSizeX: 256,
imgSizeY: 256,
spriteScale: 0.97,
}, {
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,
sfxPitch: 3,
img: '/client-assets/drop-and-fusion/10yen.png',
imgSizeX: 256,
imgSizeY: 256,
spriteScale: 0.97,
}, {
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,
sfxPitch: 3.5,
img: '/client-assets/drop-and-fusion/5yen.png',
imgSizeX: 256,
imgSizeY: 256,
spriteScale: 0.97,
}, {
id: '9dec1b38-d99d-40de-8288-37367b983d0d',
level: 1,
sizeX: YEN_BASE_SIZE,
sizeY: YEN_BASE_SIZE,
shape: 'circle',
score: 1,
dropCandidate: true,
sfxPitch: 4,
img: '/client-assets/drop-and-fusion/1yen.png',
imgSizeX: 256,
imgSizeY: 256,
spriteScale: 0.97,
}];
const SQUARE_BASE_SIZE = 28; const SQUARE_BASE_SIZE = 28;
const SQUARE_MONOS: Mono[] = [{ const SQUARE_MONOS: Mono[] = [{
id: 'f75fd0ba-d3d4-40a4-9712-b470e45b0525', id: 'f75fd0ba-d3d4-40a4-9712-b470e45b0525',
level: 10, level: 10,
size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'rectangle',
score: 512, score: 512,
dropCandidate: false, dropCandidate: false,
sfxPitch: 0.25, sfxPitch: 0.25,
img: '/client-assets/drop-and-fusion/keycap_10.png', img: '/client-assets/drop-and-fusion/keycap_10.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '7b70f4af-1c01-45fd-af72-61b1f01e03d1', id: '7b70f4af-1c01-45fd-af72-61b1f01e03d1',
level: 9, level: 9,
size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'rectangle',
score: 256, score: 256,
dropCandidate: false, dropCandidate: false,
sfxPitch: 0.5, sfxPitch: 0.5,
img: '/client-assets/drop-and-fusion/keycap_9.png', img: '/client-assets/drop-and-fusion/keycap_9.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '41607ef3-b6d6-4829-95b6-3737bf8bb956', id: '41607ef3-b6d6-4829-95b6-3737bf8bb956',
level: 8, level: 8,
size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'rectangle',
score: 128, score: 128,
dropCandidate: false, dropCandidate: false,
sfxPitch: 0.75, sfxPitch: 0.75,
img: '/client-assets/drop-and-fusion/keycap_8.png', img: '/client-assets/drop-and-fusion/keycap_8.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '8a8310d2-0374-460f-bb50-ca9cd3ee3416', id: '8a8310d2-0374-460f-bb50-ca9cd3ee3416',
level: 7, level: 7,
size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'rectangle',
score: 64, score: 64,
dropCandidate: false, dropCandidate: false,
sfxPitch: 1, sfxPitch: 1,
img: '/client-assets/drop-and-fusion/keycap_7.png', img: '/client-assets/drop-and-fusion/keycap_7.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '1092e069-fe1a-450b-be97-b5d477ec398c', id: '1092e069-fe1a-450b-be97-b5d477ec398c',
level: 6, level: 6,
size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'rectangle',
score: 32, score: 32,
dropCandidate: false, dropCandidate: false,
sfxPitch: 1.5, sfxPitch: 1.5,
img: '/client-assets/drop-and-fusion/keycap_6.png', img: '/client-assets/drop-and-fusion/keycap_6.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '2294734d-7bb8-4781-bb7b-ef3820abf3d0', id: '2294734d-7bb8-4781-bb7b-ef3820abf3d0',
level: 5, level: 5,
size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25 * 1.25, 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', shape: 'rectangle',
score: 16, score: 16,
dropCandidate: true, dropCandidate: true,
sfxPitch: 2, sfxPitch: 2,
img: '/client-assets/drop-and-fusion/keycap_5.png', img: '/client-assets/drop-and-fusion/keycap_5.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'ea8a61af-e350-45f7-ba6a-366fcd65692a', id: 'ea8a61af-e350-45f7-ba6a-366fcd65692a',
level: 4, level: 4,
size: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25, sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25 * 1.25,
shape: 'rectangle', shape: 'rectangle',
score: 8, score: 8,
dropCandidate: true, dropCandidate: true,
sfxPitch: 2.5, sfxPitch: 2.5,
img: '/client-assets/drop-and-fusion/keycap_4.png', img: '/client-assets/drop-and-fusion/keycap_4.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'd0c74815-fc1c-4fbe-9953-c92e4b20f919', id: 'd0c74815-fc1c-4fbe-9953-c92e4b20f919',
level: 3, level: 3,
size: SQUARE_BASE_SIZE * 1.25 * 1.25, sizeX: SQUARE_BASE_SIZE * 1.25 * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25 * 1.25,
shape: 'rectangle', shape: 'rectangle',
score: 4, score: 4,
dropCandidate: true, dropCandidate: true,
sfxPitch: 3, sfxPitch: 3,
img: '/client-assets/drop-and-fusion/keycap_3.png', img: '/client-assets/drop-and-fusion/keycap_3.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: 'd8fbd70e-611d-402d-87da-1a7fd8cd2c8d', id: 'd8fbd70e-611d-402d-87da-1a7fd8cd2c8d',
level: 2, level: 2,
size: SQUARE_BASE_SIZE * 1.25, sizeX: SQUARE_BASE_SIZE * 1.25,
sizeY: SQUARE_BASE_SIZE * 1.25,
shape: 'rectangle', shape: 'rectangle',
score: 2, score: 2,
dropCandidate: true, dropCandidate: true,
sfxPitch: 3.5, sfxPitch: 3.5,
img: '/client-assets/drop-and-fusion/keycap_2.png', img: '/client-assets/drop-and-fusion/keycap_2.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}, { }, {
id: '35e476ee-44bd-4711-ad42-87be245d3efd', id: '35e476ee-44bd-4711-ad42-87be245d3efd',
level: 1, level: 1,
size: SQUARE_BASE_SIZE, sizeX: SQUARE_BASE_SIZE,
sizeY: SQUARE_BASE_SIZE,
shape: 'rectangle', shape: 'rectangle',
score: 1, score: 1,
dropCandidate: true, dropCandidate: true,
sfxPitch: 4, sfxPitch: 4,
img: '/client-assets/drop-and-fusion/keycap_1.png', img: '/client-assets/drop-and-fusion/keycap_1.png',
imgSize: 256, imgSizeX: 256,
imgSizeY: 256,
spriteScale: 1.12, spriteScale: 1.12,
}]; }];
const props = defineProps<{ const props = defineProps<{
gameMode: 'normal' | 'square'; gameMode: 'normal' | 'square' | 'yen';
mute: boolean; mute: boolean;
}>(); }>();
@ -398,7 +572,11 @@ const emit = defineEmits<{
(ev: 'end'): void; (ev: 'end'): void;
}>(); }>();
const monoDefinitions = props.gameMode === 'normal' ? NORAML_MONOS : SQUARE_MONOS; const monoDefinitions =
props.gameMode === 'normal' ? NORAML_MONOS :
props.gameMode === 'square' ? SQUARE_MONOS :
props.gameMode === 'yen' ? YEN_MONOS :
[] as never;
let viewScale = 1; let viewScale = 1;
let seed: string = Date.now().toString(); let seed: string = Date.now().toString();
@ -413,6 +591,7 @@ let tickRaf: number | null = null;
let game = new DropAndFusionGame({ let game = new DropAndFusionGame({
seed: seed, seed: seed,
monoDefinitions, monoDefinitions,
hasComboBonus: props.gameMode !== 'yen',
}); });
attachGameEvents(); attachGameEvents();
@ -616,6 +795,7 @@ async function restart() {
game = new DropAndFusionGame({ game = new DropAndFusionGame({
seed: seed, seed: seed,
monoDefinitions, monoDefinitions,
hasComboBonus: props.gameMode !== 'yen',
}); });
attachGameEvents(); attachGameEvents();
await start(); await start();
@ -640,7 +820,7 @@ function reset() {
function dispose() { function dispose() {
game.dispose(); game.dispose();
Matter.Render.stop(renderer); if (renderer) Matter.Render.stop(renderer);
if (tickRaf) { if (tickRaf) {
window.cancelAnimationFrame(tickRaf); window.cancelAnimationFrame(tickRaf);
} }
@ -656,6 +836,7 @@ function replay() {
game = new DropAndFusionGame({ game = new DropAndFusionGame({
seed: seed, seed: seed,
monoDefinitions, monoDefinitions,
hasComboBonus: props.gameMode !== 'yen',
replaying: true, replaying: true,
}); });
attachGameEvents(); attachGameEvents();
@ -812,11 +993,19 @@ function attachGameEvents() {
const panV = x - game.PLAYAREA_MARGIN; const panV = x - game.PLAYAREA_MARGIN;
const panW = game.GAME_WIDTH - game.PLAYAREA_MARGIN - game.PLAYAREA_MARGIN; const panW = game.GAME_WIDTH - game.PLAYAREA_MARGIN - game.PLAYAREA_MARGIN;
const pan = ((panV / panW) - 0.5) * 2; const pan = ((panV / panW) - 0.5) * 2;
sound.playUrl('/client-assets/drop-and-fusion/poi2.mp3', { if (props.gameMode === 'yen') {
volume: sfxVolume.value, sound.playUrl('/client-assets/drop-and-fusion/drop_yen.mp3', {
pan, volume: sfxVolume.value,
playbackRate: replayPlaybackRate.value, pan,
}); playbackRate: replayPlaybackRate.value,
});
} else {
sound.playUrl('/client-assets/drop-and-fusion/drop.mp3', {
volume: sfxVolume.value,
pan,
playbackRate: replayPlaybackRate.value,
});
}
if (replaying.value) return; if (replaying.value) return;
@ -853,9 +1042,15 @@ function attachGameEvents() {
}); });
game.addListener('gameOver', () => { game.addListener('gameOver', () => {
sound.playUrl('/client-assets/drop-and-fusion/gameover.mp3', { if (props.gameMode === 'yen') {
volume: sfxVolume.value, sound.playUrl('/client-assets/drop-and-fusion/gameover_yen.mp3', {
}); volume: 0.5 * sfxVolume.value,
});
} else {
sound.playUrl('/client-assets/drop-and-fusion/gameover.mp3', {
volume: sfxVolume.value,
});
}
if (replaying.value) { if (replaying.value) {
endReplay(); endReplay();
@ -1173,10 +1368,15 @@ definePageMetadata({
position: absolute; position: absolute;
z-index: 10; z-index: 10;
top: 50%; top: 50%;
width: 100%; left: 0;
right: 0;
margin: auto;
width: calc(100% - 50px);
max-width: 320px;
padding: 16px; padding: 16px;
box-sizing: border-box; box-sizing: border-box;
background: #0007; background: #0007;
border-radius: 16px;
color: #fff; color: #fff;
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;

View File

@ -26,6 +26,7 @@ SPDX-License-Identifier: AGPL-3.0-only
<MkSelect v-model="gameMode"> <MkSelect v-model="gameMode">
<option value="normal">NORMAL</option> <option value="normal">NORMAL</option>
<option value="square">SQUARE</option> <option value="square">SQUARE</option>
<option value="yen">YEN</option>
</MkSelect> </MkSelect>
<MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton> <MkButton primary gradate large rounded inline @click="start">{{ i18n.ts.start }}</MkButton>
</div> </div>
@ -42,12 +43,12 @@ SPDX-License-Identifier: AGPL-3.0-only
<div :class="$style.frame"> <div :class="$style.frame">
<div :class="$style.frameInner"> <div :class="$style.frameInner">
<div class="_gaps_s" style="padding: 16px;"> <div class="_gaps_s" style="padding: 16px;">
<div><b>{{ i18n.ts.ranking }}</b> ({{ gameMode }})</div> <div><b>{{ i18n.t('lastNDays', { n: 7 }) }} {{ i18n.ts.ranking }}</b> ({{ gameMode }})</div>
<div v-if="ranking" class="_gaps_s"> <div v-if="ranking" class="_gaps_s">
<div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord"> <div v-for="r in ranking" :key="r.id" :class="$style.rankingRecord">
<MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/> <MkAvatar :link="true" style="width: 24px; height: 24px; margin-right: 4px;" :user="r.user"/>
<MkUserName :user="r.user" :nowrap="true"/> <MkUserName :user="r.user" :nowrap="true"/>
<b style="margin-left: auto;">{{ r.score.toLocaleString() }} pt</b> <b style="margin-left: auto;">{{ r.score.toLocaleString() }} {{ gameMode === 'yen' ? '円' : 'pt' }}</b>
</div> </div>
</div> </div>
<div v-else>{{ i18n.ts.loading }}</div> <div v-else>{{ i18n.ts.loading }}</div>
@ -94,7 +95,7 @@ import MkSelect from '@/components/MkSelect.vue';
import MkSwitch from '@/components/MkSwitch.vue'; import MkSwitch from '@/components/MkSwitch.vue';
import { misskeyApiGet } from '@/scripts/misskey-api.js'; import { misskeyApiGet } from '@/scripts/misskey-api.js';
const gameMode = ref<'normal' | 'square'>('normal'); const gameMode = ref<'normal' | 'square' | 'yen'>('normal');
const gameStarted = ref(false); const gameStarted = ref(false);
const mute = ref(false); const mute = ref(false);
const ranking = ref(null); const ranking = ref(null);

View File

@ -10,13 +10,15 @@ import seedrandom from 'seedrandom';
export type Mono = { export type Mono = {
id: string; id: string;
level: number; level: number;
size: number; sizeX: number;
sizeY: number;
shape: 'circle' | 'rectangle'; shape: 'circle' | 'rectangle';
score: number; score: number;
dropCandidate: boolean; dropCandidate: boolean;
sfxPitch: number; sfxPitch: number;
img: string; img: string;
imgSize: number; imgSizeX: number;
imgSizeY: number;
spriteScale: number; spriteScale: number;
}; };
@ -59,6 +61,7 @@ export class DropAndFusionGame extends EventEmitter<{
private overflowCollider: Matter.Body; private overflowCollider: Matter.Body;
private isGameOver = false; private isGameOver = false;
private monoDefinitions: Mono[] = []; private monoDefinitions: Mono[] = [];
private hasComboBonus = true;
private rng: () => number; private rng: () => number;
private logs: Log[] = []; private logs: Log[] = [];
private replaying = false; private replaying = false;
@ -66,7 +69,9 @@ export class DropAndFusionGame extends EventEmitter<{
/** /**
* *
*/ */
private activeBodyIds: Matter.Body['id'][] = []; private fusionReadyBodyIds: Matter.Body['id'][] = [];
private gameOverReadyBodyIds: Matter.Body['id'][] = [];
/** /**
* fusion予約アイテムのペア * fusion予約アイテムのペア
@ -74,8 +79,6 @@ export class DropAndFusionGame extends EventEmitter<{
*/ */
private fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = []; private fusionReservedPairs: { bodyA: Matter.Body; bodyB: Matter.Body }[] = [];
private latestDroppedBodyId: Matter.Body['id'] | null = null;
private latestDroppedAt = 0; private latestDroppedAt = 0;
private latestFusionedAt = 0; // frame private latestFusionedAt = 0; // frame
private stock: { id: string; mono: Mono }[] = []; private stock: { id: string; mono: Mono }[] = [];
@ -101,11 +104,17 @@ export class DropAndFusionGame extends EventEmitter<{
public replayPlaybackRate = 1; public replayPlaybackRate = 1;
constructor(env: { monoDefinitions: Mono[]; seed: string; replaying?: boolean }) { constructor(env: {
monoDefinitions: Mono[];
seed: string;
hasComboBonus: boolean;
replaying?: boolean;
}) {
super(); super();
this.replaying = !!env.replaying; this.replaying = !!env.replaying;
this.monoDefinitions = env.monoDefinitions; this.monoDefinitions = env.monoDefinitions;
this.hasComboBonus = env.hasComboBonus;
this.rng = seedrandom(env.seed); this.rng = seedrandom(env.seed);
this.tick = this.tick.bind(this); this.tick = this.tick.bind(this);
@ -147,6 +156,7 @@ export class DropAndFusionGame extends EventEmitter<{
//#endregion //#endregion
this.overflowCollider = Matter.Bodies.rectangle(this.GAME_WIDTH / 2, 0, this.GAME_WIDTH, 200, { this.overflowCollider = Matter.Bodies.rectangle(this.GAME_WIDTH / 2, 0, this.GAME_WIDTH, 200, {
label: '_overflow_',
isStatic: true, isStatic: true,
isSensor: true, isSensor: true,
render: { render: {
@ -165,7 +175,7 @@ export class DropAndFusionGame extends EventEmitter<{
const options: Matter.IBodyDefinition = { const options: Matter.IBodyDefinition = {
label: mono.id, label: mono.id,
//density: 0.0005, //density: 0.0005,
density: mono.size / 1000, density: ((mono.sizeX + mono.sizeY) / 2) / 1000,
restitution: 0.2, restitution: 0.2,
frictionAir: 0.01, frictionAir: 0.01,
friction: 0.7, friction: 0.7,
@ -175,16 +185,16 @@ export class DropAndFusionGame extends EventEmitter<{
render: { render: {
sprite: { sprite: {
texture: mono.img, texture: mono.img,
xScale: (mono.size / mono.imgSize) * mono.spriteScale, xScale: (mono.sizeX / mono.imgSizeX) * mono.spriteScale,
yScale: (mono.size / mono.imgSize) * mono.spriteScale, yScale: (mono.sizeY / mono.imgSizeY) * mono.spriteScale,
}, },
}, },
}; };
if (mono.shape === 'circle') { if (mono.shape === 'circle') {
return Matter.Bodies.circle(x, y, mono.size / 2, options); return Matter.Bodies.circle(x, y, mono.sizeX / 2, options);
// eslint-disable-next-line @typescript-eslint/no-unnecessary-condition // eslint-disable-next-line @typescript-eslint/no-unnecessary-condition
} else if (mono.shape === 'rectangle') { } else if (mono.shape === 'rectangle') {
return Matter.Bodies.rectangle(x, y, mono.size, mono.size, options); return Matter.Bodies.rectangle(x, y, mono.sizeX, mono.sizeY, options);
} else { } else {
throw new Error('unrecognized shape'); throw new Error('unrecognized shape');
} }
@ -202,8 +212,9 @@ export class DropAndFusionGame extends EventEmitter<{
const newX = (bodyA.position.x + bodyB.position.x) / 2; const newX = (bodyA.position.x + bodyB.position.x) / 2;
const newY = (bodyA.position.y + bodyB.position.y) / 2; const newY = (bodyA.position.y + bodyB.position.y) / 2;
this.fusionReadyBodyIds = this.fusionReadyBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
this.gameOverReadyBodyIds = this.gameOverReadyBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
Matter.Composite.remove(this.engine.world, [bodyA, bodyB]); Matter.Composite.remove(this.engine.world, [bodyA, bodyB]);
this.activeBodyIds = this.activeBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
const currentMono = this.monoDefinitions.find(y => y.id === bodyA.label)!; 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);
@ -216,11 +227,11 @@ export class DropAndFusionGame extends EventEmitter<{
this.tickCallbackQueue.push({ this.tickCallbackQueue.push({
frame: this.frame + this.msToFrame(100), frame: this.frame + this.msToFrame(100),
callback: () => { callback: () => {
this.activeBodyIds.push(body.id); this.fusionReadyBodyIds.push(body.id);
}, },
}); });
const comboBonus = 1 + ((this.combo - 1) / 5); const comboBonus = this.hasComboBonus ? 1 + ((this.combo - 1) / 5) : 1;
const additionalScore = Math.round(currentMono.score * comboBonus); const additionalScore = Math.round(currentMono.score * comboBonus);
this.score += additionalScore; this.score += additionalScore;
@ -245,14 +256,6 @@ export class DropAndFusionGame extends EventEmitter<{
for (const pairs of event.pairs) { for (const pairs of event.pairs) {
const { bodyA, bodyB } = 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) && const shouldFusion = (bodyA.label === bodyB.label) &&
!this.fusionReservedPairs.some(x => !this.fusionReservedPairs.some(x =>
x.bodyA.id === bodyA.id || x.bodyA.id === bodyA.id ||
@ -261,7 +264,7 @@ export class DropAndFusionGame extends EventEmitter<{
x.bodyB.id === bodyB.id); x.bodyB.id === bodyB.id);
if (shouldFusion) { if (shouldFusion) {
if (this.activeBodyIds.includes(bodyA.id) && this.activeBodyIds.includes(bodyB.id)) { if (this.fusionReadyBodyIds.includes(bodyA.id) && this.fusionReadyBodyIds.includes(bodyB.id)) {
this.fusion(bodyA, bodyB); this.fusion(bodyA, bodyB);
} else { } else {
this.fusionReservedPairs.push({ bodyA, bodyB }); this.fusionReservedPairs.push({ bodyA, bodyB });
@ -274,12 +277,19 @@ export class DropAndFusionGame extends EventEmitter<{
}); });
} }
} else { } else {
if (bodyA.label === '_overflow_' || bodyB.label === '_overflow_') continue;
if (bodyA.label !== '_wall_' && bodyB.label !== '_wall_') {
if (!this.gameOverReadyBodyIds.includes(bodyA.id)) this.gameOverReadyBodyIds.push(bodyA.id);
if (!this.gameOverReadyBodyIds.includes(bodyB.id)) this.gameOverReadyBodyIds.push(bodyB.id);
}
const energy = pairs.collision.depth; const energy = pairs.collision.depth;
if (energy > minCollisionEnergyForSound) { if (energy > minCollisionEnergyForSound) {
const volume = (Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4; const volume = (Math.min(maxCollisionEnergyForSound, energy - minCollisionEnergyForSound) / maxCollisionEnergyForSound) / 4;
const panV = const panV =
pairs.bodyA.label === '_wall_' ? bodyB.position.x - this.PLAYAREA_MARGIN : bodyA.label === '_wall_' ? bodyB.position.x - this.PLAYAREA_MARGIN :
pairs.bodyB.label === '_wall_' ? bodyA.position.x - this.PLAYAREA_MARGIN : bodyB.label === '_wall_' ? bodyA.position.x - this.PLAYAREA_MARGIN :
((bodyA.position.x + bodyB.position.x) / 2) - 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 panW = this.GAME_WIDTH - this.PLAYAREA_MARGIN - this.PLAYAREA_MARGIN;
const pan = ((panV / panW) - 0.5) * 2; const pan = ((panV / panW) - 0.5) * 2;
@ -290,6 +300,21 @@ export class DropAndFusionGame extends EventEmitter<{
} }
} }
private onCollisionActive(event: Matter.IEventCollision<Matter.Engine>) {
for (const pairs of event.pairs) {
const { bodyA, bodyB } = pairs;
// ハコからあふれたかどうかの判定
if (bodyA.id === this.overflowCollider.id || bodyB.id === this.overflowCollider.id) {
if (this.gameOverReadyBodyIds.includes(bodyA.id) || this.gameOverReadyBodyIds.includes(bodyB.id)) {
this.gameOver();
break;
}
continue;
}
}
}
public surrender() { public surrender() {
this.logs.push({ this.logs.push({
frame: this.frame, frame: this.frame,
@ -314,6 +339,7 @@ export class DropAndFusionGame extends EventEmitter<{
this.emit('changeStock', this.stock); this.emit('changeStock', this.stock);
Matter.Events.on(this.engine, 'collisionStart', this.onCollision.bind(this)); Matter.Events.on(this.engine, 'collisionStart', this.onCollision.bind(this));
Matter.Events.on(this.engine, 'collisionActive', this.onCollisionActive.bind(this));
} }
public getLogs() { public getLogs() {
@ -360,17 +386,18 @@ 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.GAME_WIDTH - 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.sizeX / 2), Math.max(this.PLAYAREA_MARGIN + (head.mono.sizeX / 2), inputX));
const body = this.createBody(head.mono, x, 50 + head.mono.size / 2); const body = this.createBody(head.mono, x, 50 + head.mono.sizeY / 2);
this.logs.push({ this.logs.push({
frame: this.frame, frame: this.frame,
operation: 'drop', operation: 'drop',
x: inputX, x: inputX,
}); });
Matter.Composite.add(this.engine.world, body); Matter.Composite.add(this.engine.world, body);
this.activeBodyIds.push(body.id);
this.latestDroppedBodyId = body.id; this.fusionReadyBodyIds.push(body.id);
this.latestDroppedAt = Date.now(); this.latestDroppedAt = Date.now();
this.emit('dropped', x); this.emit('dropped', x);
this.emit('monoAdded', head.mono); this.emit('monoAdded', head.mono);
} }