全屏游戏

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) {
+    for (var i = 0; i < core.dom.gameCanvas.length; ++i) {
-            var ctx = core.dom.gameCanvas[i].getContext('2d');
+        core.dom.gameCanvas[i].style.width = innerWidth;
-            core.resizeCanvas(ctx, core._PX_, core._PY_);
+        core.dom.gameCanvas[i].style.height = innerHeight;
-            core.dom.gameCanvas[i].style.width = innerWidth;
+        var ctx = core.dom.gameCanvas[i].getContext('2d');
-            core.dom.gameCanvas[i].style.height = innerHeight;
+        core.resizeCanvas(ctx, core._PX_, core._PY_);
-        }
-    } 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;

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);
+                core.init(coreData, callback);
-                main.core.resize();
+                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) {
+                        if (core) {
-                            var index =
+                            core.plugin.maxGameScale();
-                                main.core.domStyle.availableScale.indexOf(
+                            if (!core.getLocalStorage('fullscreen', false)) {
-                                    core.domStyle.scale
+                                requestAnimationFrame(function () {
-                                );
+                                    var style = getComputedStyle(
-                            main.core.control.setDisplayScale(
+                                        main.dom.gameGroup
-                                main.core.domStyle.availableScale.length -
+                                    );
-                                    1 -
+                                    var height = parseFloat(style.height);
-                                    index
+                                    if (height > window.innerHeight * 0.95) {
-                            );
+                                        core.control.setDisplayScale(-1);
-                            if (
+                                        if (
-                                !main.core.isPlaying() &&
+                                            !core.isPlaying() &&
-                                main.core.flags.enableHDCanvas
+                                            core.flags.enableHDCanvas
-                            ) {
+                                        ) {
-                                main.core.domStyle.ratio = Math.max(
+                                            core.domStyle.ratio = Math.max(
-                                    window.devicePixelRatio || 1,
+                                                window.devicePixelRatio || 1,
-                                    main.core.domStyle.scale
+                                                core.domStyle.scale
-                                );
+                                            );
-                                main.core.resize();
+                                            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();
                                     }
-                                }
+                                });
-                            });
+                            }
                         }
                     } catch (e) {
                         console.error(e);

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();
+            }
+        };
     }
 };

src/data/settings.json

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

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

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

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 {

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;
     }
-    settings[id].value = !settings[id].value;
+    if (!ignore.includes(id)) {
+        settings[id].value = !settings[id].value;
+    } else {
+        if (id === 'fullscreen') {
+            triggerFullscreen();
+        }
+    }
 }
 </script>
 

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