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

0721-noon

Browse Source
This commit is contained in:
feie9454
2025-07-21 14:03:08 +08:00
parent e0b9b25e8f
commit 5dfaf53e39
14 changed files with 135 additions and 72 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/App.vue
+2 -1
View File
@@ -64,7 +64,7 @@ watch(playingBgm, (val) => {
//std radio is 2462 / 1179
const scale = ref(1);
const scale = ref(-1);
const onResize = () => {
let radio = window.innerHeight / window.innerWidth;
let stdRadio = 2462 / 1179;
@@ -141,6 +141,7 @@ const gameKey = ref(10)
<style scoped>
.overlay {
pointer-events: none;
z-index: 1111111;
}
main {
src/assets/ani/后段效果.zip
BIN
View File
Binary file not shown.
src/assets/ani/小太阳总.zip
BIN
View File
Binary file not shown.
src/assets/ani/海报.zip
BIN
View File
Binary file not shown.
src/assets/ani/线.zip
BIN
View File
Binary file not shown.
src/assets/ani/结尾.zip
BIN
View File
Binary file not shown.
src/assets/ani/结尾主标.zip
BIN
View File
Binary file not shown.
src/assets/game/收下福利.png
BIN
View File
Binary file not shown.
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 3.0 KiB

After

Width:  |  Height:  |  Size: 4.1 KiB

src/assets/index.ts
+3 -1
View File
@@ -22,11 +22,13 @@ export default {
小太阳总: new URL('./ani/小太阳总.zip', import.meta.url).href,
后端效果: new URL('./ani/后段效果.zip', import.meta.url).href,
主标出现: new URL('./ani/主标出现.zip', import.meta.url).href,
结尾: new URL('./ani/结尾.zip', import.meta.url).href,
线: new URL('./ani/线.zip', import.meta.url).href,
P1太阳总: new URL('./ani/P1太阳总.zip', import.meta.url).href,
点击选择阵营: new URL('./ani/点击选择阵营.zip', import.meta.url).href,
//x, y = (484, 782) -> (786, 908)
开始探索: new URL('./ani/开始探索.zip', import.meta.url).href,
结尾主标: new URL('./ani/结尾主标.zip', import.meta.url).href,
海报: new URL('./ani/海报.zip', import.meta.url).href,
},
icons: [
[new URL('./icons/icon1.png', import.meta.url).href, new URL('./icons/bigicon1.png', import.meta.url).href],
src/data/index.ts
-6
View File
@@ -84,12 +84,6 @@ export const regions: RegionData = {
"店铺号": "T033",
"店铺": "天津佛罗伦萨",
"备注": "T033-天津佛罗伦萨"
},
{
"城市": "长春",
"店铺号": "T046",
"店铺": "长春净月赛特奥莱",
"备注": "T046-长春净月赛特奥莱"
}
],
"奥莱东区": [
src/pages/Game.vue
+58 -59
View File
@@ -1,5 +1,5 @@
<script setup lang="ts">
import { computed, onMounted, ref, useTemplateRef, type Ref } from 'vue';
import { computed, onMounted, ref, useTemplateRef, watch, type Ref } from 'vue';
import assets from '../assets';
import AniEle from '../components/AniEle.vue';
@@ -565,7 +565,7 @@ async function gameEnd() {
document.querySelector('.sun-ani-wrapper')?.animate([
{ transform: 'translateY(8%) translateX(-50%)', left: '50%', bottom: '23%', width: '60vw' },
], {
duration: 1800,
duration: 1100,
easing: 'ease-in-out',
fill: 'forwards',
}).finished
@@ -657,11 +657,24 @@ const showScore = ref(false)
const showLastPage = ref(false);
const sunAniEndRules = ref([
{ name: 'all', frame: 165, loop: 1, pauseAfter: false, duration: 33 },
{ name: 'all', frame: 164, loop: 1, pauseAfter: false, duration: 33 },
{ name: '左右跳', frame: 66, loop: 0, pauseAfter: true, duration: 33 },
{ name: '落下', frame: 32, loop: 1, pauseAfter: false, duration: 33 },
{ name: 'loop', frame: 33, loop: 0, pauseAfter: true, duration: 33 },
])
import QRCode from 'qrcode';
const qrcodeUrl = ref('');
QRCode.toDataURL(`https://arcteryx-game-demo.xn--876a.net`, {
width: 256,
}).then(url => {
qrcodeUrl.value = url;
}).catch(err => {
console.error('生成二维码失败:', err);
});
async function finishCollect() {
document.querySelector('.finish-collect')?.animate([
{ transform: 'scale(1)' },
@@ -698,59 +711,36 @@ async function finishCollect() {
//@ts-ignore
document.querySelector('.bar-container').style.display = 'none';
showLastPage.value = true;
setTimeout(() => {
if (!posterHasChangedToPage2.value) posterHasChangedToPage2.value = true;
}, 8000);
}
// 重置游戏状态的函数
function resetGame() {
console.log(1);
emit('restart')
}
emit('restart');
const posterHasChangedToPage2 = ref(false);
const posterAni = useTemplateRef('gui-ani-end-post');
watch(posterHasChangedToPage2, (newVal) => {
if (newVal) {
posterAni.value?.jumpTo('p2');
}
});
return
// 重置所有响应式状态到初始值
gPos.value = 'center';
transitionOn.value = true;
lastTime = 0;
giftShow.value = false;
canAction.value = false;
sunPos.value = [0, 0];
giftPos.value = [null, null];
giftStartPos.value = [0, 0];
giftEndPos.value = [0, 0];
giftMoveProgress.value = 0;
giftMoveDirection.value = 1;
giftProgress.value = 0;
isGameEnd.value = false;
timeSpent.value = 0;
showEndAni.value = false;
showScore.value = false;
showLastPage.value = false;
// 重新生成图标位置
floatIcons.value = generateIconPositions();
// 重置动画元素到初始状态
sunEle.value?.jumpTo('起飞前');
sunEndEle.value?.jumpTo('loop');
// 清除所有动画和样式
const elementsToReset = [
'.bed', '.sun-ani-wrapper', '.p-machine', '.action img',
'.gift-item', '.wind', '.bar-container', '.finish-collect',
'.wecare-title', '.lines'
];
elementsToReset.forEach(selector => {
const element = document.querySelector(selector);
if (element instanceof HTMLElement) {
element.getAnimations().forEach(animation => animation.cancel());
element.style.animation = '';
element.style.transform = '';
element.style.opacity = '';
let hasSwapX = 0
function posterSwap(e: PointerEvent) {
if (posterHasChangedToPage2.value) return;
if (e.buttons === 1) {
hasSwapX += e.offsetX
if (Math.abs(hasSwapX) > 100) {
posterHasChangedToPage2.value = true;
}
});
}
}
</script>
@@ -784,7 +774,7 @@ function resetGame() {
{ name: '起飞前', frame: 90, loop: 0, pauseAfter: true, duration: 33 },
{ name: '蓄力飞', frame: 181, loop: 1, pauseAfter: false, duration: 33 },
{ name: '天上飞', frame: 90, loop: 0, pauseAfter: true, duration: 33 },
{ name: '落下', frame: 393, loop: 0, pauseAfter: false, duration: 33 },
{ name: '落下', frame: 382, loop: 0, pauseAfter: false, duration: 33 },
]" style="width: 100%; height: auto;" />
</div>
</div>
@@ -888,18 +878,24 @@ function resetGame() {
<div class="last-page" v-if="showLastPage"
style="z-index: 0;position: absolute; inset: 0;height: 100%; width: 100%; pointer-events: none;">
<img src="../assets/game/end_right_bg.png" alt="" style="position: absolute;top: 29.3%;left: 37.2%;width: 57.4%; height: 38.1%;
animation: fade-in 3s ease-in-out forwards; opacity: 0;">
<AniEle :url="assets.ani.结尾" ref="gui-ani-end" class="gui-ani-end"
<AniEle :url="assets.ani.结尾主标" :width="925" :height="340"
:rules="[{ name: 'main', frame: 41, loop: 1, pauseAfter: true, duration: 33, reverse: false }]"
style="position: absolute;top: 13%;width: 80%;left: 11%; pointer-events:none;"
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>
<AniEle :url="assets.ani.线" ref="gui-ani-end" class="gui-ani-end"
:height="2462" :width="1179" :rules="[
{ name: 'all', frame: 105, loop: 1, pauseAfter: false, duration: 16 },
{ name: 'all', frame: 54, loop: 1, pauseAfter: false, duration: 16 },
]"
style="width: 100%; height: auto;position: absolute;inset: 0;pointer-events: none;" />
<AniEle :url="assets.ani.主标出现" :width="1015" :height="336"
:rules="[{ name: 'main', frame: 41, loop: 1, pauseAfter: true, duration: 33, reverse: false }]"
style="position: absolute;top: 13%;width: 84%;left: 8%; pointer-events:none;"
ref="main-logo" />
<img src="../assets/game/床.png" alt="" class="abs last-bed"
style="width: 66vw;bottom: -19%;left: 17%;">
@@ -909,7 +905,7 @@ function resetGame() {
@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;">
<div class="time-spent abs" style="left: 10%; top:44%;width: 24%; display: flex;
<div class="time-spent abs" style="left: 10%; top:44%;width: 24%;height: 23%; display: flex;
align-items: center; flex-direction: column;">
<div class="line-1"
style="display: flex; align-items: center; gap: 1vw; animation: line-in 0.5s ease-out 0.6s forwards;transform: translateX(-210%);">
@@ -923,6 +919,9 @@ function resetGame() {
<div class="time"
style="font-size: 10vw;animation: line-in 0.5s ease-out 0.8s forwards;transform: translateX(-210%);">
{{ fmtTime(timeSpent / 1000) }}</div>
<img :src="qrcodeUrl" alt=""
style="width: 100%;bottom:7%;position: absolute;animation: line-in 0.5s ease-out 1s forwards;transform: translateX(-210%);">
</div>
<div class="region-area abs"
src/pages/Page1.vue
+6 -5
View File
@@ -331,7 +331,7 @@ onUnmounted(() => {
<img :src="i.src" alt="" style="height: 100%;width: 100%;"
draggable="false">
<span
:style="{ color: i.tc || '#000', top: (i.trt ?? 0) + 50 + '%' }">
:style="{ top: (i.trt ?? 0) + 50 + '%' }">
*{{ i.tt }}
</span>
</div>
@@ -366,7 +366,7 @@ onUnmounted(() => {
</div>
<div class="name-input-section relative">
<div class="title relative">请输入你的名字</div>
<div class="title relative">请输入你的中文名字</div>
<div class="input-container relative">
<input type="text" class="name-input" placeholder="">
</div>
@@ -435,10 +435,11 @@ onUnmounted(() => {
left: 50%;
transform: translate(-50%, -50%);
font-weight: 400;
width: fit-content;
width: max-content;
position: absolute;
opacity: 1;
transition: opacity 1s ease-in-out;
}
}
@@ -571,8 +572,8 @@ img {
margin-bottom: 2vw;
.title {
font-size: 5vw;
color: #333;
font-size: 4.5vw;
color: #000;
margin-bottom: 4vw;
font-weight: normal;
}