Refactor file paths and import statements for game configuration

src/brick/index.ts

@@ -1,7 +1,7 @@
-import { bricks, gameParam } from "../config"
+import { gameParam } from "../gameConfig"
 import { drawBrick } from "../draw"
 import { BinaryString, BrickLetter, BrickStruct, IBrick } from "../types"
-
+import { bricks } from "./brickConfig"
 
 const getRandomLetter = (): BrickLetter => {
   const letters = Object.keys(bricks) as BrickLetter[]

src/draw/brickStyle.ts

@@ -1,5 +1,5 @@
 import { Brick } from "../brick"
-import { gameParam } from "../config"
+import { gameParam } from "../gameConfig"
 
 export const drawStyle = (
   ctx: CanvasRenderingContext2D,

src/draw/drawBrickPiece.ts

@@ -1,5 +1,5 @@
 import { Brick } from "../brick"
-import { gameParam } from "../config"
+import { gameParam } from "../gameConfig"
 import { drawStyle } from "./brickStyle"
 
 const offsetCanvas = document.createElement("canvas")

src/draw/index.ts

@@ -1,7 +1,7 @@
 import { Brick } from "../brick"
-import { gameParam } from "../config"
-import { drawBrickPiece } from "../draw"
+import { gameParam } from "../gameConfig"
 import { BrickColor } from "../types"
+import { drawBrickPiece } from "./drawBrickPiece"
 
 export const drawBrick = (
   ctx: CanvasRenderingContext2D,

src/game.ts

@@ -1,6 +1,6 @@
 import { Brick } from "./brick"
-import { gameParam } from "./config"
-import { drawBg } from "./draw"
+import { drawBg } from "./draw/index"
+import { gameParam } from "./gameConfig"
 import { eliminate, record } from "./helper"
 import { userActions } from "./inputHandler"
 import Operate from "./operate"

src/gameConfig.ts

@@ -0,0 +1,29 @@
+import { GameParam } from "./types"
+import { $ } from "./utils"
+const container = $("#container") as HTMLDivElement
+const { width, height } = container.getBoundingClientRect()
+export const gameParam: GameParam = {
+  column: 10,
+  row: 20,
+  FPS: 60,
+  speed: 2,
+  keySpeed: 10,
+  score: 0,
+  devicePixelRatio: window.devicePixelRatio,
+  // 给方块计算出整数值宽高，不然小数情况可能会出现方块间的间隙
+  get brickWidth() {
+    return Math.round((width * this.devicePixelRatio) / this.column)
+  },
+  get brickHeight() {
+    return Math.round((height * this.devicePixelRatio) / this.row)
+  },
+  // 以方块的整数值加上行列算出整个画布的宽高
+  get windowWidth() {
+    return this.brickWidth * this.column
+  },
+  get windowHeight() {
+    return this.brickHeight * this.row
+  },
+}
+
+

src/helper.ts

@@ -1,5 +1,5 @@
 import { Brick } from "./brick"
-import { gameParam } from "./config"
+import { gameParam } from "./gameConfig"
 import { BrickColor } from "./types"
 
 /**

src/inputHandler.ts → src/inputHandler/index.ts

@@ -1,5 +1,6 @@
-import { gameParam, control } from "./config"
-import { OperateEvents } from "./types"
+import { gameParam } from "../gameConfig"
+import { OperateEvents } from "../types"
+import { control } from "./inputHandlerConfig"
 
 const isKeyPressed = {
   left: false,

src/inputHandler/inputHandlerConfig.ts

@@ -0,0 +1,13 @@
+export const control = {
+  operate: {
+    left: ["a", "ArrowLeft"],
+    right: ["d", "ArrowRight"],
+    up: ["w", "ArrowUp"],
+    down: ["s", "ArrowDown"],
+    bottom: [" "],
+  },
+  onceKey: ["up", "bottom"],
+  speedUpKey: ["down"],
+  speedUpRate: 2,
+  pause: ["Enter", "p"],
+} as const

src/main.ts

@@ -1,4 +1,4 @@
-import { gameParam } from "./config"
+import { gameParam } from "./gameConfig"
 import Game from "./game"
 import { customRaf } from "./utils"