0716-moring

2025-07-16 11:12:26 +08:00 · 2025-07-16 11:12:26 +08:00 · e0b9b25e8f
commit e0b9b25e8f
parent cb8d35f4b6
6 changed files with 145 additions and 43 deletions
--- a/pm2.config.js
+++ b/pm2.config.js
@ -0,0 +1,24 @@
+export default {
+  apps: [
+    {
+      name: 'arcteryx-game',
+      script: 'bun',
+      args: 'run start',
+      cwd: __dirname,
+      env: {
+        ...process.env,
+      },
+      instances: 1,
+      exec_mode: 'fork',
+      watch: false,
+      max_memory_restart: '1G',
+      error_file: './logs/err.log',
+      out_file: './logs/out.log',
+      log_file: './logs/combined.log',
+      time: true,
+      autorestart: true,
+      max_restarts: 10,
+      min_uptime: '10s'
+    }
+  ]
+}
--- a/scores.json
+++ b/scores.json
@ -47,5 +47,12 @@
    "region": "奥莱",
    "store": "北京斯普瑞斯",
    "timestamp": 1752309530750
+  },
+  {
+    "name": "测试用户",
+    "time": 1.7116000000000005,
+    "region": "奥莱",
+    "store": "北京斯普瑞斯",
+    "timestamp": 1752632180489
  }
 ]
--- a/src/App.vue
+++ b/src/App.vue
@ -1,11 +1,11 @@
 <script setup lang="ts">
-import { ref, watch } from 'vue';
+import { ref, useTemplateRef, watch } from 'vue';
 import Game from './pages/Game.vue';
 import Page1 from './pages/Page1.vue';
 import assets from './assets';
 import Loader from './pages/Loader.vue';

-const stage = ref(0);
+const stage = ref(1);

 const userData = ref({
  region: '奥莱',
@ -13,12 +13,11 @@ const userData = ref({
  username: '测试用户'
 });

+const gamePage = useTemplateRef('game-page');
 function startExploration(payload: { region: string; store: string; username: string }) {
  userData.value = payload;
  stage.value = 1;
-  setTimeout(() => {
-    showPage1.value = false;
-  }, 1000);
+  gamePage.value?.init();
 }


@ -76,11 +75,15 @@ const onResize = () => {
    scale.value = 1;
  }
 };
-window.addEventListener('resize', onResize);
+
 onResize();

+const isMobile = navigator.userAgent.match(/(iPhone|iPod|Android|ios|Mobile)/i);

-const showPage1 = ref(true);
+if (!isMobile) window.addEventListener('resize', onResize);
+
+
+const gameKey = ref(10)
 </script>

 <template>
@ -101,12 +104,17 @@ const showPage1 = ref(true);



-    <Loader class="page" v-if="stage == -1" @loaded="stage = 0" />
+    <Loader class="page" v-if="stage == -1" @loaded="stage = 0"
+      style="z-index: 100;" />

-    <Page1 class="page page-1" v-if="stage >= 0&&showPage1" @start-exploration="startExploration"
-      :style="{ opacity: stage === 0 ? 1 : 0 }"  />
-    <Game class="page" v-if="stage == 1" :userdata="userData"
-      @cloud-down="cloudDown" @cloud-up="cloudUp" />
+    <Transition name="fade" mode="out-in">
+      <Page1 class="page page-1" v-if="stage == 0" style="z-index: 99;"
+        @start-exploration="startExploration" />
+    </Transition>
+
+    <Game class="page" :userdata="userData" :key="gameKey"
+      :style="{ opacity: stage === 1 ? 1 : 0 }" style="z-index: 98;"
+      @cloud-down="cloudDown" @cloud-up="cloudUp" ref="game-page" @restart="gameKey++" />

    <div class="overlay page">
      <div class="bgm"
@ -119,7 +127,17 @@ const showPage1 = ref(true);

  </main>
 </template>
+<style>
+.fade-enter-active,
+.fade-leave-active {
+  transition: opacity 0.5s ease;
+}

+.fade-enter-from,
+.fade-leave-to {
+  opacity: 0;
+}
+</style>
 <style scoped>
 .overlay {
  pointer-events: none;
@ -191,10 +209,10 @@ main {
  transform: translateY(-50%);
  width: 100%;
  height: calc(2462 / 1179 * 100vw);
-  
+
 }

-.page-1{
+.page-1 {
  transition: 0.7s all;
 }
 </style>
--- a/src/pages/Game.vue
+++ b/src/pages/Game.vue
@ -3,6 +3,14 @@ import { computed, onMounted, ref, useTemplateRef, type Ref } from 'vue';
 import assets from '../assets';
 import AniEle from '../components/AniEle.vue';

+const shootNotice = useTemplateRef('shoot-notice');
+
+defineExpose({
+    init: () => {
+        shootNotice.value?.jumpTo('蓄力');
+    }
+})
+

 const props = defineProps<{
    userdata: {
@ -596,12 +604,43 @@ async function gameEnd() {
 }

 const leaderBoard = ref([
-    { name: '始祖鸟', time: 50, region: '奥莱北区', store: "上海始祖鸟阿尔法中心" },
-    { name: '始祖鸟', time: 60, region: '奥莱北区', store: "上海始祖鸟阿尔法中心" },
-    { name: '始祖鸟', time: 70, region: '奥莱北区', store: "上海始祖鸟阿尔法中心" },
-    { name: '始祖鸟', time: 80, region: '奥莱北区', store: "上海始祖鸟阿尔法中心" },
-    { name: '始祖鸟', time: 90, region: '奥莱北区', store: "上海始祖鸟阿尔法中心" },
-    { name: '始祖鸟', time: 100, region: '奥莱北区', store: "上海始祖鸟阿尔法中心" },
+    {
+        "name": "测试用户",
+        "time": 1.7116000000000005,
+        "region": "奥莱",
+        "store": "北京斯普瑞斯"
+    },
+    {
+        "name": "阿迪斯",
+        "time": 1.9645,
+        "region": "奥莱",
+        "store": "北京斯普瑞斯"
+    },
+    {
+        "name": "Mike",
+        "time": 45.5,
+        "region": "大北区",
+        "store": "大连恒隆广场"
+    },
+    {
+        "name": "小白",
+        "time": 83.2,
+        "region": "大西区",
+        "store": "太原万象城"
+    },
+    {
+        "name": "小明",
+        "time": 98.2,
+        "region": "大西区",
+        "store": "太原万象城"
+    },
+    {
+        "name": "Elena",
+        "time": 122.2,
+        "region": "大南区",
+        "store": "深圳湾万象城"
+    }
+
 ])

 const fmtTime = (time: number) => {
@ -648,12 +687,16 @@ async function finishCollect() {
        fill: 'forwards',
    }).finished
    await sunEndEle.value?.jumpToSoftly('落下');
-    document.querySelector('.bar-container')?.animate([
+    await document.querySelector('.bar-container')?.animate([
        { transform: 'translateY(300%)' }], {
        duration: 500,
        easing: 'ease-in-out',
        fill: 'forwards',
-    })
+    }).finished
+    //@ts-ignore
+    document.querySelector('.lines').style.display = 'none';
+    //@ts-ignore
+    document.querySelector('.bar-container').style.display = 'none';


    showLastPage.value = true;
@ -661,6 +704,10 @@ async function finishCollect() {

 // 重置游戏状态的函数
 function resetGame() {
+    console.log(1);
+
+    emit('restart');
+
    return
    // 重置所有响应式状态到初始值
    gPos.value = 'center';
@ -715,7 +762,7 @@ function resetGame() {
            <img src="../assets/game/床.png" alt="" class="abs bed"
                style="width: 66vw;bottom: 12%;left: 17%;">

-            <AniEle :url="assets.ani.下拉蓄力提示" ref="aniEle" :height="334"
+            <AniEle :url="assets.ani.下拉蓄力提示" ref="shoot-notice" :height="334"
                :width="337" :rules="[
                    { name: '蓄力', frame: 241, loop: 2 },
                ]" class="abs arrow" style="bottom: 7%;width: 30vw;left: 35%;"
@ -742,7 +789,7 @@ function resetGame() {
            </div>
        </div>

-        <div v-if="canAction">
+        <div v-if="canAction && !showLastPage">
            <img src="../assets/game/鼓风机.png" class="abs p-machine"
                style="bottom: -40%; width: 66vw; left: 17%; transform-origin: 50% 63%; transition: all 0.2s;"
                :style="{ transform: `rotate(${gDeg}deg)` }" />
@ -778,7 +825,7 @@ function resetGame() {
        </div>

        <div class="game-end abs" v-if="isGameEnd"
-            style="z-index: 2; inset: 0; height: 100%; width: 100%;">
+            style="z-index: 2; inset: 0; height: 100%; width: 100%;pointer-events: none;">
            <div class="icon-cloud"
                style="position: absolute; left: 50%; top: 20%;">
                <img v-for="icon in floatIcons" :src="icon.src" alt="" :style="{
@ -834,7 +881,7 @@ function resetGame() {

            <img src="../assets/game/完成收集.png" 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;">
+                style="bottom: 8%;left: 33%;width: 34vw;animation: scale-in 0.3s ease-out;pointer-events: all;">


        </div>
@ -857,10 +904,10 @@ function resetGame() {
                style="width: 66vw;bottom: -19%;left: 17%;">

            <img src="../assets/game/分享海报.png" alt="" class="abs"
-                style="width: 34vw;bottom: -19%;left: 15%;animation: last-btn-in 0.3s ease-out forwards;">
+                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"
                @click="resetGame"
-                style="width: 34vw;bottom: -19%;left: 51%;animation: last-btn-in 0.3s ease-out forwards; animation-delay: 200ms; cursor: pointer;">
+                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;
            align-items: center; flex-direction: column;">
@ -874,7 +921,7 @@ function resetGame() {
                </div>

                <div class="time"
-                    style="font-size: 9vw;animation: line-in 0.5s ease-out 0.8s forwards;transform: translateX(-210%);">
+                    style="font-size: 10vw;animation: line-in 0.5s ease-out 0.8s forwards;transform: translateX(-210%);">
                    {{ fmtTime(timeSpent / 1000) }}</div>
            </div>

@ -882,9 +929,9 @@ function resetGame() {
                style="left: 10%; top:30%;width: 24%;height: 10%;gap:2vw; display: flex;animation: line-in 0.5s ease-out 0.4s forwards;transform: translateX(-210%);
            align-items: center; flex-direction: column;justify-content: center;">
                <div class="region"
-                    style="width: 20vw; background-color: white;font-size: 3vw;text-align: center;height: 4.5vw;line-height: 4.5vw; border-radius: 4.5vw;">
+                    style="width: 20vw; background-color: white;font-size: 3vw;text-align: center;height: 5.2vw;line-height: 5.2vw; border-radius: 4.5vw;">
                    {{ userdata.region }}</div>
-                <div class="store" style="font-size: 2.8vw; color: gray;">{{
+                <div class="store" style="font-size: 2.9vw; color: gray;">{{
                    userdata.store }}</div>
            </div>

@ -1068,24 +1115,26 @@ function resetGame() {
            .rank {
                // italic
                font-style: italic;
-                flex-grow: 1;
+                flex: 1;
                font-size: 4vw;
                text-align: center;
                color: #7EA0CA;
            }

            .name {
-                flex-grow: 2;
+                flex: 2;
                text-align: center;
+                border-right: .35vw solid black;
            }

            .time {
-                flex-grow: 2;
+                flex: 2;
                text-align: center;
+                border-right: .35vw solid black;
            }

            .region {
-                flex-grow: 2;
+                flex: 2;
                color: gray;
                text-align: center;
            }
--- a/src/pages/Page1.vue
+++ b/src/pages/Page1.vue
@ -110,6 +110,14 @@ async function startExploration() {
        noticeToInputName.value = true;
        return;
    }
+
+    emit('startExploration', {
+        region: selectedRegion.value,
+        store: selectedStores.value[selectedStoreIndex.value].店铺,
+        username: nameInput.value
+    });
+
+    await new Promise(resolve => setTimeout(resolve, 400)); // 等待动画结束
    startExplorationRules.value[0].reverse = true;
    // 2. 将放大的气泡恢复原状

@ -121,11 +129,7 @@ async function startExploration() {

    document.querySelector('.sun-wrap')?.classList.add('fade-out');

-    emit('startExploration', {
-        region: selectedRegion.value,
-        store: selectedStores.value[selectedStoreIndex.value].店铺,
-        username: nameInput.value
-    });
+
 }


@ -593,7 +597,7 @@ img {

 .input-container {
    position: relative;
-    width: 80%;
+    width: 55%;
    margin: 0 auto;
 }

--- a/todo.md
+++ b/todo.md
@ -17,7 +17,7 @@

 游戏结算：
 1. 动画卡轴不正确，小太阳收脚的那一下应该是落在蹦床上的时间点，收脚是落地缓冲，现在节奏点不对； @solved
-2. 在没有点击收集完成的时候，小太阳应该是在排行榜上来回跳，循环，现在是一个循环后直接跳回下部；
+2. 在没有点击收集完成的时候，小太阳应该是在排行榜上来回跳，循环，现在是一个循环后直接跳回下部； @solved

 164 左上
 230 
@ -28,4 +28,4 @@
 33:  263 - end 


-1. 排行榜后台是不是还没完成？
+1. 排行榜后台是不是还没完成？ @solved