弓箭动画调整

This commit is contained in:
kron
2025-06-17 16:02:29 +08:00
parent a74fd1e744
commit 67825d2b24
7 changed files with 49 additions and 21 deletions

View File

@@ -40,7 +40,7 @@ const props = defineProps({
</view>
</view>
<view :style="{ width: '100%', marginBottom: '20px' }">
<BowTarget :scores="arrows" :showE="false" />
<BowTarget :scores="arrows" :showLatestArrow="false" />
</view>
<view class="desc">
<text>{{ arrows.length }}</text>

View File

@@ -34,14 +34,13 @@ const props = defineProps({
type: Array,
default: () => [],
},
showE: {
showLatestArrow: {
type: Boolean,
default: true,
},
});
const showRoundTips = ref(false);
const showLatestArrow = ref(false);
const prevLength = ref(0);
const timer = ref(null);
@@ -51,7 +50,6 @@ watch(
if (newVal.length - prevLength.value === 1) {
if (timer.value) clearTimeout(timer.value);
showRoundTips.value = true;
showLatestArrow.value = true;
timer.value = setTimeout(() => {
showRoundTips.value = false;
}, 1000);
@@ -86,11 +84,13 @@ function calcRealY(num) {
</view>
<view class="target">
<view
v-if="scores.length && showRoundTips && showE"
v-if="scores.length && showRoundTips && showLatestArrow"
class="e-value fade-in"
>经验 +1</view
>
<view v-if="scores.length && showRoundTips" class="round-tip fade-in"
<view
v-if="scores.length && showRoundTips && showLatestArrow"
class="round-tip fade-in"
>{{ scores[scores.length - 1].ring }}<text></text></view
>
<image
@@ -101,7 +101,11 @@ function calcRealY(num) {
? '../static/hit-icon-green.png'
: '../static/hit-icon.png'
"
:class="`hit ${index + 1 === scores.length ? 'pump-in' : ''}`"
:class="`hit ${
index + 1 === scores.length && !blueScores.length && showLatestArrow
? 'pump-in'
: ''
}`"
:style="{
left: calcRealX(bow.x),
top: calcRealY(bow.y),
@@ -111,7 +115,7 @@ function calcRealY(num) {
v-for="(bow, index) in blueScores"
:key="index"
src="../static/hit-icon-blue.png"
:class="`hit ${index + 1 === blueScores.length ? 'pump-in' : ''}`"
class="hit"
:style="{
left: calcRealX(bow.x),
top: calcRealY(bow.y),

View File

@@ -61,7 +61,7 @@ watch(
</view>
</view>
<view :style="{ width: '95%' }">
<BowTarget :scores="scores" />
<BowTarget :scores="scores" :showLatestArrow="false" />
</view>
<view class="score-text"
><text :style="{ color: '#fed847' }">12</text>支箭<text

View File

@@ -97,7 +97,11 @@ watch(
</view>
</view>
<view :style="{ width: '95%' }">
<BowTarget :scores="redScores" :blueScores="blueScores" :showE="false" />
<BowTarget
:scores="redScores"
:blueScores="blueScores"
:showLatestArrow="false"
/>
</view>
<view class="score-row" v-for="(player, index) in players" :key="index">
<Avatar

View File

@@ -13,6 +13,17 @@ export const MESSAGETYPES = {
UserEnterRoom: 2133805521,
UserExitRoom: 3896523333,
RoomDestroy: 3617539277,
// RoomDestroy: 2921416944,
// 下半场: 388606440,
};
export const getMessageTypeName = (id) => {
for (let key in MESSAGETYPES) {
if (MESSAGETYPES[key] === id) {
return key;
}
}
return null;
};
export const roundsName = {

View File

@@ -9,8 +9,9 @@ import BattleHeader from "@/components/BattleHeader.vue";
import Timer from "@/components/Timer.vue";
import PlayerScore from "@/components/PlayerScore.vue";
import SButton from "@/components/SButton.vue";
import Avatar from "@/components/Avatar.vue";
import { matchGameAPI, readyGameAPI } from "@/apis";
import { MESSAGETYPES } from "@/constants";
import { MESSAGETYPES, getMessageTypeName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -62,7 +63,7 @@ async function onReceiveMessage(content) {
(battleId.value && msg.id === battleId.value) ||
msg.constructor === MESSAGETYPES.WaitForAllReady
) {
console.log("收到消息:", msg);
console.log("收到消息:", getMessageTypeName(msg.constructor), msg);
}
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
// 这里会掉多次;
@@ -82,11 +83,10 @@ async function onReceiveMessage(content) {
}
if (msg.id !== battleId.value) return;
if (msg.constructor === MESSAGETYPES.MeleeAllReady) {
totalRounds.value = msg.groupUserStatus.config.maxRounds;
start.value = true;
seq.value += 1;
timerSeq.value = 0;
tips.value = "请在90秒内射完12支箭";
tips.value = "请连续射出6支箭";
scores.value = [];
}
if (msg.constructor === MESSAGETYPES.ShootResult) {
@@ -98,7 +98,7 @@ async function onReceiveMessage(content) {
}
if (msg.constructor === MESSAGETYPES.MatchOver) {
uni.redirectTo({
url: `/pages/battle-result?battleId=${msg.id}&winner=${msg.endStatus.winner}&gameType=${gameType.value}`,
url: `/pages/battle-result?battleId=${msg.id}`,
});
}
});
@@ -128,11 +128,13 @@ onUnmounted(() => {
</view>
</Guide>
<ShootProgress v-if="start" :seq="seq" :start="start" :tips="tips" />
<view class="infos">
<Avatar :src="user.avatar" :size="35" />
<BowPower :power="power" />
</view>
<BowTarget
:avatar="user.avatar"
:power="power"
:currentRound="currentRound"
:totalRound="totalRounds"
:currentRound="scores.length"
:totalRound="12"
:scores="scores"
/>
<PlayerScore
@@ -158,4 +160,11 @@ onUnmounted(() => {
.container {
width: 100%;
}
.infos {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 15px;
padding-top: 15px;
}
</style>

View File

@@ -11,7 +11,7 @@ import Timer from "@/components/Timer.vue";
import BattleFooter from "@/components/BattleFooter.vue";
import SButton from "@/components/SButton.vue";
import { matchGameAPI, readyGameAPI } from "@/apis";
import { MESSAGETYPES, roundsName } from "@/constants";
import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
const store = useStore();
@@ -73,7 +73,7 @@ async function onReceiveMessage(content) {
(battleId.value && msg.id === battleId.value) ||
msg.constructor === MESSAGETYPES.WaitForAllReady
) {
console.log("收到消息:", msg);
console.log("收到消息:", getMessageTypeName(msg.constructor), msg);
}
if (!start.value && msg.constructor === MESSAGETYPES.ShootSyncMeArrowID) {
scores.value.push(msg.target);