Skip to content

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

feat: PC 端 game5 马的动画；

parent 3b34f232
Hide whitespace changes
Inline Side-by-side
Showing with 512 additions and 411 deletions
frontend-large/src/pages/game5/Game5.vue
View file @ 01d53c7d
......@@ -182,9 +182,10 @@ onUnmounted(() => {
</script>
<template>
<Loading v-if="screen === '!loading'" :players="loadingPlayers" :player-count="playerCount"
<Loading v-if="screen !== 'loading'" :players="loadingPlayers" :player-count="playerCount"
@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-if="screen === 'rank1'" 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" /> -->
</template>
frontend-large/src/pages/game5/views/Rank1View.vue
View file @ 01d53c7d
<script setup lang="ts">
import { ref, watch } from 'vue'
import DesignStage from '../../../components/DesignStage.vue'
import type Player from '../../../commons/player.ts'
import { $is_run_local } from '@/commons/utils.ts';
import { assetUrl, cssAssetUrl } from '@/commons/assets.ts';
import { ref, watch, onMounted, onUnmounted } from "vue";
import DesignStage from "../../../components/DesignStage.vue";
import type Player from "@/commons/player.ts";
import { $is_run_local } from "@/commons/utils.ts";
import { cssAssetUrl, assetUrl } from "@/commons/assets.ts";
const props = defineProps<{
rankList: Player[];
rankList: Player[];
}>();
const emit = defineEmits<{
start: [];
start: [];
next: [];
}>();
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 rankEffects = ref<Record<string, "up" | "down" | "new">>({});
const guFrameIndex = ref(0);
const guBurstVisible = 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 gameStarted = ref(false);
const showResult = ref(false);
const imageUrls = {
bg: cssAssetUrl('game1/bg.png'),
logo: cssAssetUrl('game1/logo.png'),
title: cssAssetUrl('game1/title3.png'),
fireworks: cssAssetUrl('game1/fireworks.png'),
titleRank: cssAssetUrl('game1/title-rank.png'),
rankNo4: cssAssetUrl('game1/no4.png'),
rankNo1: cssAssetUrl('game1/no1.png'),
rankNo2: cssAssetUrl('game1/no2.png'),
rankNo3: cssAssetUrl('game1/no3.png'),
rankIcon: cssAssetUrl('game1/no-icon.png'),
rankNo1Icon: cssAssetUrl('game1/no1-icon.png'),
rankNo2Icon: cssAssetUrl('game1/no2-icon.png'),
rankNo3Icon: cssAssetUrl('game1/no3-icon.png'),
avatar: assetUrl('avatar.png'),
bg: cssAssetUrl("game5/bg.svg"),
logo: cssAssetUrl("game1/logo.png"),
title: cssAssetUrl("game5/title3.webp"),
titleRank: cssAssetUrl("game1/title-rank.png"),
rankNo4: cssAssetUrl("game1/no4.png"),
rankNo1: cssAssetUrl("game1/no1.png"),
rankNo2: cssAssetUrl("game1/no2.png"),
rankNo3: cssAssetUrl("game1/no3.png"),
rankIcon: cssAssetUrl("game1/no-icon.png"),
rankNo1Icon: cssAssetUrl("game1/no1-icon.png"),
rankNo2Icon: cssAssetUrl("game1/no2-icon.png"),
rankNo3Icon: cssAssetUrl("game1/no3-icon.png"),
avatar: assetUrl("avatar.png"),
};
const emptyPlayer = (index: number): Player => ({
wechat_id: `empty-${index}`,
nickname: '-',
avatar: '',
score: 0,
});
// ========== 马匹相关 ==========
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;
const list = ref<Player[]>(Array.from({ length: RANK_LIMIT }, (_, index) => emptyPlayer(index)));
const playerKey = (player: Player, index = 0) => player.userid || player.wechat_id || `empty-${index}`;
const mockRankStep = ref(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 makeMockPlayer = (id: number, score: number): Player => ({
wechat_id: `mock-${id}`,
nickname: `Player ${id}`,
avatar: '',
score,
const isGameRunning = ref(false);
const emptyPlayer = (index: number): Player => ({
wechat_id: `empty-${index}`,
nickname: "-",
avatar: "",
score: 0,
});
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 list = ref<Player[]>(
Array.from({ length: RANK_LIMIT }, (_, index) => emptyPlayer(index)),
);
const playerKey = (player: Player, index = 0) =>
player.userid || player.wechat_id || `empty-${index}`;
// ========== 排名更新 ==========
const updateRankList = (rankList: Player[]) => {
const oldRanks = new Map(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"> = {};
next.forEach((player, index) => {
const key = playerKey(player, index);
if (!key || key.startsWith("empty-")) return;
const oldIndex = oldRanks.get(key);
if (oldIndex === undefined) effects[key] = "new";
else if (oldIndex > index) effects[key] = "up";
else if (oldIndex < index) effects[key] = "down";
});
list.value = next;
rankEffects.value = {};
requestAnimationFrame(() => {
rankEffects.value = effects;
});
const oldRanks = new Map(
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"> = {};
next.forEach((player, index) => {
const key = playerKey(player, index);
if (!key || key.startsWith("empty-")) return;
const oldIndex = oldRanks.get(key);
if (oldIndex === undefined) effects[key] = "new";
else if (oldIndex > index) effects[key] = "up";
else if (oldIndex < index) effects[key] = "down";
});
list.value = next;
rankEffects.value = {};
requestAnimationFrame(() => {
rankEffects.value = effects;
});
};
watch(
() => props.rankList,
(rankList) => updateRankList(rankList),
{ immediate: true, deep: true },
() => props.rankList,
(rankList) => {
if (rankList && rankList.length > 0) {
updateRankList(rankList);
}
},
{ immediate: true, deep: true },
);
const playMockRankAnimation = () => {
if ($is_run_local()) {
updateRankList(mockRankRounds[mockRankStep.value] ?? mockRankRounds[0] ?? []);
mockRankStep.value = (mockRankStep.value + 1) % mockRankRounds.length;
}
// ========== startIntro：倒计时 + 游戏流程 ==========
const startIntro = async () => {
showResult.value = false;
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 = () => {
if ($is_run_local()) {
emit('start');
}
const stopGame = () => {
isGameRunning.value = false;
showResult.value = true;
stopHorseLoop();
stopSpawning();
};
const stopPlayerGu = () => {
if (guTimer) {
clearTimeout(guTimer);
guTimer = undefined;
// ========== 马匹动画循环 (~60fps) ==========
let horseLoopTimer: ReturnType<typeof setInterval> | undefined;
const FRAME_TICK_MS = 16;
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 (horse.xPercent >= 120) {
horses.value.splice(i, 1);
}
}
if (guBurstTimer) {
clearTimeout(guBurstTimer);
guBurstTimer = undefined;
}
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);
}
return guFramesReady;
}
}, FRAME_TICK_MS);
};
const playGuLoopDelayAnimation = () => {
if (guBurstTimer) {
clearTimeout(guBurstTimer);
guBurstTimer = undefined;
}
const stopHorseLoop = () => {
if (horseLoopTimer) {
clearInterval(horseLoopTimer);
horseLoopTimer = undefined;
}
};
guBurstVisible.value = false;
requestAnimationFrame(() => {
guBurstKey.value += 1;
guBurstVisible.value = true;
guBurstTimer = setTimeout(() => {
guBurstVisible.value = false;
guBurstTimer = undefined;
}, GU_LOOP_DELAY);
});
}
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) {
frameIndex = 0;
playGuLoopDelayAnimation();
guTimer = setTimeout(tick, GU_LOOP_DELAY);
return;
}
frameIndex += 1;
guTimer = setTimeout(tick, GU_FRAME_DURATION);
}
// ========== 随机生成马匹 ==========
let spawnTimer: ReturnType<typeof setTimeout> | undefined;
const spawnHorse = () => {
const type = HORSE_TYPES[Math.floor(Math.random() * HORSE_TYPES.length)]!;
const lane = Math.random() > 0.5 ? "top" : "bottom";
horses.value.push({
id: `horse-${++horseIdCounter}`,
horseType: type,
lane,
xPercent: -15, // 从左侧屏幕外进场
frameIndex: Math.floor(Math.random() * HORSE_FRAME_COUNT),
frameTimer: 0,
});
};
tick();
}
const startSpawning = () => {
stopSpawning();
// 开局立刻出 1~2 匹
spawnHorse();
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();
};
const startIntro = async () => {
playerGu();
await designStage.value?.startCountdown(START_COUNTDOWN_SECONDS, 60);
stopPlayerGu();
const stopSpawning = () => {
if (spawnTimer) {
clearTimeout(spawnTimer);
spawnTimer = undefined;
}
};
defineExpose({
startIntro,
onMounted(() => {
if ($is_run_local()) {
gameStarted.value = true;
isGameRunning.value = true;
startHorseLoop();
startSpawning();
}
});
onUnmounted(() => {
stopGame();
stopHorseLoop();
stopSpawning();
});
defineExpose({
startIntro,
});
// ========== 头像渲染 ==========
const avatarStyle = (item: Player) => {
const avatar = item.avatar || imageUrls.avatar
const avatar = item.avatar || imageUrls.avatar;
return {
backgroundImage: `url("${avatar}")`,
};
};
return {
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>
<template>
<DesignStage ref="designStage">
<div class="bg">
<div class="img-logo"></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"
:class="{ active: index === guFrameIndex }" :style="{ backgroundImage: `url(${frame})` }">
</div>
<div :key="`left-${guBurstKey}`" class="gu-burst" :class="{ active: guBurstVisible }"></div>
</div>
<div class="img-gu">
<div v-for="(frame, index) in guFrames[0]" :key="`right-frame-${frame}`" class="gu-frame"
:class="{ active: index === guFrameIndex }" :style="{ backgroundImage: `url(${frame})` }">
</div>
<div :key="`right-${guBurstKey}`" class="gu-burst" :class="{ active: guBurstVisible }"></div>
</div>
</div>
<div class="rank-container">
<div class="rank-txt" @click="startGame()" @contextmenu.prevent="playMockRankAnimation()"></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-nickname">{{ item.nickname }}</div>
<div class="rank-score">{{ item.score ?? 0 }}</div>
</div>
</TransitionGroup>
</div>
<DesignStage ref="designStage">
<div class="screen-container" :class="{ paused: !gameStarted || showResult }">
<!-- 背景层 -->
<div class="bg">
<div class="img-logo"></div>
<div class="img-title"></div>
<!-- 排名列表 -->
<!-- <div class="rank-container">
<div class="rank-txt"></div>
<div class="rank-list">
<TransitionGroup name="rank">
<div
v-for="(item, index) in list"
:key="playerKey(item, index)"
:class="[
'rank-item',
rankItemClass(index),
rankEffects[playerKey(item, index)] || '',
]"
>
<div class="rank-icon">{{ index + 1 }}</div>
<div class="rank-avatar" :style="avatarStyle(item)"></div>
<div class="rank-nickname">{{ item.nickname }}</div>
<div class="rank-score">{{ item.score }}</div>
</div>
</TransitionGroup>
</div>
</div> -->
<!-- 底部跑道背景（倒计时结束后滚动） -->
<div class="runway-track">
<div class="runway-inner"></div>
<div class="runway-inner"></div>
</div>
</DesignStage>
<!-- 马匹（倒计时结束后出现） -->
<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>
</DesignStage>
</template>
<style scoped>
.screen-container {
width: 1920px;
height: 1080px;
position: relative;
overflow: hidden;
}
.screen-container.paused .runway-track {
animation-play-state: paused;
}
.bg {
width: 1920px;
height: 1080px;
background: v-bind('imageUrls.bg') center / cover no-repeat;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
width: 1920px;
height: 1080px;
background: v-bind("imageUrls.bg") center / cover no-repeat;
display: flex;
flex-direction: column;
overflow: hidden;
position: relative;
}
.img-logo {
background: v-bind('imageUrls.logo');
background-size: cover;
width: 428px;
height: 77px;
position: absolute;
left: 37px;
top: 82px;
background: v-bind("imageUrls.logo");
background-size: cover;
width: 428px;
height: 77px;
position: absolute;
left: 37px;
top: 82px;
z-index: 20;
}
.img-title {
background: v-bind('imageUrls.title');
width: 967px;
height: 122px;
margin: 0 auto;
margin-top: 37px;
}
.img-gu-group {
.img-gu {
width: 400px;
height: 400px;
transform: scale(1.6);
position: absolute;
top: 400px;
}
background: v-bind("imageUrls.title") no-repeat;
width: 675px;
height: 209px;
margin: 0 auto;
margin-top: 37px;
position: relative;
z-index: 20;
}
.img-gu:nth-child(1) {
left: 200px;
}
/* ========== 排名容器 ========== */
.rank-container {
width: 503px;
height: 810px;
background: #fff;
opacity: 0.9;
border-radius: 30px;
position: absolute;
left: 50%;
top: 210px;
transform: translateX(-50%);
z-index: 10;
overflow: hidden;
}
.img-gu:nth-child(2) {
right: 200px;
}
.rank-txt {
background: v-bind("imageUrls.titleRank");
width: 304px;
height: 40px;
margin: 10px auto auto auto;
}
.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-list {
position: relative;
}
.rank-container {
width: 503px;
height: 810px;
background: #fff;
opacity: 0.9;
border-radius: 30px;
position: absolute;
left: 50%;
top: 210px;
transform: translateX(-50%);
z-index: 1;
overflow: hidden;
.rank-txt {
background: v-bind('imageUrls.titleRank');
width: 304px;
height: 40px;
margin: 10px auto auto auto;
}
.rank-item {
background: v-bind("imageUrls.rankNo4");
width: 468px;
height: 68px;
margin: 6px auto 0 auto;
display: grid;
grid-template-columns: 95px 68px 1fr 100px;
align-items: center;
color: #e00000;
font-weight: bold;
}
.rank-list {
position: relative;
}
.rank-item.rank-top-1 {
background: v-bind("imageUrls.rankNo1");
}
.rank-item {
background: v-bind('imageUrls.rankNo4');
width: 468px;
height: 68px;
margin: 6px auto 0 auto;
display: grid;
grid-template-columns: 95px 68px 1fr 100px;
align-items: center;
color: #E00000;
font-weight: bold;
&.rank-top-1 {
background: v-bind('imageUrls.rankNo1');
}
&.rank-top-2 {
background: v-bind('imageUrls.rankNo2');
}
&.rank-top-3 {
background: v-bind('imageUrls.rankNo3');
}
.rank-icon {
background: v-bind('imageUrls.rankIcon') center / cover no-repeat;
width: 40px;
height: 40px;
margin: auto auto auto 20px;
text-align: center;
color: white;
font-weight: bold;
font-size: 22px;
line-height: 40px;
}
&.rank-top-1 .rank-icon {
background: v-bind('imageUrls.rankNo1Icon') center / cover no-repeat;
width: 60px;
height: 38px;
margin: auto auto auto 10px;
}
&.rank-top-2 .rank-icon {
background: v-bind('imageUrls.rankNo2Icon') center / cover no-repeat;
width: 60px;
height: 38px;
margin: auto auto auto 10px;
}
&.rank-top-3 .rank-icon {
background: v-bind('imageUrls.rankNo3Icon') center / cover no-repeat;
width: 60px;
height: 38px;
margin: auto auto auto 10px;
}
.rank-avatar {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 48px;
height: 48px;
border-radius: 24px;
margin-left: 10px;
}
.rank-nickname {
text-indent: 10px;
}
.rank-score {
text-align: right;
margin-right: 30px;
}
}
.rank-item.rank-top-2 {
background: v-bind("imageUrls.rankNo2");
}
.rank-item.rank-top-3 {
background: v-bind("imageUrls.rankNo3");
}
.rank-icon {
background: v-bind("imageUrls.rankIcon") center / cover no-repeat;
width: 40px;
height: 40px;
margin: auto auto auto 20px;
text-align: center;
color: white;
font-weight: bold;
font-size: 22px;
line-height: 40px;
}
.rank-item.rank-top-1 .rank-icon {
background: v-bind("imageUrls.rankNo1Icon") center / cover no-repeat;
width: 60px;
height: 38px;
margin: auto auto auto 10px;
}
.rank-item.rank-top-2 .rank-icon {
background: v-bind("imageUrls.rankNo2Icon") center / cover no-repeat;
width: 60px;
height: 38px;
margin: auto auto auto 10px;
}
.rank-item.rank-top-3 .rank-icon {
background: v-bind("imageUrls.rankNo3Icon") center / cover no-repeat;
width: 60px;
height: 38px;
margin: auto auto auto 10px;
}
.rank-avatar {
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 48px;
height: 48px;
border-radius: 24px;
margin-left: 10px;
}
.rank-nickname {
text-indent: 10px;
}
.rank-score {
text-align: right;
margin-right: 30px;
}
/* ========== 过渡动画 ========== */
.rank-move {
transition: transform 0.45s ease;
transition: transform 0.45s ease;
}
.rank-enter-active,
.rank-leave-active {
transition: opacity 0.25s ease, transform 0.25s ease;
transition: opacity 0.25s ease, transform 0.25s ease;
}
.rank-leave-active {
position: absolute;
left: 17px;
position: absolute;
left: 17px;
}
.rank-enter-from,
.rank-leave-to {
opacity: 0;
transform: translateY(90px);
opacity: 0;
transform: translateY(90px);
}
.rank-item.up,
.rank-item.new {
animation: rank-up-flash 0.8s ease;
animation: rank-up-flash 0.8s ease;
}
.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>
frontend-large/src/pages/game5/views/Rank2View.vue
View file @ 01d53c7d
......@@ -28,7 +28,7 @@ const imageUrls = {
pai2: cssAssetUrl('game1/pai2.png'),
guan3: cssAssetUrl('game1/guan2.png'),
pai3: cssAssetUrl('game1/pai3.png'),
rankIcon: cssAssetUrl('game1/no-icon.png'),
rankIcon: cssAssetUrl('game5/no-icon.webp'),
avatarAnimation: cssAssetUrl('avatar_animation.png'),
next: cssAssetUrl('game5/next-1.webp'),
};
......@@ -361,8 +361,8 @@ const renderAvatar = (item: any | null) => {
.no-icon {
background: v-bind('imageUrls.rankIcon') no-repeat center;
width: 40px;
height: 40px;
width: 42px;
height: 47px;
position: absolute;
text-align: center;
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