mirror of
https://github.com/unanmed/HumanBreak.git
synced 2025-05-10 18:43:24 +08:00
feat: 开始界面
This commit is contained in:
parent
1d7d177cae
commit
646f9e3ab0
@ -3400,13 +3400,10 @@ control.prototype.checkBgm = function () {
|
||||
};
|
||||
|
||||
///// 设置屏幕放缩 //////
|
||||
control.prototype.setDisplayScale = function (delta) {
|
||||
var index = core.domStyle.availableScale.indexOf(core.domStyle.scale);
|
||||
if (index < 0) return;
|
||||
index =
|
||||
(index + delta + core.domStyle.availableScale.length) %
|
||||
core.domStyle.availableScale.length;
|
||||
core.domStyle.scale = core.domStyle.availableScale[index];
|
||||
control.prototype.setDisplayScale = function (i) {
|
||||
const scale = core.domStyle.availableScale[i];
|
||||
if (!scale) return;
|
||||
core.domStyle.scale = scale;
|
||||
core.setLocalStorage('scale', core.domStyle.scale);
|
||||
core.resize();
|
||||
};
|
||||
|
||||
@ -602,6 +602,7 @@ core.prototype._afterLoadResources = function (callback) {
|
||||
|
||||
// if (core.plugin._afterLoadResources) core.plugin._afterLoadResources();
|
||||
core.showStartAnimate();
|
||||
Mota.require('var', 'hook').emit('load');
|
||||
if (callback) callback();
|
||||
};
|
||||
|
||||
|
||||
@ -1,9 +1,4 @@
|
||||
///<reference path="../../src/types/core.d.ts" />
|
||||
|
||||
/*
|
||||
loader.js：负责对资源的加载
|
||||
|
||||
*/
|
||||
'use strict';
|
||||
|
||||
function loader() {
|
||||
@ -32,7 +27,6 @@ loader.prototype._load = function (callback) {
|
||||
|
||||
loader.prototype._load_sync = function (callback) {
|
||||
this._loadAnimates_sync();
|
||||
if (main.mode === 'play') return callback();
|
||||
this._loadMusic_sync();
|
||||
core.loader._loadMaterials_sync(function () {
|
||||
core.loader._loadExtraImages_sync(function () {
|
||||
@ -116,7 +110,6 @@ loader.prototype._load_async = function (callback) {
|
||||
// ----- 加载资源文件 ------ //
|
||||
|
||||
loader.prototype._loadMaterials_sync = function (callback) {
|
||||
if (main.mode === 'play') return callback();
|
||||
this._setStartLoadTipText('正在加载资源文件...');
|
||||
this.loadImages(
|
||||
'materials',
|
||||
@ -156,7 +149,6 @@ loader.prototype._loadMaterials_afterLoad = function () {
|
||||
// ------ 加载使用的图片 ------ //
|
||||
|
||||
loader.prototype._loadExtraImages_sync = function (callback) {
|
||||
if (main.mode === 'play') return callback();
|
||||
core.material.images.images = {};
|
||||
this._setStartLoadTipText('正在加载图片文件...');
|
||||
core.loadImages(
|
||||
@ -199,7 +191,6 @@ loader.prototype._loadExtraImages_async = function (onprogress, onfinished) {
|
||||
// ------ 加载自动元件 ------ //
|
||||
|
||||
loader.prototype._loadAutotiles_sync = function (callback) {
|
||||
if (main.mode === 'play') return callback();
|
||||
core.material.images.autotile = {};
|
||||
var keys = Object.keys(core.material.icons.autotile);
|
||||
var autotiles = {};
|
||||
@ -229,7 +220,6 @@ loader.prototype._loadAutotiles_async = function (onprogress, onfinished) {
|
||||
};
|
||||
|
||||
loader.prototype._loadAutotiles_afterLoad = function (keys, autotiles) {
|
||||
if (main.mode === 'play') return;
|
||||
// autotile需要保证顺序
|
||||
keys.forEach(function (v) {
|
||||
core.material.images.autotile[v] = autotiles[v];
|
||||
@ -243,7 +233,6 @@ loader.prototype._loadAutotiles_afterLoad = function (keys, autotiles) {
|
||||
// ------ 加载额外素材 ------ //
|
||||
|
||||
loader.prototype._loadTilesets_sync = function (callback) {
|
||||
if (main.mode === 'play') return callback();
|
||||
core.material.images.tilesets = {};
|
||||
this._setStartLoadTipText('正在加载额外素材...');
|
||||
this.loadImages(
|
||||
@ -251,6 +240,7 @@ loader.prototype._loadTilesets_sync = function (callback) {
|
||||
core.tilesets,
|
||||
core.material.images.tilesets,
|
||||
function () {
|
||||
core.loader._loadTilesets_afterLoad();
|
||||
callback();
|
||||
}
|
||||
);
|
||||
@ -264,15 +254,28 @@ loader.prototype._loadTilesets_async = function (onprogress, onfinished) {
|
||||
core.material.images.tilesets,
|
||||
onprogress,
|
||||
function () {
|
||||
core.loader._loadTilesets_afterLoad();
|
||||
onfinished();
|
||||
}
|
||||
);
|
||||
};
|
||||
|
||||
loader.prototype._loadTilesets_afterLoad = function () {
|
||||
// 检查宽高是32倍数，如果出错在控制台报错
|
||||
for (var imgName in core.material.images.tilesets) {
|
||||
var img = core.material.images.tilesets[imgName];
|
||||
if (img.width % 32 != 0 || img.height % 32 != 0) {
|
||||
console.warn('警告！' + imgName + '的宽或高不是32的倍数！');
|
||||
}
|
||||
if (img.width * img.height > 32 * 32 * 3000) {
|
||||
console.warn('警告！' + imgName + '上的图块素材个数大于3000！');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// ------ 实际加载一系列图片 ------ //
|
||||
|
||||
loader.prototype.loadImages = function (dir, names, toSave, callback) {
|
||||
if (main.mode === 'play') return callback();
|
||||
if (!names || names.length == 0) {
|
||||
if (callback) callback();
|
||||
return;
|
||||
@ -310,9 +313,7 @@ loader.prototype.loadImage = function (dir, imgName, callback) {
|
||||
};
|
||||
image.src = 'project/' + dir + '/' + name + '?v=' + main.version;
|
||||
if (name.endsWith('.gif')) callback(imgName, null);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
}
|
||||
} catch (e) {}
|
||||
};
|
||||
|
||||
// ------ 从zip中加载一系列图片 ------ //
|
||||
@ -363,14 +364,13 @@ loader.prototype.loadImagesFromZip = function (
|
||||
// ------ 加载动画文件 ------ //
|
||||
|
||||
loader.prototype._loadAnimates_sync = function () {
|
||||
if (main.mode === 'play') return;
|
||||
this._setStartLoadTipText('正在加载动画文件...');
|
||||
|
||||
if (main.supportBunch) {
|
||||
if (core.animates.length > 0) {
|
||||
core.http(
|
||||
'GET',
|
||||
'/all/__all_animates__?v=' +
|
||||
'__all_animates__?v=' +
|
||||
main.version +
|
||||
'&id=' +
|
||||
core.animates.join(','),
|
||||
@ -403,7 +403,6 @@ loader.prototype._loadAnimates_sync = function () {
|
||||
core.material.animates[t] = core.loader._loadAnimate(content);
|
||||
},
|
||||
function (e) {
|
||||
console.error(e);
|
||||
core.material.animates[t] = null;
|
||||
},
|
||||
'text/plain; charset=x-user-defined'
|
||||
@ -449,7 +448,6 @@ loader.prototype._loadAnimate = function (content) {
|
||||
image.src = t2;
|
||||
data.images.push(image);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
data.images.push(null);
|
||||
}
|
||||
}
|
||||
@ -473,7 +471,6 @@ loader.prototype._loadAnimate = function (content) {
|
||||
});
|
||||
return data;
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
return null;
|
||||
}
|
||||
};
|
||||
@ -524,20 +521,19 @@ loader.prototype.loadOneMusic = function (name) {
|
||||
if (main.bgmRemote)
|
||||
music.src = main.bgmRemoteRoot + core.firstData.name + '/' + name;
|
||||
else music.src = 'project/bgms/' + name;
|
||||
music.loop = 'loop';
|
||||
core.material.bgms[name] = music;
|
||||
Mota.require('var', 'bgm').add(`bgms.${name}`, music);
|
||||
};
|
||||
|
||||
loader.prototype.loadOneSound = function (name) {
|
||||
const sound = Mota.require('var', 'sound');
|
||||
core.http(
|
||||
'GET',
|
||||
'project/sounds/' + name + '?v=' + main.version,
|
||||
null,
|
||||
function (data) {
|
||||
core.loader._loadOneSound_decodeData(name, data);
|
||||
sound.add(`sounds.${name}`, data);
|
||||
},
|
||||
function (e) {
|
||||
console.error(e);
|
||||
core.material.sounds[name] = null;
|
||||
},
|
||||
null,
|
||||
@ -562,12 +558,10 @@ loader.prototype._loadOneSound_decodeData = function (name, data) {
|
||||
core.material.sounds[name] = buffer;
|
||||
},
|
||||
function (e) {
|
||||
console.error(e);
|
||||
core.material.sounds[name] = null;
|
||||
}
|
||||
);
|
||||
} catch (e) {
|
||||
console.error(e);
|
||||
core.material.sounds[name] = null;
|
||||
}
|
||||
};
|
||||
|
||||
@ -411,7 +411,7 @@ main.prototype.loadAsync = async function (mode, callback) {
|
||||
main.core = core;
|
||||
|
||||
// 自动放缩最大化
|
||||
let auto = Mota.require('var', 'mainSetting').getValue('autoSclae');
|
||||
let auto = Mota.require('var', 'mainSetting').getValue('autoScale', true);
|
||||
|
||||
if (auto && !core.domStyle.isVertical) {
|
||||
try {
|
||||
|
||||
@ -313,7 +313,7 @@ var data_a1e2fb4a_e986_4524_b0da_9b7ba7c0874d =
|
||||
"splitImages": []
|
||||
},
|
||||
"firstData": {
|
||||
"title": "人类：开天辟地",
|
||||
"title": "魔塔样板",
|
||||
"name": "HumanBreak",
|
||||
"version": "Ver 2.7.3.1",
|
||||
"floorId": "MT0",
|
||||
|
||||
@ -1,13 +1,5 @@
|
||||
import { BgmController, bgm } from './audio/bgm';
|
||||
import { SoundController, SoundEffect, sound } from './audio/sound';
|
||||
import { readyAllResource } from './loader/load';
|
||||
import {
|
||||
Resource,
|
||||
ResourceStore,
|
||||
ZippedResource,
|
||||
resource,
|
||||
zipResource
|
||||
} from './loader/resource';
|
||||
import { Focus, GameUi, UiController } from './main/custom/ui';
|
||||
import { GameStorage } from './main/storage';
|
||||
import './main/init/';
|
||||
@ -30,10 +22,6 @@ import { Hotkey } from './main/custom/hotkey';
|
||||
import { Keyboard } from './main/custom/keyboard';
|
||||
import './main/layout';
|
||||
|
||||
function ready() {
|
||||
readyAllResource();
|
||||
}
|
||||
|
||||
// ----- 类注册
|
||||
Mota.register('class', 'AudioPlayer', AudioPlayer);
|
||||
Mota.register('class', 'BgmController', BgmController);
|
||||
@ -44,13 +32,10 @@ Mota.register('class', 'GameUi', GameUi);
|
||||
Mota.register('class', 'Hotkey', Hotkey);
|
||||
Mota.register('class', 'Keyboard', Keyboard);
|
||||
Mota.register('class', 'MotaSetting', MotaSetting);
|
||||
Mota.register('class', 'Resource', Resource);
|
||||
Mota.register('class', 'ResourceStore', ResourceStore);
|
||||
Mota.register('class', 'SettingDisplayer', SettingDisplayer);
|
||||
Mota.register('class', 'SoundController', SoundController);
|
||||
Mota.register('class', 'SoundEffect', SoundEffect);
|
||||
Mota.register('class', 'UiController', UiController);
|
||||
Mota.register('class', 'ZippedResource', ZippedResource);
|
||||
// ----- 函数注册
|
||||
|
||||
// ----- 变量注册
|
||||
@ -61,11 +46,7 @@ Mota.register('var', 'sound', sound);
|
||||
Mota.register('var', 'gameKey', gameKey);
|
||||
Mota.register('var', 'mainSetting', mainSetting);
|
||||
Mota.register('var', 'KeyCode', KeyCode);
|
||||
Mota.register('var', 'resource', resource);
|
||||
Mota.register('var', 'zipResource', zipResource);
|
||||
Mota.register('var', 'settingStorage', settingStorage);
|
||||
Mota.register('var', 'status', status);
|
||||
|
||||
// ----- 模块注册
|
||||
|
||||
ready();
|
||||
|
||||
@ -35,6 +35,9 @@ fixedUi.register(
|
||||
);
|
||||
fixedUi.showAll();
|
||||
|
||||
let loaded = false;
|
||||
let mounted = false;
|
||||
|
||||
const hook = Mota.require('var', 'hook');
|
||||
hook.once('mounted', () => {
|
||||
const ui = document.getElementById('ui-main')!;
|
||||
@ -57,6 +60,15 @@ hook.once('mounted', () => {
|
||||
fixed.style.display = 'none';
|
||||
});
|
||||
|
||||
// todo: 暂时先这么搞，之后重写加载界面，需要改成先显示加载界面，加载完毕后再打开这个界面
|
||||
fixedUi.open('start');
|
||||
if (loaded && !mounted) {
|
||||
fixedUi.open('start');
|
||||
}
|
||||
mounted = true;
|
||||
});
|
||||
hook.once('load', () => {
|
||||
if (mounted) {
|
||||
// todo: 暂时先这么搞，之后重写加载界面，需要改成先显示加载界面，加载完毕后再打开这个界面
|
||||
fixedUi.open('start');
|
||||
}
|
||||
loaded = true;
|
||||
});
|
||||
|
||||
@ -7,22 +7,12 @@ import type {
|
||||
IndexedEventEmitter
|
||||
} from '@/core/common/eventEmitter';
|
||||
import type { loading } from './game';
|
||||
import type {
|
||||
Resource,
|
||||
ResourceStore,
|
||||
ResourceType,
|
||||
ZippedResource
|
||||
} from '@/core/loader/resource';
|
||||
import type { Hotkey } from '@/core/main/custom/hotkey';
|
||||
import type { Keyboard } from '@/core/main/custom/keyboard';
|
||||
import type { CustomToolbar } from '@/core/main/custom/toolbar';
|
||||
import type { Focus, GameUi, UiController } from '@/core/main/custom/ui';
|
||||
import type { gameListener, hook } from './game';
|
||||
import type {
|
||||
MotaSetting,
|
||||
SettingDisplayer,
|
||||
SettingStorage
|
||||
} from '@/core/main/setting';
|
||||
import type { MotaSetting, SettingDisplayer } from '@/core/main/setting';
|
||||
import type { GameStorage } from '@/core/main/storage';
|
||||
import type { DamageEnemy, EnemyCollection } from './enemy/damage';
|
||||
import type { specials } from './enemy/special';
|
||||
@ -41,9 +31,6 @@ interface ClassInterface {
|
||||
GameStorage: typeof GameStorage;
|
||||
MotaSetting: typeof MotaSetting;
|
||||
SettingDisplayer: typeof SettingDisplayer;
|
||||
Resource: typeof Resource;
|
||||
ZippedResource: typeof ZippedResource;
|
||||
ResourceStore: typeof ResourceStore;
|
||||
Focus: typeof Focus;
|
||||
GameUi: typeof GameUi;
|
||||
UiController: typeof UiController;
|
||||
@ -85,9 +72,7 @@ interface VariableInterface {
|
||||
// isMobile: boolean;
|
||||
bgm: BgmController;
|
||||
sound: SoundController;
|
||||
resource: ResourceStore<Exclude<ResourceType, 'zip'>>;
|
||||
zipResource: ResourceStore<'zip'>;
|
||||
settingStorage: GameStorage<SettingStorage>;
|
||||
settingStorage: GameStorage;
|
||||
status: Ref<boolean>;
|
||||
// 定义于游戏进程，渲染进程依然可用
|
||||
haloSpecials: number[];
|
||||
|
||||
@ -31,10 +31,7 @@ export function has<T>(v: T): v is NonNullable<T> {
|
||||
}
|
||||
|
||||
export function maxGameScale(n: number = 0) {
|
||||
const index = core.domStyle.availableScale.indexOf(core.domStyle.scale);
|
||||
core.control.setDisplayScale(
|
||||
core.domStyle.availableScale.length - 1 - index - n
|
||||
);
|
||||
core.control.setDisplayScale(core.domStyle.availableScale.length - 1 - n);
|
||||
if (!core.isPlaying() && core.flags.enableHDCanvas) {
|
||||
// @ts-ignore
|
||||
core.domStyle.ratio = Math.max(
|
||||
|
||||
408
src/ui/start.vue
408
src/ui/start.vue
@ -3,7 +3,7 @@
|
||||
<div id="start-div">
|
||||
<img id="background" src="/project/images/bg.jpg" />
|
||||
<div id="start-main">
|
||||
<div id="title">人类：开天辟地</div>
|
||||
<div id="title">{{ name }}</div>
|
||||
<div id="settings">
|
||||
<div
|
||||
id="sound"
|
||||
@ -25,7 +25,7 @@
|
||||
@click="setFullscreen"
|
||||
/>
|
||||
</div>
|
||||
<div id="background-gradient"></div>
|
||||
<!-- <div id="background-gradient"></div>
|
||||
<div id="buttons">
|
||||
<right-outlined id="cursor" />
|
||||
<TransitionGroup name="start">
|
||||
@ -36,8 +36,6 @@
|
||||
:key="v"
|
||||
:selected="selected === v"
|
||||
:showed="showed"
|
||||
:index="i"
|
||||
:length="text[i].length"
|
||||
@click="clickStartButton(v)"
|
||||
@mouseenter="
|
||||
movein(
|
||||
@ -48,6 +46,44 @@
|
||||
>{{ text[i] }}</span
|
||||
>
|
||||
</TransitionGroup>
|
||||
</div> -->
|
||||
<div id="buttons-container">
|
||||
<div id="buttons">
|
||||
<template v-if="!inHard">
|
||||
<span
|
||||
class="start-button"
|
||||
id="start-game"
|
||||
@click="clickStartButton('start-game')"
|
||||
>开始游戏</span
|
||||
>
|
||||
<span
|
||||
class="start-button"
|
||||
id="load-game"
|
||||
@click="clickStartButton('load-game')"
|
||||
>读取存档</span
|
||||
>
|
||||
<span
|
||||
class="start-button"
|
||||
id="replay"
|
||||
@click="clickStartButton('replay')"
|
||||
>录像回放</span
|
||||
>
|
||||
</template>
|
||||
<template v-else>
|
||||
<span
|
||||
class="start-button hard-button"
|
||||
v-for="hard of hards"
|
||||
@click="clickHard(hard.name)"
|
||||
>{{ hard.title }}</span
|
||||
>
|
||||
<span
|
||||
class="start-button"
|
||||
id="back"
|
||||
@click="inHard = false"
|
||||
>返回</span
|
||||
>
|
||||
</template>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div id="listen" @mousemove="onmove"></div>
|
||||
@ -56,21 +92,18 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts" setup>
|
||||
import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
import { onMounted, onUnmounted, reactive, ref } from 'vue';
|
||||
import {
|
||||
RightOutlined,
|
||||
SoundOutlined,
|
||||
FullscreenOutlined,
|
||||
FullscreenExitOutlined
|
||||
} from '@ant-design/icons-vue';
|
||||
import { sleep } from 'mutate-animate';
|
||||
import { Matrix4 } from '../plugin/webgl/matrix';
|
||||
import { doByInterval, keycode } from '../plugin/utils';
|
||||
import { triggerFullscreen } from '../plugin/utils';
|
||||
import { nextFrame, triggerFullscreen } from '../plugin/utils';
|
||||
import { isMobile } from '../plugin/use';
|
||||
import { GameUi } from '@/core/main/custom/ui';
|
||||
import { gameKey } from '@/core/main/init/hotkey';
|
||||
import { mainUi } from '@/core/main/init/ui';
|
||||
import { CustomToolbar } from '@/core/main/custom/toolbar';
|
||||
import { mainSetting } from '@/core/main/setting';
|
||||
import { bgm as mainBgm } from '@/core/audio/bgm';
|
||||
@ -80,74 +113,43 @@ const props = defineProps<{
|
||||
ui: GameUi;
|
||||
}>();
|
||||
|
||||
const name = core.firstData.title;
|
||||
const hards = main.levelChoose;
|
||||
|
||||
const inHard = ref(false);
|
||||
|
||||
let startdiv: HTMLDivElement;
|
||||
let start: HTMLDivElement;
|
||||
let main: HTMLDivElement;
|
||||
let cursor: HTMLElement;
|
||||
let mainDiv: HTMLDivElement;
|
||||
let background: HTMLImageElement;
|
||||
|
||||
let buttons: HTMLSpanElement[] = [];
|
||||
|
||||
let played: boolean;
|
||||
const soundChecked = ref(false);
|
||||
const fullscreen = ref(!!document.fullscreenElement);
|
||||
|
||||
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 hard = ['简单', '困难', '返回'].reverse();
|
||||
const text = ref(text1);
|
||||
const toshow = reactive<string[]>([]);
|
||||
|
||||
const selected = ref('start-game');
|
||||
|
||||
function resize() {
|
||||
if (!window.core) return;
|
||||
const scale = core.domStyle.scale;
|
||||
const h = core._PY_;
|
||||
const height = h * scale;
|
||||
const width = height * 1.5;
|
||||
if (!isMobile) {
|
||||
startdiv.style.width = `${width}px`;
|
||||
startdiv.style.height = `${height}px`;
|
||||
main.style.fontSize = `${scale * 16}px`;
|
||||
} else {
|
||||
startdiv.style.width = `${window.innerWidth}px`;
|
||||
startdiv.style.height = `${(window.innerHeight * 2) / 3}px`;
|
||||
main.style.fontSize = `${scale * 8}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) - 20 * core.domStyle.scale
|
||||
}px`;
|
||||
nextFrame(() => {
|
||||
const scale = core.domStyle.scale;
|
||||
console.log(scale);
|
||||
const h = core._PY_;
|
||||
const height = h * scale;
|
||||
const width = height * 1.5;
|
||||
if (!isMobile) {
|
||||
startdiv.style.width = `${width}px`;
|
||||
startdiv.style.height = `${height}px`;
|
||||
mainDiv.style.fontSize = `${scale * 16}px`;
|
||||
} else {
|
||||
startdiv.style.width = `${window.innerWidth}px`;
|
||||
startdiv.style.height = `${(window.innerHeight * 2) / 3}px`;
|
||||
mainDiv.style.fontSize = `${scale * 8}px`;
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
async function clickStartButton(id: string) {
|
||||
if (id === 'start-game') showHard();
|
||||
if (id === 'back') setButtonAnimate();
|
||||
if (id === 'easy' || id === 'hard-hard') {
|
||||
start.style.opacity = '0';
|
||||
await sleep(600);
|
||||
core.startGame(id === 'easy' ? 'easy' : 'hard');
|
||||
if (id === 'start-game') {
|
||||
inHard.value = true;
|
||||
}
|
||||
if (id === 'load-game') {
|
||||
core.dom.gameGroup.style.display = 'block';
|
||||
@ -155,9 +157,12 @@ async function clickStartButton(id: string) {
|
||||
core.load();
|
||||
}
|
||||
if (id === 'replay') core.chooseReplayFile();
|
||||
if (id === 'achievement') {
|
||||
mainUi.open('achievement');
|
||||
}
|
||||
}
|
||||
|
||||
async function clickHard(hard: string) {
|
||||
start.style.opacity = '0';
|
||||
await sleep(600);
|
||||
core.startGame(hard);
|
||||
}
|
||||
|
||||
function onmove(e: MouseEvent) {
|
||||
@ -182,31 +187,6 @@ function onmove(e: MouseEvent) {
|
||||
}px)matrix3d(${end})`;
|
||||
}
|
||||
|
||||
function movein(button: HTMLElement, i: number) {
|
||||
setCursor(button, i);
|
||||
selected.value = button.id;
|
||||
}
|
||||
|
||||
gameKey.use(props.ui.symbol);
|
||||
gameKey
|
||||
.realize('@start_up', () => {
|
||||
const i = toshow.indexOf(selected.value);
|
||||
const next = toshow[i + 1];
|
||||
if (!next) return;
|
||||
selected.value = next;
|
||||
setCursor(buttons[toshow.length - i - 2], toshow.length - i - 2);
|
||||
})
|
||||
.realize('@start_down', () => {
|
||||
const i = toshow.indexOf(selected.value);
|
||||
const next = toshow[i - 1];
|
||||
if (!next) return;
|
||||
selected.value = next;
|
||||
setCursor(buttons[toshow.length - i], toshow.length - i);
|
||||
})
|
||||
.realize('confirm', () => {
|
||||
clickStartButton(selected.value);
|
||||
});
|
||||
|
||||
function bgm() {
|
||||
core.triggerBgm();
|
||||
soundChecked.value = !soundChecked.value;
|
||||
@ -215,119 +195,26 @@ function bgm() {
|
||||
}
|
||||
|
||||
async function setFullscreen() {
|
||||
const index = toshow.length - toshow.indexOf(selected.value) - 1;
|
||||
await triggerFullscreen(!fullscreen.value);
|
||||
requestAnimationFrame(() => {
|
||||
fullscreen.value = !!document.fullscreenElement;
|
||||
setCursor(buttons[index], index);
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* 初始 -> 难度
|
||||
*/
|
||||
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 = ''));
|
||||
|
||||
await doByInterval(
|
||||
Array(4).fill(() => ids.unshift(toshow.pop()!)),
|
||||
150
|
||||
);
|
||||
await sleep(250);
|
||||
text.value = hard;
|
||||
|
||||
await doByInterval(
|
||||
Array(3).fill(() => toshow.push(hardIds.shift()!)),
|
||||
150
|
||||
);
|
||||
selected.value = 'easy';
|
||||
nextTick(() => {
|
||||
buttons = toshow
|
||||
.map(v => document.getElementById(v) as HTMLSpanElement)
|
||||
.reverse();
|
||||
cursor.style.opacity = '1';
|
||||
setCursor(buttons[0], 0);
|
||||
});
|
||||
await sleep(600);
|
||||
buttons.forEach(
|
||||
v =>
|
||||
(v.style.transition =
|
||||
'transform 0.3s ease-out, 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 = ''));
|
||||
await doByInterval(
|
||||
Array(3).fill(() => hardIds.unshift(toshow.pop()!)),
|
||||
150
|
||||
);
|
||||
}
|
||||
text.value = text1;
|
||||
if (played) {
|
||||
text.value = text2;
|
||||
}
|
||||
await sleep(250);
|
||||
|
||||
await doByInterval(
|
||||
Array(4).fill(() => toshow.push(ids.shift()!)),
|
||||
150
|
||||
);
|
||||
|
||||
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) => {});
|
||||
});
|
||||
if (!showed.value) await sleep(1200);
|
||||
else await sleep(600);
|
||||
|
||||
buttons.forEach(
|
||||
v =>
|
||||
(v.style.transition =
|
||||
'transform 0.3s ease-out, color 0.3s ease-out')
|
||||
);
|
||||
}
|
||||
|
||||
onMounted(async () => {
|
||||
cursor = document.getElementById('cursor')!;
|
||||
startdiv = document.getElementById('start-div') as HTMLDivElement;
|
||||
main = document.getElementById('start-main') as HTMLDivElement;
|
||||
mainDiv = document.getElementById('start-main') as HTMLDivElement;
|
||||
start = document.getElementById('start') as HTMLDivElement;
|
||||
background = document.getElementById('background') as HTMLImageElement;
|
||||
|
||||
const loading = Mota.require('var', 'loading');
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
|
||||
loading.once('coreInit', async () => {
|
||||
window.addEventListener('resize', resize);
|
||||
resize();
|
||||
|
||||
soundChecked.value = mainSetting.getValue('audio.bgmEnabled', true);
|
||||
mainBgm.changeTo('title.mp3');
|
||||
soundChecked.value = mainSetting.getValue('audio.bgmEnabled', true);
|
||||
mainBgm.changeTo(main.startBgm);
|
||||
|
||||
nextFrame(() => {
|
||||
start.style.opacity = '1';
|
||||
if (played) {
|
||||
text.value = text2;
|
||||
hard.splice(1, 0, '挑战');
|
||||
}
|
||||
setButtonAnimate().then(() => (showed.value = true));
|
||||
await sleep(1000);
|
||||
showCursor();
|
||||
await sleep(1200);
|
||||
});
|
||||
|
||||
CustomToolbar.closeAll();
|
||||
@ -423,59 +310,68 @@ onUnmounted(() => {
|
||||
5px 5px 5px rgba(0, 0, 0, 0.4);
|
||||
filter: brightness(1.8);
|
||||
user-select: none;
|
||||
animation: opacity 3s ease-out 0.5s 1 normal forwards;
|
||||
color: transparent;
|
||||
}
|
||||
|
||||
#buttons-container {
|
||||
display: flex;
|
||||
width: 100%;
|
||||
flex-direction: column;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
bottom: 10%;
|
||||
position: absolute;
|
||||
height: auto;
|
||||
font-size: 120%;
|
||||
}
|
||||
|
||||
#buttons {
|
||||
border: 2px solid white;
|
||||
border-radius: 10px;
|
||||
padding: 1% 0;
|
||||
backdrop-filter: blur(5px);
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgba(76, 73, 255, 0.6),
|
||||
rgba(106, 40, 145, 0.6)
|
||||
);
|
||||
display: flex;
|
||||
flex-direction: column-reverse;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
position: absolute;
|
||||
left: 18%;
|
||||
bottom: 10%;
|
||||
filter: brightness(120%) contrast(110%);
|
||||
z-index: 1;
|
||||
|
||||
#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;
|
||||
}
|
||||
flex-direction: column;
|
||||
transition: height 0.2s ease;
|
||||
width: 20%;
|
||||
|
||||
.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;
|
||||
font-weight: bold;
|
||||
color: transparent;
|
||||
transition: all 0.2s linear;
|
||||
box-shadow: 0px 0px 8px #0008;
|
||||
border-radius: 6px;
|
||||
padding: 1% 5%;
|
||||
width: 70%;
|
||||
text-wrap: nowrap;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.start-button[index='1'][length='4'] {
|
||||
left: 7.5%;
|
||||
.start-button:hover {
|
||||
transform: scale(120%);
|
||||
}
|
||||
|
||||
.start-button[index='2'][length='4'] {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.start-button[index='3'][length='4'] {
|
||||
left: 22.5%;
|
||||
}
|
||||
|
||||
.start-button[index='1'][length='2'] {
|
||||
left: 15%;
|
||||
}
|
||||
|
||||
.start-button[index='2'][length='2'] {
|
||||
left: 30%;
|
||||
}
|
||||
|
||||
.start-button[index='3'][length='2'] {
|
||||
left: 45%;
|
||||
.hard-button {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgb(255, 255, 255),
|
||||
rgb(255, 0, 0)
|
||||
);
|
||||
}
|
||||
|
||||
#start-game {
|
||||
@ -484,7 +380,7 @@ onUnmounted(() => {
|
||||
rgb(255, 255, 255),
|
||||
rgb(0, 255, 255)
|
||||
);
|
||||
margin-bottom: 8%;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
#load-game {
|
||||
@ -493,7 +389,7 @@ onUnmounted(() => {
|
||||
rgb(255, 255, 255),
|
||||
rgb(0, 255, 55)
|
||||
);
|
||||
margin-bottom: 8%;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
#replay {
|
||||
@ -502,34 +398,7 @@ onUnmounted(() => {
|
||||
rgb(255, 255, 255),
|
||||
rgb(255, 251, 0)
|
||||
);
|
||||
margin-bottom: 8%;
|
||||
}
|
||||
|
||||
#achievement {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgb(255, 255, 255),
|
||||
rgb(0, 208, 255)
|
||||
);
|
||||
margin-bottom: 8%;
|
||||
}
|
||||
|
||||
#easy {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgb(255, 255, 255),
|
||||
rgb(87, 255, 72)
|
||||
);
|
||||
margin-bottom: 16%;
|
||||
}
|
||||
|
||||
#hard-hard {
|
||||
background-image: linear-gradient(
|
||||
to bottom,
|
||||
rgb(255, 255, 255),
|
||||
rgb(255, 0, 0)
|
||||
);
|
||||
margin-bottom: 16%;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
|
||||
#back {
|
||||
@ -538,7 +407,7 @@ onUnmounted(() => {
|
||||
rgb(255, 255, 255),
|
||||
rgb(132, 132, 132)
|
||||
);
|
||||
margin-bottom: 16%;
|
||||
margin-bottom: 2%;
|
||||
}
|
||||
}
|
||||
|
||||
@ -603,33 +472,6 @@ onUnmounted(() => {
|
||||
transform: scale(115%) translate(7.5%);
|
||||
}
|
||||
|
||||
@keyframes cursor {
|
||||
from {
|
||||
transform: rotateX(0deg) scaleY(0.7);
|
||||
}
|
||||
to {
|
||||
transform: rotateX(360deg) scaleY(0.7);
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes gradient {
|
||||
from {
|
||||
left: -100%;
|
||||
}
|
||||
to {
|
||||
left: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
@keyframes opacity {
|
||||
from {
|
||||
color: #bbb;
|
||||
}
|
||||
to {
|
||||
color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
.start-enter-active {
|
||||
transition: all 1.2s ease-out;
|
||||
}
|
||||
|
||||
Loading…
Reference in New Issue
Block a user