返回游戏流程完善

This commit is contained in:
kron
2025-07-21 10:40:43 +08:00
parent 9e83bf89f7
commit 200c05a288
9 changed files with 185 additions and 207 deletions

View File

@@ -90,7 +90,7 @@ button::after {
}
.fade-in-out {
animation: fadeInOut 1s ease forwards;
animation: fadeInOut 1.2s ease forwards;
}
@keyframes fadeOut {

View File

@@ -303,5 +303,7 @@ const simulShoot2 = async () => {
height: 60px;
left: calc(50% - 100px);
top: calc(50% - 30px);
z-index: 99;
font-weight: bold;
}
</style>

View File

@@ -67,7 +67,7 @@ const getContentHeight = () => {
flex-direction: column;
justify-content: center;
align-items: center;
z-index: 10;
z-index: 999;
}
.container > view:first-child {
display: flex;

View File

@@ -89,7 +89,7 @@ watch(
);
watch(
() => [props.seq, props.total],
() => [props.seq],
() => {
if (timer.value) clearInterval(timer.value);
remain.value = props.total;

View File

@@ -1,48 +1,35 @@
<script setup>
import { ref, watch } from "vue";
import { ref, watch, onMounted, onUnmounted } from "vue";
const props = defineProps({
seq: {
type: Number,
default: 0,
},
countdown: {
type: Number,
default: 15,
},
callBack: {
type: Function,
default: () => {},
},
});
const show = ref(false);
const count = ref(0);
const count = ref(props.countdown);
const timer = ref(null);
watch(
() => props.seq,
() => {
if (props.seq > 0) {
if (show.value) return;
if (timer.value) clearInterval(timer.value);
count.value = props.countdown;
show.value = true;
timer.value = setInterval(() => {
if (count.value === 0) {
show.value = false;
clearInterval(timer.value);
props.callBack();
} else {
count.value -= 1;
}
}, 1000);
} else {
if (timer.value) clearInterval(timer.value);
show.value = false;
}
},
{
immediate: true,
}
);
const updateTimer = (value) => {
count.value = Math.round(value);
};
onMounted(() => {
setTimeout(() => {
show.value = true;
timer.value = setInterval(() => {
if (count.value === 0) {
show.value = false;
clearInterval(timer.value);
} else {
count.value -= 1;
}
}, 1000);
}, 300);
uni.$on("update-timer", updateTimer);
});
onUnmounted(() => {
if (timer.value) clearInterval(timer.value);
uni.$off("update-timer", updateTimer);
});
</script>
<template>

View File

@@ -25,7 +25,6 @@ const store = useStore();
const { user } = storeToRefs(store);
const step = ref(1);
const seq = ref(0);
const timerSeq = ref(0);
const battleId = ref("");
const room = ref({});
const roomNumber = ref("");
@@ -80,56 +79,68 @@ onLoad(async (options) => {
battleId.value = battleInfo.id;
battleType.value = battleInfo.config.mode;
step.value = 2;
if (battleInfo.status === 0) {
const readyRemain = Date.now() / 1000 - battleInfo.startTime;
console.log(`当前局已进行${readyRemain}`);
if (readyRemain > 0) {
setTimeout(() => {
uni.$emit("update-timer", 15 - readyRemain);
}, 200);
}
return;
} else {
step.value = 3;
start.value = true;
}
if (battleInfo.config.mode === 1) {
redTeam.value = battleInfo.redTeam;
blueTeam.value = battleInfo.blueTeam;
currentRound.value = battleInfo.currentRound;
totalRounds.value = battleInfo.maxRound;
if (battleInfo.startTime < 0) return;
start.value = true;
step.value = 3;
battleInfo.roundResults.forEach((round) => {
if (round.blueTotal && round.redTotal) {
if (round.blueTotal === round.redTotal) {
bluePoints.value += 1;
redPoints.value += 1;
} else if (round.blueTotal > round.redTotal) {
bluePoints.value += 2;
} else {
redPoints.value += 2;
if (battleInfo.status !== 0) {
currentRound.value = battleInfo.currentRound;
totalRounds.value = battleInfo.maxRound;
roundResults.value = battleInfo.roundResults;
battleInfo.roundResults.forEach((round) => {
if (round.blueTotal && round.redTotal) {
if (round.blueTotal === round.redTotal) {
bluePoints.value += 1;
redPoints.value += 1;
} else if (round.blueTotal > round.redTotal) {
bluePoints.value += 2;
} else {
redPoints.value += 2;
}
}
}
});
roundResults.value = battleInfo.roundResults;
currentShooterId.value = battleInfo.firePlayerIndex;
setTimeout(() => {
if (battleInfo.roundResults[battleInfo.roundResults.length - 1]) {
scores.value = battleInfo.roundResults[
battleInfo.roundResults.length - 1
].redArrows.filter((item) => !!item.playerId);
blueScores.value = battleInfo.roundResults[
battleInfo.roundResults.length - 1
].blueArrows.filter((item) => !!item.playerId);
}
}, 300);
if (
battleInfo.redTeam[0].shotHistory[battleInfo.currentRound] ||
battleInfo.blueTeam[0].shotHistory[battleInfo.currentRound]
) {
roundResults.value.push({
redArrows: battleInfo.redTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
blueArrows: battleInfo.blueTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
});
} else if (battleInfo.currentRound < 5) {
roundResults.value.push({
redArrows: [],
blueArrows: [],
});
setTimeout(() => {
if (battleInfo.roundResults[battleInfo.roundResults.length - 1]) {
scores.value = battleInfo.roundResults[
battleInfo.roundResults.length - 1
].redArrows.filter((item) => !!item.playerId);
blueScores.value = battleInfo.roundResults[
battleInfo.roundResults.length - 1
].blueArrows.filter((item) => !!item.playerId);
}
}, 300);
if (
battleInfo.redTeam[0].shotHistory[battleInfo.currentRound] ||
battleInfo.blueTeam[0].shotHistory[battleInfo.currentRound]
) {
roundResults.value.push({
redArrows: battleInfo.redTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
blueArrows: battleInfo.blueTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
});
} else if (battleInfo.currentRound < 5) {
roundResults.value.push({
redArrows: [],
blueArrows: [],
});
}
}
if (battleInfo.status !== 11) return;
if (battleInfo.firePlayerIndex) {
currentShooterId.value = battleInfo.firePlayerIndex;
if (redTeam.value[0].id === currentShooterId.value) {
@@ -149,28 +160,29 @@ onLoad(async (options) => {
}
}
} else if (battleInfo.config.mode === 2) {
total.value = 90;
players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
if (battleInfo.startTime < 0) return;
start.value = true;
step.value = 3;
players.value.forEach((p) => {
playersScores.value[p.id] = [...p.arrows];
if (p.id === user.value.id) {
scores.value = [...p.arrows];
}
});
const remain = Date.now() / 1000 - battleInfo.startTime;
console.log(`当前局已进行${remain}`);
if (battleInfo.status === 2) {
tips.value = `${
battleInfo.halfGame ? "下半场-" : "上半场-"
}请连续射6箭`;
const remain = Date.now() / 1000 - battleInfo.startTime;
console.log(`当前局已进行${remain}`);
tips.value = battleInfo.halfGame
? "下半场请再射6箭"
: "上半场请先射6箭";
setTimeout(() => {
uni.$emit("update-ramain", 90 - remain);
}, 300);
} else if (battleInfo.status === 9) {
startCount.value = false;
tips.value = "准备下半场";
setTimeout(() => {
uni.$emit("update-ramain", 0);
}, 300);
}
}
}
@@ -229,7 +241,6 @@ onLoad(async (options) => {
const startGame = async () => {
const result = await startRoomAPI(room.value.number);
timerSeq.value += 1;
step.value = 2;
};
@@ -244,7 +255,6 @@ async function onReceiveMessage(messages = []) {
}
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
// 这里会掉多次;
timerSeq.value += 1;
battleId.value = msg.id;
step.value = 2;
if (battleType.value === 1) {
@@ -323,8 +333,6 @@ async function onReceiveMessage(messages = []) {
if (msg.id === battleId.value) {
if (msg.constructor === MESSAGETYPES.AllReady) {
start.value = true;
timerSeq.value = 0;
scores.value = [];
totalRounds.value = msg.groupUserStatus.config.maxRounds;
step.value = 3;
roundResults.value.push({
@@ -338,18 +346,13 @@ async function onReceiveMessage(messages = []) {
startCount.value = true;
step.value = 3;
seq.value += 1;
timerSeq.value = 0;
tips.value = `${
scores.value.length ? "下半场-" : "上半场-"
}请连续射6箭`;
tips.value = scores.value.length
? "下半场请再射6箭"
: "上半场请先射6箭";
total.value = 90;
halfTimeTip.value = false;
}
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
if (!start.value) {
start.value = true;
step.value = 3;
}
if (battleType.value === 1) {
if (currentShooterId.value !== msg.userId) {
seq.value += 1;
@@ -571,6 +574,7 @@ onUnmounted(() => {
:players="players"
/>
<TestDistance :guide="false" />
<Timer />
</view>
<view v-if="step === 3" :style="{ width: '100%' }">
<ShootProgress
@@ -612,7 +616,6 @@ onUnmounted(() => {
:scores="playersScores[player.id] || []"
/>
</view>
<Timer :seq="timerSeq" />
<ScreenHint
:show="showRoundTip"
:onClose="() => (showRoundTip = false)"

View File

@@ -13,7 +13,7 @@ import Avatar from "@/components/Avatar.vue";
import ScreenHint from "@/components/ScreenHint.vue";
import Matching from "@/components/Matching.vue";
import TestDistance from "@/components/TestDistance.vue";
import { matchGameAPI, readyGameAPI } from "@/apis";
import { matchGameAPI } from "@/apis";
import { MESSAGETYPES, getMessageTypeName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -29,7 +29,6 @@ const power = ref(0);
const scores = ref([]);
const tips = ref("即将开始...");
const seq = ref(0);
const timerSeq = ref(0);
const players = ref([]);
const playersSorted = ref([]);
const playersScores = ref({});
@@ -58,8 +57,6 @@ onLoad(async (options) => {
if (battleInfo) {
battleId.value = battleInfo.id;
players.value = [...battleInfo.blueTeam, ...battleInfo.redTeam];
if (battleInfo.startTime <= 0) return;
start.value = true;
players.value.forEach((p) => {
playersScores.value[p.id] = [...p.arrows];
if (p.id === user.value.id) {
@@ -67,18 +64,30 @@ onLoad(async (options) => {
}
});
const remain = Date.now() / 1000 - battleInfo.startTime;
// 这里的开始时间不是游戏开始时间,而是上半场或者下半场或者中场的开始时间,还要根据状态来判断
console.log(`当前局已进行${remain}`);
if (battleInfo.status === 0) {
if (remain > 0) {
setTimeout(() => {
uni.$emit("update-timer", 15 - remain);
}, 200);
}
} else {
start.value = true;
}
if (battleInfo.status === 2) {
tips.value = `${
battleInfo.halfGame ? "下半场-" : "上半场-"
}请连续射6箭`;
// 这里的开始时间不是游戏开始时间,而是上半场或者下半场或者中场的开始时间,还要根据状态来判断
tips.value = battleInfo.halfGame
? "下半场请再射6箭"
: "上半场请先射6箭";
setTimeout(() => {
uni.$emit("update-ramain", 90 - remain);
}, 300);
}, 200);
} else if (battleInfo.status === 9) {
startCount.value = false;
tips.value = "准备下半场";
setTimeout(() => {
uni.$emit("update-ramain", 0);
}, 200);
}
}
} else {
@@ -89,17 +98,10 @@ onLoad(async (options) => {
}
}
});
async function stopMatch() {
uni.$showHint(3);
}
async function readyToGo() {
if (battleId.value) {
await readyGameAPI(battleId.value);
scores.value = [];
start.value = true;
timerSeq.value = 0;
}
}
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
@@ -113,7 +115,6 @@ async function onReceiveMessage(messages = []) {
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
onComplete.value = () => {
// 这里会掉多次;
timerSeq.value += 1;
battleId.value = msg.id;
players.value = [
...msg.groupUserStatus.redTeam,
@@ -130,8 +131,9 @@ async function onReceiveMessage(messages = []) {
start.value = true;
startCount.value = true;
seq.value += 1;
timerSeq.value = 0;
tips.value = `${scores.value.length ? "下半场-" : "上半场-"}请连续射6箭`;
tips.value = scores.value.length
? "下半场请再射6箭"
: "上半场请先射6箭";
halfTimeTip.value = false;
}
if (msg.constructor === MESSAGETYPES.ShootResult) {
@@ -218,7 +220,7 @@ onUnmounted(() => {
<BowTarget
v-if="start"
:currentRound="scores.length"
:totalRound="start ? 12 : 0"
:totalRound="12"
:scores="scores"
:stop="!startCount"
/>
@@ -232,7 +234,7 @@ onUnmounted(() => {
:scores="playersScores[player.id] || []"
/>
</view>
<Timer :seq="timerSeq" :callBack="readyToGo" />
<Timer v-if="!start" />
<ScreenHint
:show="halfTimeTip"
mode="small"
@@ -252,9 +254,6 @@ onUnmounted(() => {
/>
</block>
</view>
<!-- <view :style="{ marginBottom: '20px' }">
<SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
</view> -->
</Container>
</template>

View File

@@ -1,6 +1,6 @@
<script setup>
import { ref, onMounted } from "vue";
import { onShow, onHide } from "@dcloudio/uni-app";
import { ref } from "vue";
import { onShow } from "@dcloudio/uni-app";
import Container from "@/components/Container.vue";
import Avatar from "@/components/Avatar.vue";
import { getRankListAPI, isGamingAPI } from "@/apis";
@@ -37,15 +37,6 @@ const handleSelect = (index) => {
}
};
onShow(async () => {
const result = await getHomeData();
currentList.value = result.rank;
rankData.value = result;
const { userGameStats, seasonList } = result;
seasonData.value = seasonList;
updateData();
});
const toTeamMatchPage = async (gameType, teamSize) => {
if (!device.value.deviceId) {
return uni.showToast({
@@ -137,10 +128,14 @@ const updateData = () => {
});
}
};
onShow,
() => {
showSeasonList.value = false;
};
onShow(async () => {
const result = await getHomeData();
rankData.value = result;
handleSelect(selectedIndex.value);
seasonData.value = result.seasonList;
updateData();
showSeasonList.value = false;
});
</script>
<template>

View File

@@ -14,7 +14,7 @@ import SButton from "@/components/SButton.vue";
import Matching from "@/components/Matching.vue";
import RoundEndTip from "@/components/RoundEndTip.vue";
import TestDistance from "@/components/TestDistance.vue";
import { matchGameAPI, readyGameAPI } from "@/apis";
import { matchGameAPI } from "@/apis";
import { MESSAGETYPES, roundsName, getMessageTypeName } from "@/constants";
import useStore from "@/store";
import { storeToRefs } from "pinia";
@@ -36,7 +36,6 @@ const blueTeam = ref([]);
const currentShooterId = ref(0);
const tips = ref("即将开始...");
const seq = ref(0);
const timerSeq = ref(0);
const roundResults = ref([]);
const redPoints = ref(0);
const bluePoints = ref(0);
@@ -52,51 +51,61 @@ onLoad(async (options) => {
battleId.value = battleInfo.id;
redTeam.value = battleInfo.redTeam;
blueTeam.value = battleInfo.blueTeam;
if (battleInfo.startTime < 0) return;
start.value = true;
currentRound.value = battleInfo.currentRound;
battleInfo.roundResults.forEach((round) => {
if (round.blueTotal && round.redTotal) {
if (round.blueTotal === round.redTotal) {
bluePoints.value += 1;
redPoints.value += 1;
} else if (round.blueTotal > round.redTotal) {
bluePoints.value += 2;
} else {
redPoints.value += 2;
if (battleInfo.status === 0) {
const readyRemain = Date.now() / 1000 - battleInfo.startTime;
console.log(`当前局已进行${readyRemain}`);
if (readyRemain > 0) {
setTimeout(() => {
uni.$emit("update-timer", 15 - readyRemain);
}, 200);
}
} else {
start.value = true;
currentRound.value = battleInfo.currentRound;
totalRounds.value = battleInfo.maxRound;
roundResults.value = battleInfo.roundResults;
battleInfo.roundResults.forEach((round) => {
if (round.blueTotal && round.redTotal) {
if (round.blueTotal === round.redTotal) {
bluePoints.value += 1;
redPoints.value += 1;
} else if (round.blueTotal > round.redTotal) {
bluePoints.value += 2;
} else {
redPoints.value += 2;
}
}
}
});
totalRounds.value = battleInfo.maxRound;
roundResults.value = battleInfo.roundResults;
setTimeout(() => {
if (battleInfo.roundResults[battleInfo.roundResults.length - 1]) {
scores.value = battleInfo.roundResults[
battleInfo.roundResults.length - 1
].redArrows.filter((item) => !!item.playerId);
blueScores.value = battleInfo.roundResults[
battleInfo.roundResults.length - 1
].blueArrows.filter((item) => !!item.playerId);
}
}, 300);
if (
battleInfo.redTeam[0].shotHistory[battleInfo.currentRound] ||
battleInfo.blueTeam[0].shotHistory[battleInfo.currentRound]
) {
roundResults.value.push({
redArrows: battleInfo.redTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
blueArrows: battleInfo.blueTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
});
} else if (battleInfo.currentRound < 5) {
roundResults.value.push({
redArrows: [],
blueArrows: [],
});
setTimeout(() => {
if (battleInfo.roundResults[battleInfo.roundResults.length - 1]) {
scores.value = battleInfo.roundResults[
battleInfo.roundResults.length - 1
].redArrows.filter((item) => !!item.playerId);
blueScores.value = battleInfo.roundResults[
battleInfo.roundResults.length - 1
].blueArrows.filter((item) => !!item.playerId);
}
}, 300);
if (
battleInfo.redTeam[0].shotHistory[battleInfo.currentRound] ||
battleInfo.blueTeam[0].shotHistory[battleInfo.currentRound]
) {
roundResults.value.push({
redArrows: battleInfo.redTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
blueArrows: battleInfo.blueTeam[0].shotHistory[
battleInfo.currentRound
].filter((item) => !!item.playerId),
});
} else if (battleInfo.currentRound < 5) {
roundResults.value.push({
redArrows: [],
blueArrows: [],
});
}
}
if (battleInfo.status !== 11) return;
if (battleInfo.firePlayerIndex) {
currentShooterId.value = battleInfo.firePlayerIndex;
if (redTeam.value[0].id === currentShooterId.value) {
@@ -127,13 +136,6 @@ onLoad(async (options) => {
async function stopMatch() {
uni.$showHint(3);
}
async function readyToGo() {
if (battleId.value) {
await readyGameAPI(battleId.value);
start.value = true;
timerSeq.value = 0;
}
}
async function onReceiveMessage(messages = []) {
messages.forEach((msg) => {
@@ -147,7 +149,6 @@ async function onReceiveMessage(messages = []) {
if (msg.constructor === MESSAGETYPES.WaitForAllReady) {
// 这里会掉多次;
onComplete.value = () => {
timerSeq.value += 1;
battleId.value = msg.id;
redTeam.value = msg.groupUserStatus.redTeam;
blueTeam.value = msg.groupUserStatus.blueTeam;
@@ -157,8 +158,6 @@ async function onReceiveMessage(messages = []) {
if (msg.id !== battleId.value) return;
if (msg.constructor === MESSAGETYPES.AllReady) {
start.value = true;
timerSeq.value = 0;
scores.value = [];
totalRounds.value = msg.groupUserStatus.config.maxRounds;
roundResults.value.push({
redArrows: [],
@@ -166,10 +165,6 @@ async function onReceiveMessage(messages = []) {
});
}
if (msg.constructor === MESSAGETYPES.ToSomeoneShoot) {
if (!start.value) {
start.value = true;
step.value = 3;
}
if (currentShooterId.value !== msg.userId) {
seq.value += 1;
currentShooterId.value = msg.userId;
@@ -314,7 +309,7 @@ onUnmounted(() => {
:redPoints="redPoints"
:bluePoints="bluePoints"
/>
<Timer :seq="timerSeq" :callBack="readyToGo" />
<Timer v-if="!start" />
<ScreenHint
:show="showRoundTip"
:onClose="() => (showRoundTip = false)"
@@ -342,9 +337,6 @@ onUnmounted(() => {
/>
</block>
</view>
<!-- <view :style="{ marginBottom: '20px' }">
<SButton v-if="battleId && !start" :onClick="readyToGo">准备完毕</SButton>
</view> -->
</Container>
</template>