feie9454/arcteryx-game
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

0721-afternoon

Browse Source
This commit is contained in:
feie9454
2025-07-21 15:18:27 +08:00
parent 5dfaf53e39
commit eb6b6c41f3
130 changed files with 109 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/Game.vue
+35 -27
View File
@@ -724,13 +724,13 @@ function resetGame() {
emit('restart')
}
const posterHasChangedToPage2 = ref(false);
/* const posterHasChangedToPage2 = ref(false);
const posterAni = useTemplateRef('gui-ani-end-post');
watch(posterHasChangedToPage2, (newVal) => {
if (newVal) {
posterAni.value?.jumpTo('p2');
}
});
});
let hasSwapX = 0
function posterSwap(e: PointerEvent) {
@@ -741,7 +741,7 @@ function posterSwap(e: PointerEvent) {
posterHasChangedToPage2.value = true;
}
}
}
} */
</script>
<template>
@@ -749,7 +749,7 @@ function posterSwap(e: PointerEvent) {
<div class="public">
<img src="../assets/game/床.png" alt="" class="abs bed"
<img src="../assets/game/床.webp" alt="" class="abs bed"
style="width: 66vw;bottom: 12%;left: 17%;">
<AniEle :url="assets.ani.下拉蓄力提示" ref="shoot-notice" :height="334"
@@ -780,17 +780,18 @@ function posterSwap(e: PointerEvent) {
</div>
<div v-if="canAction && !showLastPage">
<img src="../assets/game/鼓风机.png" class="abs p-machine"
<img src="../assets/game/鼓风机.webp" class="abs p-machine"
style="bottom: -40%; width: 66vw; left: 17%; transform-origin: 50% 63%; transition: all 0.2s;"
:style="{ transform: `rotate(${gDeg}deg)` }" />
<div class="action">
<img draggable="false" :style="{ animationDelay: '0.1s' }"
src="../assets/game/左.png" alt="" @click="gToggle('left')">
src="../assets/game/左.webp" alt="" @click="gToggle('left')">
<img draggable="false" :style="{ animationDelay: '0.2s' }"
src="../assets/game/中.png" alt=""
src="../assets/game/中.webp" alt=""
@click="gToggle('center')">
<img draggable="false" :style="{ animationDelay: '0.0s' }"
src="../assets/game/右.png" alt="" @click="gToggle('right')">
src="../assets/game/右.webp" alt=""
@click="gToggle('right')">
</div>
<img class="abs gift-item" v-for="(gift, index) in giftList"
@@ -800,10 +801,10 @@ function posterSwap(e: PointerEvent) {
}" alt=""
:class="{ show: giftProgress == index, hide: giftProgress != index }">
<img src="../assets//game/操作提示.png" class="abs prompt" alt=""
<img src="../assets//game/操作提示.webp" class="abs prompt" alt=""
style="width: 31%; bottom: 18%; left: 34%; ">
<img src="../assets/game/风.png" alt="" class="abs wind">
<img src="../assets/game/wecare.png" alt="" class="abs wecare"
<img src="../assets/game/风.webp" alt="" class="abs wind">
<img src="../assets/game/wecare.webp" alt="" class="abs wecare"
style="width: 24vw;
left: 50%; top: 6%; transform: translateX(-50%);">
<div class="dot" v-if="!isGameEnd">
@@ -824,11 +825,11 @@ function posterSwap(e: PointerEvent) {
animationDelay: `${icon.delay}ms`,
}">
</div>
<img src="../assets/game/wecare.png" alt="" class="abs wecare"
<img src="../assets/game/wecare.webp" alt="" class="abs wecare"
style="width: 24vw;
left: 50%; top: 6%; transform: translateX(-50%);">
<img src="../assets/game/wecare标题.png" alt=""
<img src="../assets/game/wecare标题.webp" alt=""
class="abs wecare-title" style="width: 72%;left: 14%;top: 12%;">
@@ -869,7 +870,7 @@ function posterSwap(e: PointerEvent) {
style="width: 100%; height: auto;" />
</div>
<img src="../assets/game/完成收集.png" alt="" v-if="showScore"
<img src="../assets/game/完成收集.webp" alt="" v-if="showScore"
class="finish-collect abs" @click.once="finishCollect"
style="bottom: 8%;left: 33%;width: 34vw;animation: scale-in 0.3s ease-out;pointer-events: all;">
@@ -884,24 +885,31 @@ function posterSwap(e: PointerEvent) {
ref="main-logo" />
<div class="poster-container" @pointermove="posterSwap"
style="position: absolute;top: 29.3%;left: 37.2%;width: 57.3%; height: 38%; overflow: hidden;pointer-events: all;">
<AniEle :url="assets.ani.海报" ref="gui-ani-end-post"
style="width: 100%;" class="gui-ani-end-post" :height="940"
:width="671" :rules="[
{ name: 'p1', frame: 32, loop: 1, pauseAfter: true, duration: 33 },
{ name: 'p2', frame: 46, loop: 1, pauseAfter: true, duration: 33 },
]" />
<div class="poster-wrapper"
style="width: 200%; height: 100%; position: relative; overflow-x: scroll; display: flex; ">
<AniEle :url="assets.ani.海报p1" ref="gui-ani-end-post-p1"
style="width: 100%;" class="gui-ani-end-post"
:height="940" :width="671" :rules="[
{ name: 'p1', frame: 32, loop: 1, pauseAfter: true, duration: 33 },
]" />
<AniEle :url="assets.ani.海报p2" ref="gui-ani-end-post-p2"
style="width: 100%;" class="gui-ani-end-post"
:height="940" :width="671" :rules="[
{ name: 'p2', frame: 32, loop: 1, pauseAfter: true, duration: 33 },
]" />
</div>
</div>
<AniEle :url="assets.ani.线" ref="gui-ani-end" class="gui-ani-end"
:height="2462" :width="1179" :rules="[
{ name: 'all', frame: 54, loop: 1, pauseAfter: false, duration: 16 },
]"
style="width: 100%; height: auto;position: absolute;inset: 0;pointer-events: none;" />
<img src="../assets/game/床.png" alt="" class="abs last-bed"
<img src="../assets/game/床.webp" alt="" class="abs last-bed"
style="width: 66vw;bottom: -19%;left: 17%;">
<img src="../assets/game/分享海报.png" alt="" class="abs"
<img src="../assets/game/分享海报.webp" alt="" class="abs"
style="width: 34vw;bottom: -19%;left: 15%;animation: last-btn-in 0.3s ease-out forwards; cursor: pointer; pointer-events: all;">
<img src="../assets/game/再玩一次.png" alt="" class="abs"
<img src="../assets/game/再玩一次.webp" alt="" class="abs"
@click="resetGame"
style="width: 34vw;bottom: -19%;left: 51%;animation: last-btn-in 0.3s ease-out forwards; cursor: pointer; animation-delay: 200ms; pointer-events: all;">
@@ -941,7 +949,7 @@ function posterSwap(e: PointerEvent) {
<div v-if="giftShow" class="gift-popup">
<img :src="giftList[giftProgress][1]" alt="" class="abs"
style="width: 82%; left: 9%; top: 11%;">
<img src="../assets/game/收下福利.png" alt="" class="abs"
<img src="../assets/game/收下福利.webp" alt="" class="abs"
style="width: 14%; left: 43%; top: 54%;" @click="gameLoop()">
</div>
@@ -1073,18 +1081,18 @@ function posterSwap(e: PointerEvent) {
&.first {
top: 3vw;
background-image: url('../assets/game/first.png');
background-image: url('../assets/game/first.webp');
animation-delay: 0ms;
}
&.second {
background-image: url('../assets/game/second.png');
background-image: url('../assets/game/second.webp');
animation-delay: 250ms;
top: 9vw;
}
&.third {
background-image: url('../assets/game/third.png');
background-image: url('../assets/game/third.webp');
animation-delay: 500ms;
top: 9vw;
}
src/pages/Loader.vue
+1 -1
View File
@@ -79,7 +79,7 @@ const emit = defineEmits(['loaded']);
<template>
<div class="loader-container">
<img src="../assets/loader/wecare.png" alt=""
<img src="../assets/loader/wecare.webp" alt=""
style="position: absolute; left: 50%; top:40%; transform: translateX(-50%); width: 40vw; ">
src/pages/Page1.vue
+3 -3
View File
@@ -372,7 +372,7 @@ onUnmounted(() => {
</div>
</div>
<img class="input-your-name-notice"
src="../assets/p1/请填写你的名字.png" alt=""
src="../assets/p1/请填写你的名字.webp" alt=""
v-if="noticeToInputName">
<AniEle :url="assets.ani.开始探索" :width="548" :height="143"
@@ -381,7 +381,7 @@ onUnmounted(() => {
</AniEle>
</div>
<img src="../assets/返回按钮.png" alt="返回"
<img src="../assets/返回按钮.webp" alt="返回"
@click="goBackToRegionSelection" class="back-button" />
</div>
</section>
@@ -606,7 +606,7 @@ img {
width: 100%;
padding: 2vw 0;
font-size: 4.5vw;
background: transparent url('../assets/p1/输入框.png') center / contain no-repeat;
background: transparent url('../assets/p1/输入框.webp') center / contain no-repeat;
border: none;
outline: none;
color: #333;