AncTe/HumanBreak
1
0
Fork 0
mirror of https://github.com/unanmed/HumanBreak.git synced 2025-01-19 04:19:30 +08:00
Code Issues Actions Packages Projects Releases Wiki Activity

开始界面

Browse Source
This commit is contained in:
unanmed 2023-02-20 20:34:42 +08:00
parent cd160cd10d
commit 0d59b0a5a9
14 changed files with 510 additions and 176 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

20
index.html
View File

@ -31,9 +31,12 @@
startImageLogo.onload = function () {
startImageBackgroundDiv.style.display = 'block';
var onAnimationEnd = function () {
startImageBackgroundDiv.style.display = 'none';
startImageLogo.classList.remove("startImageAnimation");
startImageDiv.classList.remove("startImageDivAnimation");
if (window.core && core.plugin && core.plugin.startAnimationEnded) {
core.plugin.startAnimationEnded.value = true;
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>

2
public/libs/actions.js
View File

@ -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;
}
// 删除

43
public/libs/control.js
View File

@ -502,18 +502,11 @@ control.prototype.showStartAnimate = function (noAnimate, callback) {
};
control.prototype._showStartAnimate_resetDom = function () {
core.dom.startPanel.style.opacity = 1;
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.plugin.loaded.value = true;
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 () {
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.setMusicBtn = function () {};
////// 更改背景音乐的播放 //////
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) {

3
public/libs/core.js
View File

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

6
public/libs/events.js
View File

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

128
public/main.js
View File

@ -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.dom.startButtonGroup.style = main.styles.startButtonsStyle;
main.levelChoose = main.levelChoose || [];
main.levelChoose.forEach(function (value) {
var span = document.createElement('span');
span.setAttribute('class', 'startButton');
span.innerText = value.title || '';
span.id = value.name;
(function (span, str_) {
span.onclick = function () {
core.events.startGame(str_);
};
})(span, value.name || '');
main.dom.levelChooseButtons.appendChild(span);
});
main.createOnChoiceAnimation();
// main.levelChoose = main.levelChoose || [];
// main.levelChoose.forEach(function (value) {
// var span = document.createElement('span');
// span.setAttribute('class', 'startButton');
// span.innerText = value.title || '';
// span.id = value.name;
// (function (span, str_) {
// span.onclick = function () {
// core.events.startGame(str_);
// };
// })(span, value.name || '');
// main.dom.levelChooseButtons.appendChild(span);
// });
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.startButtons.style.display = 'none';
main.core.control.checkBgm();
// main.dom.playGame.onclick = function () {
// main.dom.startButtons.style.display = 'none';
// main.core.control.checkBgm();
if (main.levelChoose.length == 0) {
core.events.startGame('');
} else {
main.dom.levelChooseButtons.style.display = 'block';
main.selectedButton = null;
main.selectButton(0);
}
};
// if (main.levelChoose.length == 0) {
// core.events.startGame('');
// } else {
// main.dom.levelChooseButtons.style.display = 'block';
// main.selectedButton = null;
// main.selectButton(0);
// }
// };
////// 点击“载入游戏”时 //////
main.dom.loadGame.onclick = function () {
main.core.control.checkBgm();
main.core.load();
};
// ////// 点击“载入游戏”时 //////
// main.dom.loadGame.onclick = function () {
// main.core.control.checkBgm();
// main.core.load();
// };
////// 点击“录像回放”时 //////
main.dom.replayGame.onclick = function () {
main.core.control.checkBgm();
main.core.chooseReplayFile();
};
// ////// 点击“录像回放”时 //////
// main.dom.replayGame.onclick = function () {
// main.core.control.checkBgm();
// main.core.chooseReplayFile();
// };
main.dom.musicBtn.onclick = function () {
try {
if (main.core) main.core.triggerBgm();
} catch (ee) {
console.error(ee);
}
};
// main.dom.musicBtn.onclick = function () {
// try {
// if (main.core) main.core.triggerBgm();
// } catch (ee) {
// console.error(ee);
// }
// };
window.onblur = function () {
if (main.core && main.core.control) {

3
public/project/functions.js
View File

@ -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();

40
public/styles.css
View File

@ -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%;
left: 50%;
margin-bottom: 7%;
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;
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 3s alternate 1;
}
@-webkit-keyframes startImageDivDisappear {

16
src/App2.vue
View File

@ -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 { showStatusBar, showStudiedSkill } from './plugin/uiController';
import MarkedEnemy from './ui/markedEnemy.vue';
import Chapter from './ui/chapter.vue';
import {
showStatusBar,
showStudiedSkill,
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>

8
src/plugin/mark.ts
View File

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

16
src/plugin/uiController.ts
View File

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

2
src/types/event.d.ts vendored
View File

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

3
src/types/plugin.d.ts vendored
View File

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

396
src/ui/start.vue Normal file
View File

@ -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>