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

全屏游戏

Browse Source
This commit is contained in:
unanmed 2023-02-22 21:39:44 +08:00
parent 2687a0e50b
commit f3938bf1bb
9 changed files with 175 additions and 91 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

21
public/libs/control.js
View File

@ -4231,21 +4231,14 @@ control.prototype._resize_gameGroup = function (obj) {
control.prototype._resize_canvas = function (obj) {
var innerWidth = core._PX_ * core.domStyle.scale + 'px',
innerHeight = core._PY_ * core.domStyle.scale + 'px';
if (!core.isPlaying()) {
for (var i = 0; i < core.dom.gameCanvas.length; ++i) {
var ctx = core.dom.gameCanvas[i].getContext('2d');
core.resizeCanvas(ctx, core._PX_, core._PY_);
core.dom.gameCanvas[i].style.width = innerWidth;
core.dom.gameCanvas[i].style.height = innerHeight;
}
} else {
// requestAnimationFrame(function () {
for (var i = 0; i < core.dom.gameCanvas.length; ++i) {
core.dom.gameCanvas[i].style.width = innerWidth;
core.dom.gameCanvas[i].style.height = innerHeight;
}
// });
for (var i = 0; i < core.dom.gameCanvas.length; ++i) {
core.dom.gameCanvas[i].style.width = innerWidth;
core.dom.gameCanvas[i].style.height = innerHeight;
var ctx = core.dom.gameCanvas[i].getContext('2d');
core.resizeCanvas(ctx, core._PX_, core._PY_);
}
core.dom.gif.style.width = innerWidth;
core.dom.gif.style.height = innerHeight;
core.dom.gif2.style.width = innerWidth;

66
public/main.js
View File

@ -221,6 +221,8 @@ main.prototype.init = function (mode, callback) {
var a = {};
var b = {};
new Proxy(a, b);
const aa = `${123}`;
aa;
} catch (e) {
alert('浏览器版本过低，无法游玩本塔！');
return;
@ -279,8 +281,8 @@ main.prototype.init = function (mode, callback) {
].forEach(function (t) {
coreData[t] = main[t];
});
main.core.init(coreData, callback);
main.core.resize();
core.init(coreData, callback);
core.resize();
// 自动放缩最大化
if (core.getLocalStorage('autoScale') == null) {
core.setLocalStorage('autoScale', true);
@ -290,45 +292,29 @@ main.prototype.init = function (mode, callback) {
!core.domStyle.isVertical
) {
try {
if (main.core) {
var index =
main.core.domStyle.availableScale.indexOf(
core.domStyle.scale
);
main.core.control.setDisplayScale(
main.core.domStyle.availableScale.length -
1 -
index
);
if (
!main.core.isPlaying() &&
main.core.flags.enableHDCanvas
) {
main.core.domStyle.ratio = Math.max(
window.devicePixelRatio || 1,
main.core.domStyle.scale
);
main.core.resize();
}
requestAnimationFrame(function () {
var style = getComputedStyle(
main.dom.gameGroup
);
var height = parseFloat(style.height);
if (height > window.innerHeight * 0.95) {
main.core.control.setDisplayScale(-1);
if (
!main.core.isPlaying() &&
main.core.flags.enableHDCanvas
) {
main.core.domStyle.ratio = Math.max(
window.devicePixelRatio || 1,
main.core.domStyle.scale
);
main.core.resize();
if (core) {
core.plugin.maxGameScale();
if (!core.getLocalStorage('fullscreen', false)) {
requestAnimationFrame(function () {
var style = getComputedStyle(
main.dom.gameGroup
);
var height = parseFloat(style.height);
if (height > window.innerHeight * 0.95) {
core.control.setDisplayScale(-1);
if (
!core.isPlaying() &&
core.flags.enableHDCanvas
) {
core.domStyle.ratio = Math.max(
window.devicePixelRatio || 1,
core.domStyle.scale
);
core.resize();
}
}
}
});
});
}
}
} catch (e) {
console.error(e);

16
public/project/plugins.js
View File

@ -4128,5 +4128,21 @@ var plugins_bb40132b_638b_4a9f_b028_d3fe47acc8d1 = {
this.has = function (v) {
return v !== null && v !== void 0;
};
this.maxGameScale = function (n = 0) {
const index = core.domStyle.availableScale.indexOf(
core.domStyle.scale
);
core.control.setDisplayScale(
core.domStyle.availableScale.length - 1 - index - n
);
if (!core.isPlaying() && core.flags.enableHDCanvas) {
core.domStyle.ratio = Math.max(
window.devicePixelRatio || 1,
core.domStyle.scale
);
core.resize();
}
};
}
};

4
src/data/settings.json
View File

@ -1,4 +1,8 @@
{
"fullscreen": {
"text": "全屏游戏",
"desc": ["是否全屏进行游戏"]
},
"transition": {
"text": "界面动画",
"desc": [

56
src/plugin/settings.ts
View File

@ -1,50 +1,35 @@
import { ref, watch } from 'vue';
/**
* 打开和关闭ui时是否展示动画
*/
/** 打开和关闭ui时是否展示动画 */
export const transition = ref(false);
/**
* 道具详细信息
*/
/** 道具详细信息 */
export const itemDetail = ref(true);
/**
* 自动切换技能
*/
/** 自动切换技能 */
export const autoSkill = ref(true);
/**
* 自动放缩
*/
/** 自动放缩 */
export const autoScale = ref(true);
/**
* 是否在地图上展示范围光环
*/
/** 是否在地图上展示范围光环 */
export const showHalo = ref(true);
/**
* 是否展示已学习的技能
*/
/** 是否展示已学习的技能 */
export const showStudied = ref(true);
/**
* 是否使用定点查看功能
*/
/** 是否使用定点查看功能 */
export const useFixed = ref(true);
/**
* 是否使用勇士自动定位功能
*/
/** 是否使用勇士自动定位功能 */
export const autoLocate = ref(true);
/**
* 是否开启抗锯齿
*/
/** 是否开启抗锯齿 */
export const antiAliasing = ref(true);
/** 是否开启全屏 */
export const fullscreen = ref(false);
watch(transition, n => {
core.plugin.transition.value = n;
core.setLocalStorage('transition', n);
@ -106,6 +91,7 @@ function reset() {
showStudied.value = core.getLocalStorage('showStudied', true);
showHalo.value = core.getLocalStorage('showHalo', true);
antiAliasing.value = core.getLocalStorage('antiAliasing', false);
fullscreen.value = !!document.fullscreenElement;
}
function resetFlag() {
@ -118,6 +104,22 @@ function resetFlag() {
autoLocate.value = flags.autoLocate ? true : false;
}
export async function triggerFullscreen() {
if (document.fullscreenElement) {
await document.exitFullscreen();
requestAnimationFrame(() => {
core.maxGameScale(1);
});
fullscreen.value = false;
} else {
await document.body.requestFullscreen();
requestAnimationFrame(() => {
core.maxGameScale();
});
fullscreen.value = true;
}
}
export default function init() {
return { resetSettings: reset, resetFlagSettings: resetFlag };
}

15
src/plugin/ui/achievement.ts
View File

@ -1,8 +1,11 @@
import list from '../../data/achievement.json';
import { has } from '../utils';
type AchievementList = typeof list;
type AchievementType = keyof AchievementList;
type AchievementData = Record<AchievementType, boolean[]>;
export default function init() {
return {};
}
@ -10,5 +13,15 @@ export default function init() {
export function completeAchievement(type: AchievementType, index: number) {}
export function hasCompletedAchievement(type: AchievementType, index: number) {
return true;
let data = core.getLocalStorage<AchievementData>('achievement');
if (!has(data)) {
const d = {
normal: [],
challenge: [],
explore: []
};
data = d;
core.setLocalStorage('achievement', d);
}
return data[type][index] ?? false;
}

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

@ -140,6 +140,12 @@ interface PluginUtils {
* @param value 要判断的值
*/
has<T>(value: T): value is NonNullable<T>;
/**
* 最大化游戏缩放
* @param n 最大缩放再少多少个缩放
*/
maxGameScale(n?: number): void;
}
interface PluginUis {

25
src/ui/settings.vue
View File

@ -2,6 +2,14 @@
<Column :width="60" :height="60" @close="exit"
><template #left
><div id="setting-list">
<span
class="selectable"
:selected="selected === 'fullscreen'"
@click="click('fullscreen')"
>全屏游戏:&nbsp;&nbsp;&nbsp;{{
fullscreen ? 'ON' : 'OFF'
}}</span
>
<span
class="selectable"
:selected="selected === 'transition'"
@ -92,7 +100,9 @@ import {
showHalo,
useFixed,
autoLocate,
antiAliasing
antiAliasing,
fullscreen,
triggerFullscreen
} from '../plugin/settings';
import settingInfo from '../data/settings.json';
import { has, splitText } from '../plugin/utils';
@ -117,9 +127,12 @@ const settings: Record<keyof Settings, Ref<boolean>> = {
showStudied,
useFixed,
autoLocate,
antiAliasing
antiAliasing,
fullscreen
};
const ignore: (keyof Settings)[] = ['fullscreen'];
function exit() {
core.plugin.settingsOpened.value = false;
}
@ -129,7 +142,13 @@ function click(id: keyof Settings) {
selected.value = id;
return;
}
settings[id].value = !settings[id].value;
if (!ignore.includes(id)) {
settings[id].value = !settings[id].value;
} else {
if (id === 'fullscreen') {
triggerFullscreen();
}
}
}
</script>

57
src/ui/start.vue
View File

@ -14,6 +14,16 @@
<sound-outlined />
<span v-if="!soundChecked" id="sound-del"></span>
</div>
<fullscreen-outlined
v-if="!fullscreen"
class="button-text setting-buttons2"
@click="setFullscreen"
/>
<fullscreen-exit-outlined
v-else
class="button-text setting-buttons2"
@click="setFullscreen"
/>
</div>
<div id="background-gradient"></div>
<div id="buttons">
@ -47,12 +57,18 @@
<script lang="ts" setup>
import { nextTick, onMounted, onUnmounted, reactive, ref } from 'vue';
import { RightOutlined, SoundOutlined } from '@ant-design/icons-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 { KeyCode } from '../plugin/keyCodes';
import { achievementOpened } from '../plugin/uiController';
import { triggerFullscreen } from '../plugin/settings';
let startdiv: HTMLDivElement;
let start: HTMLDivElement;
@ -64,6 +80,7 @@ let buttons: HTMLSpanElement[] = [];
let played: boolean;
const soundChecked = ref(false);
const fullscreen = ref(!!document.fullscreenElement);
const showed = ref(false);
@ -102,7 +119,9 @@ function setCursor(ele: HTMLSpanElement, i: number) {
parseFloat(style.height) * (i + 0.5) -
parseFloat(style.marginBottom) * (1 - i)
}px`;
cursor.style.left = `${parseFloat(style.left) - 30}px`;
cursor.style.left = `${
parseFloat(style.left) - 20 * core.domStyle.scale
}px`;
}
async function clickStartButton(id: string) {
@ -180,6 +199,15 @@ function bgm() {
soundChecked.value = !soundChecked.value;
}
async function setFullscreen() {
const index = toshow.length - toshow.indexOf(selected.value) - 1;
await triggerFullscreen();
requestAnimationFrame(() => {
fullscreen.value = !!document.fullscreenElement;
setCursor(buttons[index], index);
});
}
/**
* 初始 -> 难度
*/
@ -209,7 +237,11 @@ async function showHard() {
setCursor(buttons[0], 0);
});
await sleep(600);
buttons.forEach(v => (v.style.transition = 'all 0.3s ease-out'));
buttons.forEach(
v =>
(v.style.transition =
'transform 0.3s ease-out, color 0.3s ease-out')
);
}
/**
@ -249,7 +281,11 @@ async function setButtonAnimate() {
if (!showed.value) await sleep(1200);
else await sleep(600);
buttons.forEach(v => (v.style.transition = 'all 0.3s ease-out'));
buttons.forEach(
v =>
(v.style.transition =
'transform 0.3s ease-out, color 0.3s ease-out')
);
}
onMounted(async () => {
@ -261,13 +297,13 @@ onMounted(async () => {
background = document.getElementById('background') as HTMLImageElement;
core.registerResize('start', resize);
document.addEventListener('keydown', keydown);
document.addEventListener('keyup', keyup);
resize();
soundChecked.value = core.musicStatus.bgmStatus;
await sleep(50);
document.addEventListener('keydown', keydown);
document.addEventListener('keyup', keyup);
start.style.opacity = '1';
if (played) {
text.value = text2;
@ -489,6 +525,7 @@ onUnmounted(() => {
#settings {
position: absolute;
display: flex;
align-items: center;
flex-direction: row-reverse;
right: 5%;
bottom: 10%;
@ -502,6 +539,14 @@ onUnmounted(() => {
cursor: pointer;
}
.setting-buttons2 {
margin-left: 40%;
}
#sound {
position: relative;
}
#sound[checked='false'] {
color: rgb(255, 43, 43);
}