全屏游戏

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