Merge pull request #30 from libondev/dev

feat: 游戏网格缩放
libondev · Apr 28, 2024 · 007b97d · 007b97d
2 parents 0288b1a + 9d2337d
commit 007b97d
Show file tree

Hide file tree

Showing 4 changed files with 31 additions and 3 deletions.
diff --git a/README.md b/README.md
@@ -25,6 +25,7 @@
 - [x] 容错机制
 - [x] 练习模式
 - [x] 历史最高分
+- [x] 表盘自适应
 - [ ] 游玩热力图
 - [x] 本地缓存
 - [ ] 彩色方块

diff --git a/index.html b/index.html
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="en" class="scrollbar">
+<html lang="en" class="scrollbar antialiased">
 
 <head>
   <meta charset="UTF-8">

diff --git a/src/components/Grid.vue b/src/components/Grid.vue
@@ -17,7 +17,7 @@ function handleChange(e: Event) {
 </script>
 
 <template>
-  <div class="w-max mx-auto border dark:border-gray-600 border-l-0 border-b-0">
+  <div class="game-grid w-max mx-auto border dark:border-gray-600 border-l-0 border-b-0">
     <div v-for="_row, rowIndex of config.grid" :key="_row" class="flex border-inherit border-b">
       <div v-for="_col, colIndex of config.grid" :key="_col" class="border-inherit border-l p-1">
         <GridItem

diff --git a/src/views/game/[level].vue b/src/views/game/[level].vue
@@ -271,7 +271,34 @@ function onBoardKeyDown({ code }: KeyboardEvent) {
   KEY_EVENTS_MAP[code as keyof typeof KEY_EVENTS_MAP]?.()
 }
 
+// 根据当前屏幕大小设置游戏区域的缩放比例
+function setGameGridScale() {
+  // 这个设置只执行一次，重新声明一个 ref 保存 dom 代价有点太大了
+  const elGrid = document.querySelector('.game-grid') as HTMLDivElement
+
+  if (!elGrid) {
+    return
+  }
+
+  const { width } = elGrid.getBoundingClientRect()
+  const GAME_PADDING = 20
+  const MAX_GAME_WIDTH = 410
+
+  // 因为网格的宽高一样，所以只需要计算宽度即可
+  if (width <= MAX_GAME_WIDTH) {
+    return
+  }
+
+  // 计算缩放比例，将网格缩放到最大宽度 - 预设的游戏边距
+  const scale = MAX_GAME_WIDTH / (width - GAME_PADDING)
+
+  elGrid.style.height = `${width * scale}px`
+  elGrid.style.transform = `scale(${scale})`
+  elGrid.style.transformOrigin = `top center`
+}
+
 onMounted(() => {
+  setGameGridScale()
   startGame()
   onRestoreLocalStatus()
 
@@ -298,7 +325,7 @@ onBeforeUnmount(() => {
 </script>
 
 <template>
-  <main class="h-full flex items-center justify-center">
+  <main class="h-full flex items-center justify-center overflow-hidden">
     <div>
       <h2 class="w-full flex items-center justify-center text-xl font-mono">
         {{ gameStatus.previewing ? $t('remember-block-locations', '请记住以下方块位置') : gameStatus.over ? $t('game-over', '游戏结束') : $t('start', '游戏开始') }}<template v-if="countdown">