全屏游戏

2025-10-31 04:02:59 +08:00 · 2023-02-22 21:39:44 +08:00 · 2023-02-22 21:39:44 +08:00 · f3938bf1bb
commit f3938bf1bb
parent 2687a0e50b
9 changed files with 175 additions and 91 deletions
--- a/public/libs/control.js
+++ b/public/libs/control.js
@ -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) {
+        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.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;
-        }
-        // });
    }
+
    core.dom.gif.style.width = innerWidth;
    core.dom.gif.style.height = innerHeight;
    core.dom.gif2.style.width = innerWidth;
--- a/public/main.js
+++ b/public/main.js
@ -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,46 +292,30 @@ 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();
-                            }
+                        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) {
-                                    main.core.control.setDisplayScale(-1);
+                                        core.control.setDisplayScale(-1);
                                        if (
-                                        !main.core.isPlaying() &&
-                                        main.core.flags.enableHDCanvas
+                                            !core.isPlaying() &&
+                                            core.flags.enableHDCanvas
                                        ) {
-                                        main.core.domStyle.ratio = Math.max(
+                                            core.domStyle.ratio = Math.max(
                                                window.devicePixelRatio || 1,
-                                            main.core.domStyle.scale
+                                                core.domStyle.scale
                                            );
-                                        main.core.resize();
+                                            core.resize();
                                        }
                                    }
                                });
                            }
+                        }
                    } catch (e) {
                        console.error(e);
                    }
--- a/public/project/plugins.js
+++ b/public/project/plugins.js
@ -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();
+            }
+        };
    }
 };
--- a/src/data/settings.json
+++ b/src/data/settings.json
@ -1,4 +1,8 @@
 {
+    "fullscreen": {
+        "text": "全屏游戏",
+        "desc": ["是否全屏进行游戏"]
+    },
    "transition": {
        "text": "界面动画",
        "desc": [
--- a/src/plugin/settings.ts
+++ b/src/plugin/settings.ts
@ -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 };
 }
--- a/src/plugin/ui/achievement.ts
+++ b/src/plugin/ui/achievement.ts
@ -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;
 }
--- a/src/types/plugin.d.ts
+++ b/src/types/plugin.d.ts
@ -140,6 +140,12 @@ interface PluginUtils {
     * @param value 要判断的值
     */
    has<T>(value: T): value is NonNullable<T>;
+
+    /**
+     * 最大化游戏缩放
+     * @param n 最大缩放再少多少个缩放
+     */
+    maxGameScale(n?: number): void;
 }

 interface PluginUis {
--- a/src/ui/settings.vue
+++ b/src/ui/settings.vue
@ -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;
    }
+    if (!ignore.includes(id)) {
        settings[id].value = !settings[id].value;
+    } else {
+        if (id === 'fullscreen') {
+            triggerFullscreen();
+        }
+    }
 }
 </script>

--- a/src/ui/start.vue
+++ b/src/ui/start.vue
@ -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);
        }