Mizah/mizzkey
1
0
Fork 0
Code Issues Pull requests Actions Packages Projects Releases Wiki Activity

refactor

Browse source
This commit is contained in:
syuilo 2024-01-07 14:32:57 +09:00
parent 1d1780081e
commit c6a4caa8be
1 changed files with 31 additions and 31 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

62
packages/frontend/src/pages/drop-and-fusion.vue
View file

@ -36,7 +36,7 @@ SPDX-License-Identifier: AGPL-3.0-only
:moveClass="$style.transition_stock_move" :moveClass="$style.transition_stock_move"
> >
<div v-for="x in stock" :key="x.id" style="display: inline-block;"> <div v-for="x in stock" :key="x.id" style="display: inline-block;">
<img :src="x.fruit.img" style="width: 32px;"/> <img :src="x.mono.img" style="width: 32px;"/>
</div> </div>
</TransitionGroup> </TransitionGroup>
</div> </div>
@ -65,10 +65,10 @@ 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="currentPick?.fruit.img" :class="$style.currentFruit" :style="{ top: -(currentPick?.fruit.size / 2) + 'px', left: (mouseX - (currentPick?.fruit.size / 2)) + 'px', width: `${currentPick?.fruit.size}px` }"/> <img v-if="currentPick" :key="currentPick.id" :src="currentPick?.mono.img" :class="$style.currentMono" :style="{ top: -(currentPick?.mono.size / 2) + 'px', left: (mouseX - (currentPick?.mono.size / 2)) + 'px', width: `${currentPick?.mono.size}px` }"/>
</Transition> </Transition>
<template v-if="dropReady"> <template v-if="dropReady">
<img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentFruitArrow" :style="{ top: (currentPick?.fruit.size / 2) + 10 + 'px', left: (mouseX - 10) + 'px', width: `20px` }"/> <img src="/client-assets/drop-and-fusion/drop-arrow.svg" :class="$style.currentMonoArrow" :style="{ top: (currentPick?.mono.size / 2) + 10 + 'px', left: (mouseX - 10) + 'px', width: `20px` }"/>
<div :class="$style.dropGuide" :style="{ left: (mouseX - 2) + 'px' }"/> <div :class="$style.dropGuide" :style="{ left: (mouseX - 2) + 'px' }"/>
</template> </template>
<div v-if="gameOver" :class="$style.gameOverLabel"> <div v-if="gameOver" :class="$style.gameOverLabel">
@ -369,8 +369,8 @@ const PHYSICS_QUALITY_FACTOR = 16; // 低いほどパフォーマンスが高い
let viewScaleX = 1; let viewScaleX = 1;
let viewScaleY = 1; let viewScaleY = 1;
const currentPick = shallowRef<{ id: string; fruit: Mono } | null>(null); const currentPick = shallowRef<{ id: string; mono: Mono } | null>(null);
const stock = shallowRef<{ id: string; fruit: Mono }[]>([]); const stock = shallowRef<{ id: string; mono: Mono }[]>([]);
const score = ref(0); const score = ref(0);
const combo = ref(0); const combo = ref(0);
const comboPrev = ref(0); const comboPrev = ref(0);
@ -383,7 +383,7 @@ const highScore = ref<number | null>(null);
class Game extends EventEmitter<{ class Game extends EventEmitter<{
changeScore: (score: number) => void; changeScore: (score: number) => void;
changeCombo: (combo: number) => void; changeCombo: (combo: number) => void;
changeStock: (stock: { id: string; fruit: Mono }[]) => void; changeStock: (stock: { id: string; mono: Mono }[]) => void;
dropped: () => void; dropped: () => void;
fusioned: (x: number, y: number, score: number) => void; fusioned: (x: number, y: number, score: number) => void;
gameOver: () => void; gameOver: () => void;
@ -409,7 +409,7 @@ class Game extends EventEmitter<{
private latestDroppedAt = 0; private latestDroppedAt = 0;
private latestFusionedAt = 0; private latestFusionedAt = 0;
private stock: { id: string; fruit: Mono }[] = []; private stock: { id: string; mono: Mono }[] = [];
private _combo = 0; private _combo = 0;
private get combo() { private get combo() {
@ -509,11 +509,11 @@ class Game extends EventEmitter<{
}); });
} }
private createBody(fruit: Mono, x: number, y: number) { private createBody(mono: Mono, x: number, y: number) {
const options: Matter.IBodyDefinition = { const options: Matter.IBodyDefinition = {
label: fruit.id, label: mono.id,
//density: 0.0005, //density: 0.0005,
density: fruit.size / 1000, density: mono.size / 1000,
restitution: 0.2, restitution: 0.2,
frictionAir: 0.01, frictionAir: 0.01,
friction: 0.7, friction: 0.7,
@ -522,16 +522,16 @@ class Game extends EventEmitter<{
//mass: 0, //mass: 0,
render: { render: {
sprite: { sprite: {
texture: fruit.img, texture: mono.img,
xScale: (fruit.size / fruit.imgSize) * fruit.spriteScale, xScale: (mono.size / mono.imgSize) * mono.spriteScale,
yScale: (fruit.size / fruit.imgSize) * fruit.spriteScale, yScale: (mono.size / mono.imgSize) * mono.spriteScale,
}, },
}, },
}; };
if (fruit.shape === 'circle') { if (mono.shape === 'circle') {
return Matter.Bodies.circle(x, y, fruit.size / 2, options); return Matter.Bodies.circle(x, y, mono.size / 2, options);
} else if (fruit.shape === 'rectangle') { } else if (mono.shape === 'rectangle') {
return Matter.Bodies.rectangle(x, y, fruit.size, fruit.size, options); return Matter.Bodies.rectangle(x, y, mono.size, mono.size, options);
} else { } else {
throw new Error('unrecognized shape'); throw new Error('unrecognized shape');
} }
@ -553,11 +553,11 @@ class Game extends EventEmitter<{
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); this.activeBodyIds = this.activeBodyIds.filter(x => x !== bodyA.id && x !== bodyB.id);
const currentFruit = this.monoDefinitions.find(y => y.id === bodyA.label)!; const currentMono = this.monoDefinitions.find(y => y.id === bodyA.label)!;
const nextFruit = this.monoDefinitions.find(x => x.level === currentFruit.level + 1); const nextMono = this.monoDefinitions.find(x => x.level === currentMono.level + 1);
if (nextFruit) { if (nextMono) {
const body = this.createBody(nextFruit, newX, newY); const body = this.createBody(nextMono, newX, newY);
Matter.Composite.add(this.engine.world, body); Matter.Composite.add(this.engine.world, body);
// 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする // 連鎖してfusionした場合の分かりやすさのため少し間を置いてからfusion対象になるようにする
@ -566,11 +566,11 @@ class Game extends EventEmitter<{
}, 100); }, 100);
const comboBonus = 1 + ((this.combo - 1) / 5); const comboBonus = 1 + ((this.combo - 1) / 5);
const additionalScore = Math.round(currentFruit.score * comboBonus); const additionalScore = Math.round(currentMono.score * comboBonus);
this.score += additionalScore; this.score += additionalScore;
const pan = ((newX / GAME_WIDTH) - 0.5) * 2; const pan = ((newX / GAME_WIDTH) - 0.5) * 2;
sound.playRaw('syuilo/bubble2', 1, pan, nextFruit.sfxPitch); sound.playRaw('syuilo/bubble2', 1, pan, nextMono.sfxPitch);
this.emit('fusioned', newX, newY, additionalScore); this.emit('fusioned', newX, newY, additionalScore);
} else { } else {
@ -597,7 +597,7 @@ class Game extends EventEmitter<{
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: Math.random().toString(), id: Math.random().toString(),
fruit: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)], mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
}); });
} }
this.emit('changeStock', this.stock); this.emit('changeStock', this.stock);
@ -658,12 +658,12 @@ class Game extends EventEmitter<{
const st = this.stock.shift()!; const st = this.stock.shift()!;
this.stock.push({ this.stock.push({
id: Math.random().toString(), id: Math.random().toString(),
fruit: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)], mono: this.monoDefinitions.filter(x => x.dropCandidate)[Math.floor(Math.random() * this.monoDefinitions.filter(x => x.dropCandidate).length)],
}); });
this.emit('changeStock', this.stock); this.emit('changeStock', this.stock);
const x = Math.min(GAME_WIDTH - this.PLAYAREA_MARGIN - (st.fruit.size / 2), Math.max(this.PLAYAREA_MARGIN + (st.fruit.size / 2), _x)); const x = Math.min(GAME_WIDTH - this.PLAYAREA_MARGIN - (st.mono.size / 2), Math.max(this.PLAYAREA_MARGIN + (st.mono.size / 2), _x));
const body = this.createBody(st.fruit, x, 50 + st.fruit.size / 2); const body = this.createBody(st.mono, x, 50 + st.mono.size / 2);
Matter.Composite.add(this.engine.world, body); Matter.Composite.add(this.engine.world, body);
this.activeBodyIds.push(body.id); this.activeBodyIds.push(body.id);
this.latestDroppedBodyId = body.id; this.latestDroppedBodyId = body.id;
@ -970,7 +970,7 @@ definePageMetadata({
user-select: none; user-select: none;
} }
.currentFruit { .currentMono {
position: absolute; position: absolute;
margin-top: 80px; margin-top: 80px;
z-index: 2; z-index: 2;
@ -991,11 +991,11 @@ definePageMetadata({
user-select: none; user-select: none;
} }
.currentFruitArrow { .currentMonoArrow {
position: absolute; position: absolute;
margin-top: 100px; margin-top: 100px;
z-index: 3; z-index: 3;
animation: currentFruitArrow 2s ease infinite; animation: currentMonoArrow 2s ease infinite;
pointer-events: none; pointer-events: none;
user-select: none; user-select: none;
} }
@ -1030,7 +1030,7 @@ definePageMetadata({
} }
} }
@keyframes currentFruitArrow { @keyframes currentMonoArrow {
0% { transform: translateY(0); } 0% { transform: translateY(0); }
25% { transform: translateY(-8px); } 25% { transform: translateY(-8px); }
50% { transform: translateY(0); } 50% { transform: translateY(0); }