0716-moring

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'
+    }
+  ]
+}

scores.json

@@ -47,5 +47,12 @@
     "region": "奥莱",
     "store": "北京斯普瑞斯",
     "timestamp": 1752309530750
+  },
+  {
+    "name": "测试用户",
+    "time": 1.7116000000000005,
+    "region": "奥莱",
+    "store": "北京斯普瑞斯",
+    "timestamp": 1752632180489
   }
 ]

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(() => {
+  gamePage.value?.init();
-    showPage1.value = false;
-  }, 1000);
 }
 
 
@@ -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"
+    <Transition name="fade" mode="out-in">
-      :style="{ opacity: stage === 0 ? 1 : 0 }"  />
+      <Page1 class="page page-1" v-if="stage == 0" style="z-index: 99;"
-    <Game class="page" v-if="stage == 1" :userdata="userData"
+        @start-exploration="startExploration" />
-      @cloud-down="cloudDown" @cloud-up="cloudUp" />
+    </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>

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": "测试用户",
-    { name: '始祖鸟', time: 70, region: '奥莱北区', store: "上海始祖鸟阿尔法中心" },
+        "time": 1.7116000000000005,
-    { name: '始祖鸟', time: 80, region: '奥莱北区', store: "上海始祖鸟阿尔法中心" },
+        "region": "奥莱",
-    { name: '始祖鸟', time: 90, region: '奥莱北区', store: "上海始祖鸟阿尔法中心" },
+        "store": "北京斯普瑞斯"
-    { name: '始祖鸟', time: 100, 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;
             }

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;
 }
 

todo.md

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