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