开始界面

index.html

@@ -31,9 +31,12 @@
             startImageLogo.onload = function () {
                 startImageBackgroundDiv.style.display = 'block';
                 var onAnimationEnd = function () {
-                    startImageBackgroundDiv.style.display = 'none';
+                    if (window.core && core.plugin && core.plugin.startAnimationEnded) {
-                    startImageLogo.classList.remove("startImageAnimation");
+                        core.plugin.startAnimationEnded.value = true;
-                    startImageDiv.classList.remove("startImageDivAnimation");
+                        startImageBackgroundDiv.style.display = 'none';
+                        startImageLogo.classList.remove("startImageAnimation");
+                        startImageDiv.classList.remove("startImageDivAnimation");
+                    }
                 }
                 startImageDiv.addEventListener("webkitAnimationEnd", onAnimationEnd);
                 startImageDiv.addEventListener("animationend", onAnimationEnd);
@@ -50,7 +53,6 @@
         <!-- injection -->
         <div id='gameGroup'>
             <p id='mainTips'>请稍候...</p>
-            <img id='musicBtn'>
             <div id='startPanel'>
                 <div id='startTop'>
                     <div id='startTopProgressBar'>
@@ -59,16 +61,6 @@
                     <p id='startTopLoadTips'>资源即将开始加载</p>
                     <p id='startTopHint'>HTML5魔塔游戏平台，享受更多魔塔游戏：<br />https://h5mota.com/</p>
                 </div>
-                <img id='startBackground'>
-                <p id='startLogo'></p>
-                <div id='startButtonGroup'>
-                    <div id='startButtons'>
-                        <span class='startButton' id='playGame'>开始游戏</span>
-                        <span class='startButton' id='loadGame'>载入游戏</span>
-                        <span class='startButton' id='replayGame'>录像回放</span>
-                    </div>
-                    <div id='levelChooseButtons'></div>
-                </div>
             </div>
             <div id='floorMsgGroup'>
                 <p id='logoLabel'></p>

public/libs/actions.js

@@ -1695,7 +1695,7 @@ actions.prototype._clickSL = function (x, y) {
         if (core.events.recoverEvents(core.status.event.interval)) return;
         core.ui.closePanel();
         delete core.status.tempRoute;
-        if (!core.isPlaying()) core.showStartAnimate(true);
+        if (!core.isPlaying()) document.getElementById('start').style.top = '0';
         return;
     }
     // 删除

public/libs/control.js

@@ -502,18 +502,11 @@ control.prototype.showStartAnimate = function (noAnimate, callback) {
 };
 
 control.prototype._showStartAnimate_resetDom = function () {
-    core.dom.startPanel.style.opacity = 1;
+    core.plugin.loaded.value = true;
-    core.dom.startPanel.style.display = 'block';
-    core.dom.startTop.style.opacity = 1;
-    core.dom.startTop.style.display = 'block';
-    core.dom.startButtonGroup.style.display = 'none';
-    core.dom.startButtons.style.display = 'block';
-    core.dom.levelChooseButtons.style.display = 'none';
     core.status.played = false;
+    core.dom.gameGroup.style.display = 'none';
     core.clearStatus();
     core.clearMap('all');
-    core.dom.musicBtn.style.display = 'block';
-    core.setMusicBtn();
     // 重置音量
     core.events.setVolume(1, 0);
     core.updateStatusBar();
@@ -521,9 +514,7 @@ control.prototype._showStartAnimate_resetDom = function () {
 
 control.prototype._showStartAnimate_finished = function (start, callback) {
     core.dom.startTop.style.display = 'none';
-    core.dom.startButtonGroup.style.display = 'block';
     main.selectedButton = null;
-    main.selectButton(0);
     if (start) core.startGame();
     if (callback) callback();
 };
@@ -2561,6 +2552,10 @@ control.prototype._doSL_load = function (id, callback) {
             core.saves.autosave.now,
             1
         )[0];
+        if (!main.replayChecking) {
+            core.plugin.startOpened.value = false;
+            core.plugin.loaded.value = false;
+        }
         if (core.isPlaying() && !core.status.gameOver) {
             core.control.autosave(0);
             core.saves.autosave.now -= 1;
@@ -2575,6 +2570,10 @@ control.prototype._doSL_load = function (id, callback) {
             id == 'autoSave' ? id : 'save' + id,
             null,
             function (data) {
+                if (!main.replayChecking) {
+                    core.plugin.startOpened.value = false;
+                    core.plugin.loaded.value = false;
+                }
                 if (id == 'autoSave' && data != null) {
                     core.saves.autosave.data = data;
                     if (!(core.saves.autosave.data instanceof Array)) {
@@ -3696,14 +3695,7 @@ control.prototype.resumeBgm = function (resumeTime) {
     this.setMusicBtn();
 };
 
-control.prototype.setMusicBtn = function () {
+control.prototype.setMusicBtn = function () {};
-    if (core.musicStatus.bgmStatus)
-        core.dom.musicBtn.src =
-            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAABWVBMVEX///9iYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmL///8AAAC5ubn+/v6xsbEtLS0MDAxmZmZoaGhvb2/c3Nzd3d38/Pz9/f0oKCgpKSl0dHR1dXW6urrb29v7+/v09PTv7+/39/cgICACAgImJibh4eGFhYWGhoaHh4eOjo5paWm7u7vDw8PMzMwyMjI7OztAQEDe3t5FRUVMTEzj4+Pl5eXm5ubp6enr6+tcXFzi4uL19fVeXl74+PgjIyNkZGQGBgaSkpKYmJiampqenp4DAwMwMDBnZ2cICAivr68eHh63t7cLCwsSEhLw8PBhYWEUFBQVFRXNzc3Pz8/Z2dna2toaGhqkpKSlpaWpqamrq6tFOUNAAAAAc3RSTlMAAwQFBhUWGxwkJSYyO0dISVBRUmpvj5CSk5SVoaOlpqiysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKyA0IuUgAAAVdJREFUeF5NkVVbw0AQRTcQrLR4IIEGcidJoaUuQHF3d3d3+P/CkuxCzss8nG++mbnDBJXhNt2CpbeFK1kQpSEKidlc8S9qdATRa6UIdQMoxEpDA0Ov3wUAPfW+qLWACydNv9zMrzkJwPK6FB3oHyOfXfuNxvoBQ+GmBYinhHB77TmiVBxoYUw1AYcEq332AS8OYKosAuTT0nza9uU2USYPRJgGxEiSOFywJ3mNARozgBJJzkfLvfu8JgGDWcC9FEsjWzR+y80gYDEAA8QZ3N6kmP1Fs3fEASB7pob7Hh+Wz5L0ci17Or05J7bH6B6dZv05XWK3rG+myV05Ert592Qo55sPuoIr7hEZHHtieIPWy0RU9DLwc3Mnck/vi8/E8XNrDWQtEVnL/ySKMrv0jPwPp870fprcyYifmiEmqGpHkI5q9ofSFIUk2qiwIGpEMyxYhhZRRcMPz89RJ2s9W8wAAAAASUVORK5CYII=';
-    else
-        core.dom.musicBtn.src =
-            'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAAZCAMAAADzN3VRAAABYlBMVEX///9iYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmJiYmL////8/PwAAABmZmZoaGihoaGioqKxsbG5ubnb29vc3Nzd3d3h4eHi4uL9/f3+/v4tLS1nZ2d0dHSUlJSenp66uroMDAz7+/spKSkoKCgUFBRpaWkVFRVvb291dXU7OzuVlZWYmJhkZGQgICAjIyOkpKQCAgK3t7cGBgbv7++pqamrq6seHh4mJiZhYWGamprp6enr6+saGhpeXl7j4+Pl5eXm5uZKSkrw8PD09PT19fW7u7vDw8PMzMwICAgwMDAyMjILCwtAQECGhoaHh4eBgYGFhYUSEhJXV1dZWVlcXFyOjo6SkpLNzc339/fPz8/Z2dna2tqTk5OlpaWxOPeTAAAAdnRSTlMAAwQFBhUWGxwkJSYyO0dISVBRUmpvj5CSk5SVoaOlpqiysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKysrKyNuo+uwAAAWJJREFUeF5NkmV34zAQReUm7WbTuJBNunY3bvXGDjNTkZkZlpn5/9eR5FPfbzr3jGb0RkwRiMQMDm7EIgHmRxtLwMOaHHoQjwz4MUKeCM8AWMrmd7u7f/aXAMyOShHiQD1n04DtN5e5FMBFlSauIsm585dKi4CpuSYKJIv1tBDVmvOSqJgEoowFLSBHaQh10XHWiCgHWEGmAw2blPrvOK/KRJUGoLM4kCVSKrWz7HwgoiwQZyaQJ0+9PvxV23BNATAZB25IqX9b3+jTW9fcApwB6NLgUD5NY3mPXnwmFwBezff1ztzRFzTp94FXMy36HDuCa2RafdnnmZqtL818Gl9/qNnEeyrUk2aTPiKj3qMyWBVi/YSuWq5qiwxkbtX3vYWzdz/l8M0k8ERlvViiB1Ygslb7SbVtJezncj+Cx5bYaeGuonZqhZlieAp+no74/s5EAh6JcY35Cepxk4ObcT3IJPe/1lKsDpFCFQAAAABJRU5ErkJggg==';
-};
 
 ////// 更改背景音乐的播放 //////
 control.prototype.triggerBgm = function () {
@@ -4199,10 +4191,6 @@ control.prototype._resize_gameGroup = function (obj) {
     var startBackground = core.domStyle.isVertical
         ? main.styles.startVerticalBackground || main.styles.startBackground
         : main.styles.startBackground;
-    if (main.dom.startBackground.getAttribute('__src__') != startBackground) {
-        main.dom.startBackground.setAttribute('__src__', startBackground);
-        main.dom.startBackground.src = startBackground;
-    }
 
     var gameGroup = core.dom.gameGroup;
     var totalWidth, totalHeight;
@@ -4238,15 +4226,6 @@ control.prototype._resize_gameGroup = function (obj) {
     floorMsgGroup.style.fontSize = 16 * core.domStyle.scale + 'px';
     // startPanel
     core.dom.startPanel.style.fontSize = 16 * core.domStyle.scale + 'px';
-    // musicBtn
-    if (core.domStyle.isVertical || core.domStyle.scale < 1) {
-        core.dom.musicBtn.style.right = core.dom.musicBtn.style.bottom = '3px';
-    } else {
-        core.dom.musicBtn.style.right =
-            (obj.clientWidth - totalWidth) / 2 + 'px';
-        core.dom.musicBtn.style.bottom =
-            (obj.clientHeight - totalHeight) / 2 - 27 + 'px';
-    }
 };
 
 control.prototype._resize_canvas = function (obj) {

public/libs/core.js

@@ -312,8 +312,6 @@ core.prototype.init = function (coreData, callback) {
             core._afterLoadResources(callback);
         });
     });
-    core.dom.musicBtn.style.display = 'block';
-    core.setMusicBtn();
 };
 
 core.prototype._init_flags = function () {
@@ -331,7 +329,6 @@ core.prototype._init_flags = function () {
     core.dom.versionLabel.innerText = core.firstData.version;
     core.dom.logoLabel.innerText = core.firstData.title;
     document.title = core.firstData.title + ' - HTML5魔塔';
-    document.getElementById('startLogo').innerText = core.firstData.title;
     (core.firstData.shops || []).forEach(function (t) {
         core.initStatus.shops[t.id] = t;
     });

public/libs/events.js

@@ -23,9 +23,10 @@ events.prototype.resetGame = function (hero, hard, floorId, maps, values) {
 
 ////// 游戏开始事件 //////
 events.prototype.startGame = function (hard, seed, route, callback) {
-    main.dom.levelChooseButtons.style.display = 'none';
-    main.dom.startButtonGroup.style.display = 'none';
     hard = hard || '';
+    core.dom.gameGroup.style.display = 'block';
+    core.plugin.startOpened.value = false;
+    core.plugin.loaded.value = false;
 
     if (main.mode != 'play') return;
 
@@ -310,6 +311,7 @@ events.prototype._gameOver_askRate = function (ending) {
 
 ////// 重新开始游戏；此函数将回到标题页面 //////
 events.prototype.restart = function () {
+    core.hideStatusBar();
     core.showStartAnimate();
     core.playBgm(main.startBgm);
 };

public/main.js

@@ -29,9 +29,6 @@ function main() {
         startTopProgressBar: document.getElementById('startTopProgressBar'),
         startTopProgress: document.getElementById('startTopProgress'),
         startTopLoadTips: document.getElementById('startTopLoadTips'),
-        startBackground: document.getElementById('startBackground'),
-        startLogo: document.getElementById('startLogo'),
-        startButtonGroup: document.getElementById('startButtonGroup'),
         floorMsgGroup: document.getElementById('floorMsgGroup'),
         logoLabel: document.getElementById('logoLabel'),
         versionLabel: document.getElementById('versionLabel'),
@@ -239,22 +236,20 @@ main.prototype.init = function (mode, callback) {
         var mainData = data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d.main;
         for (var ii in mainData) main[ii] = mainData[ii];
 
-        main.dom.startLogo.style = main.styles.startLogoStyle;
+        // main.levelChoose = main.levelChoose || [];
-        main.dom.startButtonGroup.style = main.styles.startButtonsStyle;
+        // main.levelChoose.forEach(function (value) {
-        main.levelChoose = main.levelChoose || [];
+        //     var span = document.createElement('span');
-        main.levelChoose.forEach(function (value) {
+        //     span.setAttribute('class', 'startButton');
-            var span = document.createElement('span');
+        //     span.innerText = value.title || '';
-            span.setAttribute('class', 'startButton');
+        //     span.id = value.name;
-            span.innerText = value.title || '';
+        //     (function (span, str_) {
-            span.id = value.name;
+        //         span.onclick = function () {
-            (function (span, str_) {
+        //             core.events.startGame(str_);
-                span.onclick = function () {
+        //         };
-                    core.events.startGame(str_);
+        //     })(span, value.name || '');
-                };
+        //     main.dom.levelChooseButtons.appendChild(span);
-            })(span, value.name || '');
+        // });
-            main.dom.levelChooseButtons.appendChild(span);
+
-        });
-        main.createOnChoiceAnimation();
         main.importFonts(main.fonts);
 
         main.loadJs('libs', main.loadList, function () {
@@ -491,30 +486,6 @@ main.prototype.createOnChoiceAnimation = function () {
     }
 };
 
-////// 选项 //////
-main.prototype.selectButton = function (index) {
-    var select = function (children) {
-        index = (index + children.length) % children.length;
-        for (var i = 0; i < children.length; ++i) {
-            children[i].classList.remove('onChoiceAnimate');
-        }
-        children[index].classList.add('onChoiceAnimate');
-        if (main.selectedButton == index) {
-            children[index].click();
-        } else {
-            main.selectedButton = index;
-        }
-    };
-
-    if (core.dom.startPanel.style.display != 'block') return;
-
-    if (main.dom.startButtons.style.display == 'block') {
-        select(main.dom.startButtons.children);
-    } else if (main.dom.levelChooseButtons.style.display == 'block') {
-        select(main.dom.levelChooseButtons.children);
-    }
-};
-
 ////// 创建字体 //////
 main.prototype.importFonts = function (fonts) {
     if (!(fonts instanceof Array) || fonts.length == 0) return;
@@ -610,21 +581,6 @@ main.prototype.listen = function () {
         }
     };
 
-    [main.dom.startButtons, main.dom.levelChooseButtons].forEach(function (
-        dom
-    ) {
-        dom.onmousemove = function (e) {
-            for (var i = 0; i < dom.children.length; ++i) {
-                if (
-                    dom.children[i] == e.target &&
-                    i != (main.selectedButton || 0)
-                ) {
-                    main.selectButton(i);
-                }
-            }
-        };
-    });
-
     ////// 开始选择时 //////
     main.dom.body.onselectstart = function () {
         return false;
@@ -932,38 +888,38 @@ main.prototype.listen = function () {
     };
 
     ////// 点击“开始游戏”时 //////
-    main.dom.playGame.onclick = function () {
+    // main.dom.playGame.onclick = function () {
-        main.dom.startButtons.style.display = 'none';
+    //     main.dom.startButtons.style.display = 'none';
-        main.core.control.checkBgm();
+    //     main.core.control.checkBgm();
 
-        if (main.levelChoose.length == 0) {
+    //     if (main.levelChoose.length == 0) {
-            core.events.startGame('');
+    //         core.events.startGame('');
-        } else {
+    //     } else {
-            main.dom.levelChooseButtons.style.display = 'block';
+    //         main.dom.levelChooseButtons.style.display = 'block';
-            main.selectedButton = null;
+    //         main.selectedButton = null;
-            main.selectButton(0);
+    //         main.selectButton(0);
-        }
+    //     }
-    };
+    // };
 
-    ////// 点击“载入游戏”时 //////
+    // ////// 点击“载入游戏”时 //////
-    main.dom.loadGame.onclick = function () {
+    // main.dom.loadGame.onclick = function () {
-        main.core.control.checkBgm();
+    //     main.core.control.checkBgm();
-        main.core.load();
+    //     main.core.load();
-    };
+    // };
 
-    ////// 点击“录像回放”时 //////
+    // ////// 点击“录像回放”时 //////
-    main.dom.replayGame.onclick = function () {
+    // main.dom.replayGame.onclick = function () {
-        main.core.control.checkBgm();
+    //     main.core.control.checkBgm();
-        main.core.chooseReplayFile();
+    //     main.core.chooseReplayFile();
-    };
+    // };
 
-    main.dom.musicBtn.onclick = function () {
+    // main.dom.musicBtn.onclick = function () {
-        try {
+    //     try {
-            if (main.core) main.core.triggerBgm();
+    //         if (main.core) main.core.triggerBgm();
-        } catch (ee) {
+    //     } catch (ee) {
-            console.error(ee);
+    //         console.error(ee);
-        }
+    //     }
-    };
+    // };
 
     window.onblur = function () {
         if (main.core && main.core.control) {

public/project/functions.js

@@ -49,9 +49,6 @@ var functions_d6ad677b_427a_4623_b50f_a445a3b0ef8a = {
             if (core.hasFlag('hideStatusBar'))
                 core.hideStatusBar(core.hasFlag('showToolbox'));
             else core.showStatusBar();
-            // 隐藏右下角的音乐按钮
-            core.dom.musicBtn.style.display = 'none';
-            core.dom.enlargeBtn.style.display = 'none';
             if (main.mode === 'play' && !main.replayChecking) {
                 core.splitArea();
                 core.resetFlagSettings();

public/styles.css

@@ -35,9 +35,9 @@ body {
 }
 
 #musicBtn {
-    position: fixed;
+    position: absolute;
     bottom: 3px;
-    right: 3px;
+    right: -20%;
     cursor: pointer;
     z-index: 400;
     display: none;
@@ -107,6 +107,7 @@ body {
     transform: translate(-50%, -50%);
     z-index: 260;
     object-fit: cover;
+    filter: sepia(30%) contrast(70%);
 }
 
 #startLogo {
@@ -152,24 +153,17 @@ body {
     display: none;
     z-index: 310;
     bottom: 0;
-    margin-bottom: 5%;
+    margin-bottom: 7%;
-    left: 50%;
+    left: 30%;
     transform: translateX(-50%);
     padding: 15px 25px;
-    /* default value */
-    background-image: linear-gradient(
-        to bottom,
-        rgba(76, 73, 255, 0.7),
-        rgba(106, 40, 145, 0.7)
-    );
-    border: #ffffff 1px solid;
-    caret-color: #ffd700;
-    border-radius: 10px;
     text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),
         0px 0px 1px rgba(255, 255, 255, 0.3);
 }
 
 #playGame {
+    position: relative;
+    left: 10%;
     color: transparent;
     background-image: linear-gradient(
         to bottom,
@@ -181,6 +175,8 @@ body {
 }
 
 #loadGame {
+    position: relative;
+    left: 5%;
     color: transparent;
     background-image: linear-gradient(
         to bottom,
@@ -192,6 +188,8 @@ body {
 }
 
 #replayGame {
+    position: relative;
+
     color: transparent;
     background-image: linear-gradient(
         to bottom,
@@ -210,14 +208,6 @@ body {
     display: none;
 }
 
-#easy {
-    background-image: linear-gradient(
-        to bottom,
-        rgb(255, 255, 255),
-        rgb(87, 255, 72)
-    );
-}
-
 span#hard {
     background-image: linear-gradient(
         to bottom,
@@ -247,10 +237,6 @@ span#hard {
     transform: scale(1);
 }
 
-.startButton:hover {
-    transform: scale(1.2);
-}
-
 .onChoiceAnimate {
     animation: onChoice 2s ease-in-out 0s infinite normal none running;
 }
@@ -604,8 +590,8 @@ p#name {
 }
 
 .startImageDivAnimation {
-    -webkit-animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
+    -webkit-animation: startImageDivDisappear 2s ease-in-out 3s alternate 1;
-    animation: startImageDivDisappear 2s ease-in-out 5s alternate 1;
+    animation: startImageDivDisappear 2s ease-in-out 3s alternate 1;
 }
 
 @-webkit-keyframes startImageDivDisappear {

src/App2.vue

@@ -1,5 +1,6 @@
 <template>
     <div id="non-ui">
+        <Start v-if="startOpened"></Start>
         <StatusBar v-if="showStatusBar"></StatusBar>
         <MarkedEnemy v-if="showMarkedEnemy && showStatusBar"></MarkedEnemy>
         <Studied
@@ -12,15 +13,20 @@
 
 <script lang="ts" setup>
 import { ref } from 'vue';
-import StatusBar from './ui/statusBar.vue';
+import {
-import { showStatusBar, showStudiedSkill } from './plugin/uiController';
+    showStatusBar,
-import MarkedEnemy from './ui/markedEnemy.vue';
+    showStudiedSkill,
-import Chapter from './ui/chapter.vue';
+    startOpened
+} from './plugin/uiController';
 import { chapterContent, chapterShowed } from './plugin/ui/chapter';
 import { showMarkedEnemy } from './plugin/mark';
-import Studied from './ui/studied.vue';
 import { showStudied, useFixed } from './plugin/settings';
+import MarkedEnemy from './ui/markedEnemy.vue';
+import StatusBar from './ui/statusBar.vue';
+import Chapter from './ui/chapter.vue';
+import Studied from './ui/studied.vue';
 import Fixed from './ui/fixed.vue';
+import Start from './ui/start.vue';
 </script>
 
 <style lang="less" scoped>

src/plugin/mark.ts

@@ -47,6 +47,11 @@ export function unmarkEnemy(id: EnemyIds) {
     checkMarkedEnemy();
 }
 
+export function unmarkAll() {
+    markedEnemy.splice(0);
+    checkMarkedEnemy();
+}
+
 /**
  * 获得所有被标记的怪物
  */
@@ -139,6 +144,7 @@ export default function init() {
         markEnemy,
         hasMarkedEnemy,
         unmarkEnemy,
-        showMarkedEnemy
+        showMarkedEnemy,
+        unmarkAll
     };
 }

src/plugin/uiController.ts

@@ -23,10 +23,21 @@ export const flyOpened = ref(false);
 export const showStudiedSkill = ref(false);
 export const fixedDetailOpened = ref(false);
 export const shopOpened = ref(false);
+export const startOpened = ref(false);
 
 export const transition = ref(true);
 export const noClosePanel = ref(false);
 
+export const loaded = ref(false);
+export const startAnimationEnded = ref(false);
+
+watch(loaded, n => {
+    if (n && startAnimationEnded.value) startOpened.value = true;
+});
+watch(startAnimationEnded, n => {
+    if (n && loaded.value) startOpened.value = true;
+});
+
 let app: HTMLDivElement;
 
 /** ui声明列表 */
@@ -78,7 +89,10 @@ export default function init() {
         flyOpened,
         showStudiedSkill,
         fixedDetailOpened,
-        shopOpened
+        shopOpened,
+        startOpened,
+        startAnimationEnded,
+        loaded
     };
 }
 

src/types/event.d.ts

@@ -42,7 +42,7 @@ interface Events extends EventData {
      */
     startGame(
         hard: string,
-        seed: number,
+        seed?: number,
         route?: string,
         callback?: () => void
     ): void;

src/types/plugin.d.ts

@@ -206,6 +206,9 @@ interface PluginUis {
     /** 商店是否打开 */
     readonly shopOpened: Ref<boolean>;
 
+    /** 开始界面是否打开 */
+    readonly startOpened: Ref<boolean>;
+
     /** ui栈 */
     readonly uiStack: Ref<any[]>;
 

src/ui/start.vue

@@ -0,0 +1,396 @@
+<template>
+    <div id="start">
+        <div id="start-div">
+            <img id="background" src="/project/images/bg.jpg" />
+            <div id="start-main">
+                <div id="title">人类：开天辟地</div>
+                <div id="buttons">
+                    <right-outlined id="cursor" />
+                    <TransitionGroup name="start">
+                        <span
+                            class="start-button"
+                            v-for="(v, i) of toshow"
+                            :id="v"
+                            :key="v"
+                            :selected="selected === v"
+                            :showed="showed"
+                            @click="clickStartButton(v)"
+                            >{{ text[i] }}</span
+                        >
+                    </TransitionGroup>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script lang="ts" setup>
+import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
+import { RightOutlined } from '@ant-design/icons-vue';
+import { sleep } from 'mutate-animate';
+
+let startdiv: HTMLDivElement;
+let start: HTMLDivElement;
+let main: HTMLDivElement;
+let cursor: HTMLElement;
+
+let buttons: HTMLSpanElement[] = [];
+
+let played: boolean;
+
+const showed = ref(false);
+
+const text1 = ['开始游戏', '读取存档', '录像回放', '查看成就'].reverse();
+const text2 = ['轮回', '分支', '观测', '回忆'].reverse();
+
+const ids = ['start-game', 'load-game', 'replay', 'achievement'].reverse();
+const hardIds = ['easy', 'hard-hard', 'back'].reverse();
+const text = ref(text1);
+const hard = ['简单', '困难', '返回'].reverse();
+const toshow = reactive<string[]>([]);
+
+const selected = ref('start-game');
+
+function resize() {
+    const scale = core.domStyle.scale;
+    const h = core._PY_;
+    const height = h * scale;
+    const width = height * 1.5;
+    startdiv.style.width = `${width}px`;
+    startdiv.style.height = `${height}px`;
+    main.style.fontSize = `${scale * 16}px`;
+}
+
+function showCursor() {
+    cursor.style.opacity = '1';
+    setCursor(buttons[0], 0);
+}
+
+/**
+ * 设置光标位置
+ */
+function setCursor(ele: HTMLSpanElement, i: number) {
+    const style = getComputedStyle(ele);
+    cursor.style.top = `${
+        parseFloat(style.height) * (i + 0.5) -
+        parseFloat(style.marginBottom) * (1 - i)
+    }px`;
+    cursor.style.left = `${parseFloat(style.left) - 30}px`;
+}
+
+function clickStartButton(id: string) {
+    core.checkBgm();
+    if (id === 'start-game') showHard();
+    if (id === 'back') setButtonAnimate();
+    if (id === 'easy' || id === 'hard-hard') {
+        core.startGame(id);
+    }
+    if (id === 'load-game') {
+        core.dom.gameGroup.style.display = 'block';
+        start.style.top = '100vh';
+        core.load();
+    }
+    if (id === 'replay') core.chooseReplayFile();
+}
+
+/**
+ * 初始 -> 难度
+ */
+async function showHard() {
+    cursor.style.transition =
+        'left 0.4s ease-out, top 0.4s ease-out, opacity 0.4s linear';
+    cursor.style.opacity = '0';
+    buttons.forEach(v => (v.style.transition = ''));
+    ids.unshift(toshow.pop()!);
+    await sleep(150);
+    ids.unshift(toshow.pop()!);
+    await sleep(150);
+    ids.unshift(toshow.pop()!);
+    await sleep(150);
+    ids.unshift(toshow.pop()!);
+    await sleep(400);
+    text.value = hard;
+    toshow.push(hardIds.shift()!);
+    await sleep(150);
+    toshow.push(hardIds.shift()!);
+    await sleep(150);
+    toshow.push(hardIds.shift()!);
+    selected.value = 'easy';
+    nextTick(() => {
+        buttons = toshow
+            .map(v => document.getElementById(v) as HTMLSpanElement)
+            .reverse();
+        cursor.style.opacity = '1';
+        setCursor(buttons[0], 0);
+        buttons.forEach((v, i) => {
+            v.addEventListener('mouseenter', e => {
+                setCursor(v, i);
+                selected.value = v.id;
+            });
+        });
+    });
+    await sleep(600);
+    buttons.forEach(v => (v.style.transition = 'color 0.3s ease-out'));
+}
+
+/**
+ * 难度 | 无 -> 初始
+ */
+async function setButtonAnimate() {
+    if (toshow.length > 0) {
+        cursor.style.transition =
+            'left 0.4s ease-out, top 0.4s ease-out, opacity 0.4s linear';
+        cursor.style.opacity = '0';
+        buttons.forEach(v => (v.style.transition = ''));
+        hardIds.unshift(toshow.pop()!);
+        await sleep(150);
+        hardIds.unshift(toshow.pop()!);
+        await sleep(150);
+        hardIds.unshift(toshow.pop()!);
+    }
+    text.value = text1;
+    if (played) {
+        text.value = text2;
+    }
+    await sleep(400);
+    toshow.push(ids.shift()!);
+    await sleep(150);
+    toshow.push(ids.shift()!);
+    await sleep(150);
+    toshow.push(ids.shift()!);
+    await sleep(150);
+    toshow.push(ids.shift()!);
+    selected.value = 'start-game';
+    nextTick(() => {
+        buttons = toshow
+            .map(v => document.getElementById(v) as HTMLSpanElement)
+            .reverse();
+        cursor.style.opacity = '1';
+        setCursor(buttons[0], 0);
+        buttons.forEach((v, i) => {
+            v.addEventListener('mouseenter', e => {
+                setCursor(v, i);
+                selected.value = v.id;
+            });
+        });
+    });
+    if (!showed.value) await sleep(1200);
+    else await sleep(600);
+
+    buttons.forEach(v => (v.style.transition = 'color 0.3s ease-out'));
+}
+
+onMounted(async () => {
+    cursor = document.getElementById('cursor')!;
+    played = core.getLocalStorage('oneweek1', false);
+    startdiv = document.getElementById('start-div') as HTMLDivElement;
+    main = document.getElementById('start-main') as HTMLDivElement;
+    start = document.getElementById('start') as HTMLDivElement;
+    core.registerResize('start', resize);
+    resize();
+    await sleep(50);
+    start.style.opacity = '1';
+    if (played) {
+        text.value = text2;
+    }
+    setButtonAnimate().then(() => (showed.value = true));
+    await sleep(1000);
+    showCursor();
+    await sleep(1200);
+    core.dom.startPanel.style.display = 'none';
+});
+
+onUnmounted(() => {
+    core.unregisterResize('start');
+});
+</script>
+
+<style lang="less" scoped>
+#start {
+    position: relative;
+    width: 100vw;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    opacity: 0;
+    transition: opacity 1.2s ease-out;
+    background-color: black;
+}
+
+#start-div {
+    position: relative;
+}
+
+#background {
+    position: absolute;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    filter: sepia(30%) contrast(115%);
+}
+
+#start-main {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    width: 100%;
+    height: 100%;
+    font-size: 16px;
+
+    #title {
+        margin-top: 7%;
+        text-align: center;
+        color: transparent;
+        font: 4em 'normal';
+        font-weight: 200;
+        background-image: linear-gradient(
+            to right,
+            rgb(0, 0, 0),
+            rgb(44, 44, 44),
+            rgb(136, 0, 214),
+            rgb(0, 2, 97),
+            rgb(0, 2, 97)
+        );
+        background-clip: text;
+        -webkit-background-clip: text;
+        text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.5),
+            -1px -1px 3px rgba(255, 255, 255, 0.3),
+            5px 5px 5px rgba(0, 0, 0, 0.4);
+        filter: brightness(1.8);
+        user-select: none;
+    }
+
+    #buttons {
+        display: flex;
+        flex-direction: column-reverse;
+        justify-content: center;
+        position: absolute;
+        left: 18%;
+        bottom: 10%;
+        filter: brightness(120%) contrast(110%);
+
+        #cursor {
+            text-shadow: 2px 2px 3px black;
+            position: absolute;
+            opacity: 0;
+            animation: cursor 2.5s linear 0s infinite normal running;
+            transition: left 0.4s ease-out, top 0.4s ease-out,
+                opacity 1.5s ease-out;
+        }
+
+        .start-button {
+            position: relative;
+            font: bold 1.5em 'normal';
+            text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.4),
+                0px 0px 1px rgba(255, 255, 255, 0.3);
+            background-clip: text;
+            -webkit-background-clip: text;
+        }
+
+        #start-game {
+            left: 22.5%;
+            background-image: linear-gradient(
+                to bottom,
+                rgb(255, 255, 255),
+                rgb(0, 255, 255)
+            );
+            margin-bottom: 8%;
+        }
+
+        #load-game {
+            left: 15%;
+            background-image: linear-gradient(
+                to bottom,
+                rgb(255, 255, 255),
+                rgb(0, 255, 55)
+            );
+            margin-bottom: 8%;
+        }
+
+        #replay {
+            background-image: linear-gradient(
+                to bottom,
+                rgb(255, 255, 255),
+                rgb(255, 251, 0)
+            );
+            left: 7.5%;
+            margin-bottom: 8%;
+        }
+
+        #achievement {
+            background-image: linear-gradient(
+                to bottom,
+                rgb(255, 255, 255),
+                rgb(0, 208, 255)
+            );
+            margin-bottom: 8%;
+        }
+
+        #easy {
+            left: 30%;
+            background-image: linear-gradient(
+                to bottom,
+                rgb(255, 255, 255),
+                rgb(87, 255, 72)
+            );
+            margin-bottom: 16%;
+        }
+
+        #hard-hard {
+            left: 15%;
+            background-image: linear-gradient(
+                to bottom,
+                rgb(255, 255, 255),
+                rgb(255, 0, 0)
+            );
+            margin-bottom: 16%;
+        }
+
+        #back {
+            background-image: linear-gradient(
+                to bottom,
+                rgb(255, 255, 255),
+                rgb(132, 132, 132)
+            );
+            margin-bottom: 16%;
+        }
+    }
+}
+
+.start-button {
+    cursor: pointer;
+}
+
+.start-button[selected='true'] {
+    color: transparent;
+}
+
+@keyframes cursor {
+    from {
+        transform: rotateX(0deg) scaleY(0.7);
+    }
+    to {
+        transform: rotateX(360deg) scaleY(0.7);
+    }
+}
+
+.start-enter-active {
+    transition: all 1.2s ease-out;
+}
+.start-enter-active[showed='true'] {
+    transition: all 0.6s ease-out;
+}
+.start-enter-from {
+    opacity: 0;
+    transform: translateX(20px);
+}
+.start-leave-active {
+    transition: all 0.4s ease-out;
+}
+.start-leave-to {
+    transform: translateX(-20px);
+    opacity: 0;
+}
+</style>