Skip to content

F
fc-minigame
Commit 01d53c7d authored by 董政锦's avatar 董政锦
Browse files
Options

feat: PC 端 game5 马的动画；

parent 3b34f232
Show whitespace changes
Inline Side-by-side
Showing with 392 additions and 291 deletions
frontend-large/src/pages/game5/Game5.vue
View file @ 01d53c7d
...@@ -182,9 +182,10 @@ onUnmounted(() => { ...@@ -182,9 +182,10 @@ onUnmounted(() => {
</script> </script>
<template> <template>
<Loading v-if="screen === '!loading'" :players="loadingPlayers" :player-count="playerCount" <Loading v-if="screen !== 'loading'" :players="loadingPlayers" :player-count="playerCount"
@start="startGameWithMusic" /> @start="startGameWithMusic" />
<!-- <Rank1 v-else-if="screen === 'rank1'" ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic" /> --> <!-- <Rank1 v-else-if="screen === 'rank1'" ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic" -->
<Rank1 v-else ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic" /> <Rank1 v-else ref="rank1Ref" :rank-list="rankPlayers" @start="startGameWithMusic"
@next="nextRoundWithMusic" />
<!-- <Rank2 v-else :rank-list="rankPlayers" @next="nextRoundWithMusic" /> --> <!-- <Rank2 v-else :rank-list="rankPlayers" @next="nextRoundWithMusic" /> -->
</template> </template>
frontend-large/src/pages/game5/views/Rank1View.vue
View file @ 01d53c7d
<script setup lang="ts"> <script setup lang="ts">
import { ref, watch } from 'vue' import { ref, watch, onMounted, onUnmounted } from "vue";
import DesignStage from '../../../components/DesignStage.vue' import DesignStage from "../../../components/DesignStage.vue";
import type Player from '../../../commons/player.ts' import type Player from "@/commons/player.ts";
import { $is_run_local } from '@/commons/utils.ts'; import { $is_run_local } from "@/commons/utils.ts";
import { assetUrl, cssAssetUrl } from '@/commons/assets.ts'; import { cssAssetUrl, assetUrl } from "@/commons/assets.ts";
const props = defineProps<{ const props = defineProps<{
rankList: Player[]; rankList: Player[];
...@@ -11,108 +11,82 @@ const props = defineProps<{ ...@@ -11,108 +11,82 @@ const props = defineProps<{
const emit = defineEmits<{ const emit = defineEmits<{
start: []; start: [];
next: [];
}>(); }>();
const RANK_LIMIT = 10; const RANK_LIMIT = 10;
const START_COUNTDOWN_SECONDS = 3;
const GU_FRAME_DURATION = 300;
const GU_LOOP_DELAY = 1000;
const designStage = ref<InstanceType<typeof DesignStage> | null>(null); const designStage = ref<InstanceType<typeof DesignStage> | null>(null);
const rankEffects = ref<Record<string, "up" | "down" | "new">>({}); const rankEffects = ref<Record<string, "up" | "down" | "new">>({});
const guFrameIndex = ref(0); const gameStarted = ref(false);
const guBurstVisible = ref(false); const showResult = ref(false);
const guBurstKey = ref(0);
let guFramesReady: Promise<void> | undefined;
let guTimer: ReturnType<typeof setTimeout> | undefined;
let guBurstTimer: ReturnType<typeof setTimeout> | undefined;
const loadGuFrames = (dir: string) => Array.from(
{ length: 10 },
(_, index) => assetUrl(`${dir}/${String(index + 1).padStart(2, '0')}.png`),
);
const guFrames = [
loadGuFrames('game1/gu'),
loadGuFrames('game1/gu2'),
];
const imageUrls = { const imageUrls = {
bg: cssAssetUrl('game1/bg.png'), bg: cssAssetUrl("game5/bg.svg"),
logo: cssAssetUrl('game1/logo.png'), logo: cssAssetUrl("game1/logo.png"),
title: cssAssetUrl('game1/title3.png'), title: cssAssetUrl("game5/title3.webp"),
fireworks: cssAssetUrl('game1/fireworks.png'), titleRank: cssAssetUrl("game1/title-rank.png"),
titleRank: cssAssetUrl('game1/title-rank.png'), rankNo4: cssAssetUrl("game1/no4.png"),
rankNo4: cssAssetUrl('game1/no4.png'), rankNo1: cssAssetUrl("game1/no1.png"),
rankNo1: cssAssetUrl('game1/no1.png'), rankNo2: cssAssetUrl("game1/no2.png"),
rankNo2: cssAssetUrl('game1/no2.png'), rankNo3: cssAssetUrl("game1/no3.png"),
rankNo3: cssAssetUrl('game1/no3.png'), rankIcon: cssAssetUrl("game1/no-icon.png"),
rankIcon: cssAssetUrl('game1/no-icon.png'), rankNo1Icon: cssAssetUrl("game1/no1-icon.png"),
rankNo1Icon: cssAssetUrl('game1/no1-icon.png'), rankNo2Icon: cssAssetUrl("game1/no2-icon.png"),
rankNo2Icon: cssAssetUrl('game1/no2-icon.png'), rankNo3Icon: cssAssetUrl("game1/no3-icon.png"),
rankNo3Icon: cssAssetUrl('game1/no3-icon.png'), avatar: assetUrl("avatar.png"),
avatar: assetUrl('avatar.png'), };
// ========== 马匹相关 ==========
const HORSE_TYPES = [1, 2, 3, 4] as const;
const HORSE_FRAME_COUNT = 21; // 每匹马 21 帧（00-20）
interface Horse {
id: string;
horseType: number; // 1-4 颜色
lane: "top" | "bottom";
xPercent: number; // 0=屏幕左侧外, 100=屏幕右侧外
frameIndex: number; // 当前帧 0-20
frameTimer: number; // 帧切换计时器
}
const horses = ref<Horse[]>([]);
let horseIdCounter = 0;
/** 获取指定马颜色和帧的图片 URL */
const getHorseFrameUrl = (type: number, frame: number) => {
const padded = String(frame).padStart(2, "0");
return assetUrl(`game5/horse${type}/no-circle/qcnf-ma${type}_${padded}.png`);
}; };
/** 马的水平像素位移：xPercent→屏幕px */
const horseTranslateX = (xPercent: number) => {
// 从左侧-330px 跑到右侧 1920px，总行程 2250px
return -330 + xPercent * 22.5;
};
const isGameRunning = ref(false);
const emptyPlayer = (index: number): Player => ({ const emptyPlayer = (index: number): Player => ({
wechat_id: `empty-${index}`, wechat_id: `empty-${index}`,
nickname: '-', nickname: "-",
avatar: '', avatar: "",
score: 0, score: 0,
}); });
const list = ref<Player[]>(Array.from({ length: RANK_LIMIT }, (_, index) => emptyPlayer(index))); const list = ref<Player[]>(
const playerKey = (player: Player, index = 0) => player.userid || player.wechat_id || `empty-${index}`; Array.from({ length: RANK_LIMIT }, (_, index) => emptyPlayer(index)),
const mockRankStep = ref(0); );
const playerKey = (player: Player, index = 0) =>
const makeMockPlayer = (id: number, score: number): Player => ({ player.userid || player.wechat_id || `empty-${index}`;
wechat_id: `mock-${id}`,
nickname: `Player ${id}`,
avatar: '',
score,
});
const mockRankRounds: Player[][] = [
[
makeMockPlayer(1, 980),
makeMockPlayer(2, 900),
makeMockPlayer(3, 860),
makeMockPlayer(4, 820),
makeMockPlayer(5, 780),
makeMockPlayer(6, 720),
makeMockPlayer(7, 680),
makeMockPlayer(8, 640),
makeMockPlayer(9, 600),
makeMockPlayer(10, 560),
],
[
makeMockPlayer(4, 1040),
makeMockPlayer(1, 1010),
makeMockPlayer(7, 960),
makeMockPlayer(2, 940),
makeMockPlayer(11, 880),
makeMockPlayer(3, 850),
makeMockPlayer(5, 830),
makeMockPlayer(8, 790),
makeMockPlayer(6, 760),
makeMockPlayer(10, 700),
],
[
makeMockPlayer(7, 1180),
makeMockPlayer(11, 1090),
makeMockPlayer(4, 1060),
makeMockPlayer(12, 1000),
makeMockPlayer(1, 980),
makeMockPlayer(8, 930),
makeMockPlayer(2, 890),
makeMockPlayer(5, 850),
makeMockPlayer(13, 810),
makeMockPlayer(3, 780),
],
];
// ========== 排名更新 ==========
const updateRankList = (rankList: Player[]) => { const updateRankList = (rankList: Player[]) => {
const oldRanks = new Map(list.value.map((player, index) => [playerKey(player, index), index])); const oldRanks = new Map(
const next = Array.from({ length: RANK_LIMIT }, (_, index) => rankList[index] ?? emptyPlayer(index)); list.value.map((player, index) => [playerKey(player, index), index]),
);
const next = Array.from(
{ length: RANK_LIMIT },
(_, index) => rankList[index] ?? emptyPlayer(index),
);
const effects: Record<string, "up" | "down" | "new"> = {}; const effects: Record<string, "up" | "down" | "new"> = {};
next.forEach((player, index) => { next.forEach((player, index) => {
...@@ -134,155 +108,235 @@ const updateRankList = (rankList: Player[]) => { ...@@ -134,155 +108,235 @@ const updateRankList = (rankList: Player[]) => {
watch( watch(
() => props.rankList, () => props.rankList,
(rankList) => updateRankList(rankList), (rankList) => {
if (rankList && rankList.length > 0) {
updateRankList(rankList);
}
},
{ immediate: true, deep: true }, { immediate: true, deep: true },
); );
const playMockRankAnimation = () => { // ========== startIntro：倒计时 + 游戏流程 ==========
if ($is_run_local()) { const startIntro = async () => {
updateRankList(mockRankRounds[mockRankStep.value] ?? mockRankRounds[0] ?? []); showResult.value = false;
mockRankStep.value = (mockRankStep.value + 1) % mockRankRounds.length; gameStarted.value = false;
} isGameRunning.value = false;
horses.value = [];
horseIdCounter = 0;
// 启动完整倒计时：3s 开场 + 60s 游戏
const countdownPromise = designStage.value?.startCountdown(3, 60);
// 等待 3-2-1 开场倒计时结束（~3.5s 后安全触发）
await new Promise((r) => setTimeout(r, 3500));
// Phase 2: 倒计时结束 → 游戏正式开始，背景动画+马匹启动
gameStarted.value = true;
isGameRunning.value = true;
startHorseLoop();
startSpawning();
// 等待 60s 游戏倒计时完全结束
await countdownPromise;
stopGame();
}; };
const startGame = () => { const stopGame = () => {
if ($is_run_local()) { isGameRunning.value = false;
emit('start'); showResult.value = true;
} stopHorseLoop();
stopSpawning();
}; };
const stopPlayerGu = () => { // ========== 马匹动画循环 (~60fps) ==========
if (guTimer) { let horseLoopTimer: ReturnType<typeof setInterval> | undefined;
clearTimeout(guTimer); const FRAME_TICK_MS = 16;
guTimer = undefined; const HORSE_FRAME_INTERVAL = 3; // 每 3 tick 切一帧 → ~20fps 奔马动画
const HORSE_SPEED_PERCENT_PER_SEC = 100 / 60; // 60s 跑完全程
const startHorseLoop = () => {
stopHorseLoop();
horseLoopTimer = setInterval(() => {
if (!isGameRunning.value) return;
for (let i = horses.value.length - 1; i >= 0; i--) {
const horse = horses.value[i]!;
horse.xPercent += HORSE_SPEED_PERCENT_PER_SEC * (FRAME_TICK_MS / 1000);
horse.frameTimer++;
if (horse.frameTimer >= HORSE_FRAME_INTERVAL) {
horse.frameTimer = 0;
horse.frameIndex = (horse.frameIndex + 1) % HORSE_FRAME_COUNT;
} }
if (guBurstTimer) { // 跑出右边界后移除
clearTimeout(guBurstTimer); if (horse.xPercent >= 120) {
guBurstTimer = undefined; horses.value.splice(i, 1);
} }
guBurstVisible.value = false;
guFrameIndex.value = 0;
}
const preloadGuFrames = () => {
if (!guFramesReady) {
guFramesReady = Promise.all(guFrames.flat().map((src) => {
const img = new Image();
img.src = src;
return img.decode
? img.decode().catch(() => undefined)
: new Promise<void>((resolve) => {
img.onload = () => resolve();
img.onerror = () => resolve();
});
})).then(() => undefined);
} }
}, FRAME_TICK_MS);
};
return guFramesReady; const stopHorseLoop = () => {
} if (horseLoopTimer) {
clearInterval(horseLoopTimer);
const playGuLoopDelayAnimation = () => { horseLoopTimer = undefined;
if (guBurstTimer) {
clearTimeout(guBurstTimer);
guBurstTimer = undefined;
} }
};
guBurstVisible.value = false; // ========== 随机生成马匹 ==========
requestAnimationFrame(() => { let spawnTimer: ReturnType<typeof setTimeout> | undefined;
guBurstKey.value += 1;
guBurstVisible.value = true; const spawnHorse = () => {
guBurstTimer = setTimeout(() => { const type = HORSE_TYPES[Math.floor(Math.random() * HORSE_TYPES.length)]!;
guBurstVisible.value = false; const lane = Math.random() > 0.5 ? "top" : "bottom";
guBurstTimer = undefined; horses.value.push({
}, GU_LOOP_DELAY); id: `horse-${++horseIdCounter}`,
horseType: type,
lane,
xPercent: -15, // 从左侧屏幕外进场
frameIndex: Math.floor(Math.random() * HORSE_FRAME_COUNT),
frameTimer: 0,
}); });
} };
const playerGu = async () => {
stopPlayerGu();
const frameCount = Math.min(...guFrames.map((frames) => frames.length));
if (frameCount <= 0) return;
await preloadGuFrames();
let frameIndex = 0;
const tick = () => {
guFrameIndex.value = frameIndex;
if (frameIndex >= frameCount - 1) { const startSpawning = () => {
frameIndex = 0; stopSpawning();
playGuLoopDelayAnimation(); // 开局立刻出 1~2 匹
guTimer = setTimeout(tick, GU_LOOP_DELAY); spawnHorse();
return; if (Math.random() > 0.3) spawnHorse();
const scheduleNext = () => {
if (!isGameRunning.value) return;
const delay = 2000 + Math.random() * 6000; // 2~8s 随机间隔
spawnTimer = setTimeout(() => {
if (!isGameRunning.value) return;
// 场上最多 8 匹，每次出 1~2 匹
if (horses.value.length < 8) {
spawnHorse();
if (Math.random() > 0.5 && horses.value.length < 8) spawnHorse();
} }
scheduleNext();
}, delay);
};
scheduleNext();
};
frameIndex += 1; const stopSpawning = () => {
guTimer = setTimeout(tick, GU_FRAME_DURATION); if (spawnTimer) {
clearTimeout(spawnTimer);
spawnTimer = undefined;
} }
};
tick(); onMounted(() => {
} if ($is_run_local()) {
gameStarted.value = true;
isGameRunning.value = true;
startHorseLoop();
startSpawning();
}
});
const startIntro = async () => { onUnmounted(() => {
playerGu(); stopGame();
await designStage.value?.startCountdown(START_COUNTDOWN_SECONDS, 60); stopHorseLoop();
stopPlayerGu(); stopSpawning();
}; });
defineExpose({ defineExpose({
startIntro, startIntro,
}); });
// ========== 头像渲染 ==========
const avatarStyle = (item: Player) => { const avatarStyle = (item: Player) => {
const avatar = item.avatar || imageUrls.avatar const avatar = item.avatar || imageUrls.avatar;
return { return {
backgroundImage: `url("${avatar}")`, backgroundImage: `url("${avatar}")`,
} };
} };
// ========== rank item 样式 class ==========
const rankItemClass = (index: number) => {
if (index === 0) return "rank-top-1";
if (index === 1) return "rank-top-2";
if (index === 2) return "rank-top-3";
return "";
};
</script> </script>
<template> <template>
<DesignStage ref="designStage"> <DesignStage ref="designStage">
<div class="screen-container" :class="{ paused: !gameStarted || showResult }">
<!-- 背景层 -->
<div class="bg"> <div class="bg">
<div class="img-logo"></div> <div class="img-logo"></div>
<div class="img-title"></div> <div class="img-title"></div>
<div class="img-gu-group">
<div class="img-gu"> <!-- 排名列表 -->
<div v-for="(frame, index) in guFrames[1]" :key="`left-frame-${frame}`" class="gu-frame" <!-- <div class="rank-container">
:class="{ active: index === guFrameIndex }" :style="{ backgroundImage: `url(${frame})` }"> <div class="rank-txt"></div>
</div> <div class="rank-list">
<div :key="`left-${guBurstKey}`" class="gu-burst" :class="{ active: guBurstVisible }"></div> <TransitionGroup name="rank">
</div> <div
<div class="img-gu"> v-for="(item, index) in list"
<div v-for="(frame, index) in guFrames[0]" :key="`right-frame-${frame}`" class="gu-frame" :key="playerKey(item, index)"
:class="{ active: index === guFrameIndex }" :style="{ backgroundImage: `url(${frame})` }"> :class="[
</div> 'rank-item',
<div :key="`right-${guBurstKey}`" class="gu-burst" :class="{ active: guBurstVisible }"></div> rankItemClass(index),
</div> rankEffects[playerKey(item, index)] || '',
</div> ]"
<div class="rank-container"> >
<div class="rank-txt" @click="startGame()" @contextmenu.prevent="playMockRankAnimation()"></div> <div class="rank-icon">{{ index + 1 }}</div>
<TransitionGroup name="rank" tag="div" class="rank-list">
<div v-for="(item, index) in list" :key="playerKey(item, index)" class="rank-item"
:class="[rankEffects[playerKey(item, index)], index < 3 ? `rank-top-${index + 1}` : '']">
<div class="rank-icon" :key="`rank-icon-${index}`">{{ index > 2 ? index + 1 : '' }}</div>
<div class="rank-avatar" :style="avatarStyle(item)"></div> <div class="rank-avatar" :style="avatarStyle(item)"></div>
<div class="rank-nickname">{{ item.nickname }}</div> <div class="rank-nickname">{{ item.nickname }}</div>
<div class="rank-score">{{ item.score ?? 0 }}</div> <div class="rank-score">{{ item.score }}</div>
</div> </div>
</TransitionGroup> </TransitionGroup>
</div> </div>
</div> -->
<!-- 底部跑道背景（倒计时结束后滚动） -->
<div class="runway-track">
<div class="runway-inner"></div>
<div class="runway-inner"></div>
</div>
<!-- 马匹（倒计时结束后出现） -->
<template v-if="gameStarted">
<div
v-for="horse in horses"
:key="horse.id"
class="horse-wrapper"
:class="`horse-lane-${horse.lane}`"
:style="{ transform: `translateX(${horseTranslateX(horse.xPercent)}px)` }"
>
<img
class="horse-img"
:src="getHorseFrameUrl(horse.horseType, horse.frameIndex)"
alt="horse"
/>
</div>
</template>
</div>
</div> </div>
</DesignStage> </DesignStage>
</template> </template>
<style scoped> <style scoped>
.screen-container {
width: 1920px;
height: 1080px;
position: relative;
overflow: hidden;
}
.screen-container.paused .runway-track {
animation-play-state: paused;
}
.bg { .bg {
width: 1920px; width: 1920px;
height: 1080px; height: 1080px;
background: v-bind('imageUrls.bg') center / cover no-repeat; background: v-bind("imageUrls.bg") center / cover no-repeat;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
...@@ -290,75 +344,27 @@ const avatarStyle = (item: Player) => { ...@@ -290,75 +344,27 @@ const avatarStyle = (item: Player) => {
} }
.img-logo { .img-logo {
background: v-bind('imageUrls.logo'); background: v-bind("imageUrls.logo");
background-size: cover; background-size: cover;
width: 428px; width: 428px;
height: 77px; height: 77px;
position: absolute; position: absolute;
left: 37px; left: 37px;
top: 82px; top: 82px;
z-index: 20;
} }
.img-title { .img-title {
background: v-bind('imageUrls.title'); background: v-bind("imageUrls.title") no-repeat;
width: 967px; width: 675px;
height: 122px; height: 209px;
margin: 0 auto; margin: 0 auto;
margin-top: 37px; margin-top: 37px;
position: relative;
z-index: 20;
} }
.img-gu-group { /* ========== 排名容器 ========== */
.img-gu {
width: 400px;
height: 400px;
transform: scale(1.6);
position: absolute;
top: 400px;
}
.img-gu:nth-child(1) {
left: 200px;
}
.img-gu:nth-child(2) {
right: 200px;
}
.img-gu {
.gu-frame {
position: absolute;
inset: 0;
opacity: 0;
background-position: center;
background-repeat: no-repeat;
background-size: contain;
pointer-events: none;
will-change: opacity;
}
.gu-frame.active {
opacity: 1;
}
.gu-burst {
width: 200px;
height: 200px;
position: absolute;
right: 80px;
top: 30px;
opacity: 0;
transform: scale(0.6);
transform-origin: center center;
background: v-bind('imageUrls.fireworks') center / cover no-repeat;
pointer-events: none;
&.active {
animation: gu-burst-expand 1s ease-out both;
}
}
}
}
.rank-container { .rank-container {
width: 503px; width: 503px;
height: 810px; height: 810px;
...@@ -369,45 +375,47 @@ const avatarStyle = (item: Player) => { ...@@ -369,45 +375,47 @@ const avatarStyle = (item: Player) => {
left: 50%; left: 50%;
top: 210px; top: 210px;
transform: translateX(-50%); transform: translateX(-50%);
z-index: 1; z-index: 10;
overflow: hidden; overflow: hidden;
}
.rank-txt { .rank-txt {
background: v-bind('imageUrls.titleRank'); background: v-bind("imageUrls.titleRank");
width: 304px; width: 304px;
height: 40px; height: 40px;
margin: 10px auto auto auto; margin: 10px auto auto auto;
} }
.rank-list { .rank-list {
position: relative; position: relative;
} }
.rank-item { .rank-item {
background: v-bind('imageUrls.rankNo4'); background: v-bind("imageUrls.rankNo4");
width: 468px; width: 468px;
height: 68px; height: 68px;
margin: 6px auto 0 auto; margin: 6px auto 0 auto;
display: grid; display: grid;
grid-template-columns: 95px 68px 1fr 100px; grid-template-columns: 95px 68px 1fr 100px;
align-items: center; align-items: center;
color: #E00000; color: #e00000;
font-weight: bold; font-weight: bold;
}
&.rank-top-1 { .rank-item.rank-top-1 {
background: v-bind('imageUrls.rankNo1'); background: v-bind("imageUrls.rankNo1");
} }
&.rank-top-2 { .rank-item.rank-top-2 {
background: v-bind('imageUrls.rankNo2'); background: v-bind("imageUrls.rankNo2");
} }
&.rank-top-3 { .rank-item.rank-top-3 {
background: v-bind('imageUrls.rankNo3'); background: v-bind("imageUrls.rankNo3");
} }
.rank-icon { .rank-icon {
background: v-bind('imageUrls.rankIcon') center / cover no-repeat; background: v-bind("imageUrls.rankIcon") center / cover no-repeat;
width: 40px; width: 40px;
height: 40px; height: 40px;
margin: auto auto auto 20px; margin: auto auto auto 20px;
...@@ -416,30 +424,30 @@ const avatarStyle = (item: Player) => { ...@@ -416,30 +424,30 @@ const avatarStyle = (item: Player) => {
font-weight: bold; font-weight: bold;
font-size: 22px; font-size: 22px;
line-height: 40px; line-height: 40px;
} }
&.rank-top-1 .rank-icon { .rank-item.rank-top-1 .rank-icon {
background: v-bind('imageUrls.rankNo1Icon') center / cover no-repeat; background: v-bind("imageUrls.rankNo1Icon") center / cover no-repeat;
width: 60px; width: 60px;
height: 38px; height: 38px;
margin: auto auto auto 10px; margin: auto auto auto 10px;
} }
&.rank-top-2 .rank-icon { .rank-item.rank-top-2 .rank-icon {
background: v-bind('imageUrls.rankNo2Icon') center / cover no-repeat; background: v-bind("imageUrls.rankNo2Icon") center / cover no-repeat;
width: 60px; width: 60px;
height: 38px; height: 38px;
margin: auto auto auto 10px; margin: auto auto auto 10px;
} }
&.rank-top-3 .rank-icon { .rank-item.rank-top-3 .rank-icon {
background: v-bind('imageUrls.rankNo3Icon') center / cover no-repeat; background: v-bind("imageUrls.rankNo3Icon") center / cover no-repeat;
width: 60px; width: 60px;
height: 38px; height: 38px;
margin: auto auto auto 10px; margin: auto auto auto 10px;
} }
.rank-avatar { .rank-avatar {
background-position: center; background-position: center;
background-repeat: no-repeat; background-repeat: no-repeat;
background-size: cover; background-size: cover;
...@@ -447,19 +455,18 @@ const avatarStyle = (item: Player) => { ...@@ -447,19 +455,18 @@ const avatarStyle = (item: Player) => {
height: 48px; height: 48px;
border-radius: 24px; border-radius: 24px;
margin-left: 10px; margin-left: 10px;
} }
.rank-nickname { .rank-nickname {
text-indent: 10px; text-indent: 10px;
} }
.rank-score { .rank-score {
text-align: right; text-align: right;
margin-right: 30px; margin-right: 30px;
}
}
} }
/* ========== 过渡动画 ========== */
.rank-move { .rank-move {
transition: transform 0.45s ease; transition: transform 0.45s ease;
} }
...@@ -488,4 +495,97 @@ const avatarStyle = (item: Player) => { ...@@ -488,4 +495,97 @@ const avatarStyle = (item: Player) => {
.rank-item.down { .rank-item.down {
animation: rank-down-flash 0.8s ease; animation: rank-down-flash 0.8s ease;
} }
/* ========== 底部跑道背景 ========== */
.runway-track {
width: 7680px;
height: 543px;
position: absolute;
bottom: 0;
left: 0;
display: flex;
animation: bg-scroll-left 20s linear infinite;
z-index: 2;
}
.runway-inner {
width: 3840px;
height: 543px;
background: url("@/assets/images/game5/paodao.webp") 0 0 / 3840px 543px
no-repeat;
flex-shrink: 0;
}
@keyframes bg-scroll-left {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-3840px);
}
}
/* ========== 马匹 ========== */
.horse-wrapper {
position: absolute;
left: 0;
width: 330px;
height: 300px;
will-change: transform;
z-index: 5;
}
.horse-wrapper.horse-lane-top {
bottom: 320px;
}
.horse-wrapper.horse-lane-bottom {
bottom: 40px;
}
/* 马脚下阴影 */
.horse-wrapper::after {
content: "";
position: absolute;
bottom: -4px;
left: 50%;
transform: translateX(-50%);
width: 180px;
height: 24px;
background: radial-gradient(ellipse, rgba(0, 0, 0, 0.45) 0%, transparent 70%);
border-radius: 50%;
pointer-events: none;
}
.horse-img {
width: 330px;
height: 300px;
object-fit: contain;
position: relative;
z-index: 1;
}
@keyframes rank-up-flash {
0% {
background-color: #ffffcc;
}
50% {
background-color: #ffff99;
}
100% {
background-color: transparent;
}
}
@keyframes rank-down-flash {
0% {
background-color: #ffe0e0;
}
50% {
background-color: #ffcccc;
}
100% {
background-color: transparent;
}
}
</style> </style>
frontend-large/src/pages/game5/views/Rank2View.vue
View file @ 01d53c7d
...@@ -28,7 +28,7 @@ const imageUrls = { ...@@ -28,7 +28,7 @@ const imageUrls = {
pai2: cssAssetUrl('game1/pai2.png'), pai2: cssAssetUrl('game1/pai2.png'),
guan3: cssAssetUrl('game1/guan2.png'), guan3: cssAssetUrl('game1/guan2.png'),
pai3: cssAssetUrl('game1/pai3.png'), pai3: cssAssetUrl('game1/pai3.png'),
rankIcon: cssAssetUrl('game1/no-icon.png'), rankIcon: cssAssetUrl('game5/no-icon.webp'),
avatarAnimation: cssAssetUrl('avatar_animation.png'), avatarAnimation: cssAssetUrl('avatar_animation.png'),
next: cssAssetUrl('game5/next-1.webp'), next: cssAssetUrl('game5/next-1.webp'),
}; };
...@@ -361,8 +361,8 @@ const renderAvatar = (item: any | null) => { ...@@ -361,8 +361,8 @@ const renderAvatar = (item: any | null) => {
.no-icon { .no-icon {
background: v-bind('imageUrls.rankIcon') no-repeat center; background: v-bind('imageUrls.rankIcon') no-repeat center;
width: 40px; width: 42px;
height: 40px; height: 47px;
position: absolute; position: absolute;
text-align: center; text-align: center;
line-height: 40px; line-height: 40px;
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment