diff --git a/src/brick/index.ts b/src/brick/index.ts index 47684b7..f254821 100644 --- a/src/brick/index.ts +++ b/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[] diff --git a/src/config.ts b/src/config.ts deleted file mode 100644 index 558a2a6..0000000 --- a/src/config.ts +++ /dev/null @@ -1,91 +0,0 @@ -import { Bricks, 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 - }, -} - -// prettier-ignore -export const bricks:Bricks = { - o: { - color: "#FADADD", - struct: ["11", - "11"], - }, - i: { - color: "#F7E9D4", - struct: ["0000", - "1111", - "0000", - "0000"], - }, - s: { - color: "#C8E6C9", - struct: ["011", - "110", - "000"], - }, - z: { - color: "#B3E5FC", - struct: ["110", - "011", - "000"], - }, - l: { - color: "#FFCC80", - struct: ["001", - "111", - "000"], - }, - j: { - color: "#FFEE58", - struct: ["100", - "111", - "000"], - }, - t: { - color: "#CE93D8", - struct: ["000", - "111", - "010"], - }, - '.':{ - color:'green', - struct:['1'] - } -} - -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 diff --git a/src/draw.ts b/src/draw.ts deleted file mode 100644 index 804dcb7..0000000 --- a/src/draw.ts +++ /dev/null @@ -1,163 +0,0 @@ -import { Brick } from "./brick" -import { gameParam } from "./config" -import { BrickColor } from "./types" - -const offsetCanvas = document.createElement("canvas") -const offsetCtx = offsetCanvas.getContext("2d")! -//最多缓存20个砖块 -offsetCanvas.height = gameParam.brickHeight * 20 -offsetCanvas.width = gameParam.brickWidth -let index = 0 -const cache: Record = {} - -export const drawBrickPiece = ( - ctx: CanvasRenderingContext2D, - { x, y, width, height, color }: Brick -) => { - if (color in cache) { - ctx.drawImage( - offsetCanvas, - 0, - height * cache[color], - width, - height, - x, - y, - width, - height - ) - return - } - - const radius = height / 10/**弧度比例 */ * gameParam.devicePixelRatio // 圆角半径 - const borderWidth = height / 25/**边框比例 */ * gameParam.devicePixelRatio // 边框宽度 - - // 绘制填充图形 - offsetCtx.fillStyle = color - console.log(height,width); - offsetCtx.beginPath() - offsetCtx.moveTo(0 + radius, index * height) - offsetCtx.lineTo(0 + width - radius, index * height) - offsetCtx.arcTo( - 0 + width, - index * height, - 0 + width, - index * height + radius, - radius - ) - offsetCtx.lineTo(0 + width, index * height + height - radius) - offsetCtx.arcTo( - 0 + width, - index * height + height, - 0 + width - radius, - index * height + height, - radius - ) - offsetCtx.lineTo(0 + radius, index * height + height) - offsetCtx.arcTo( - 0, - index * height + height, - 0, - index * height + height - radius, - radius - ) - offsetCtx.lineTo(0, index * height + radius) - offsetCtx.arcTo(0, index * height, 0 + radius, index * height, radius) - offsetCtx.fill() - - // 计算边框的位置 - const borderX = 0 + borderWidth / 2 - const borderY = index * height + borderWidth / 2 - const borderWidthAdjusted = width - borderWidth - const borderHeightAdjusted = height - borderWidth - - // 绘制边框 - offsetCtx.strokeStyle = "#000000" - offsetCtx.lineWidth = borderWidth - offsetCtx.beginPath() - offsetCtx.moveTo(borderX + radius, borderY) - offsetCtx.lineTo(borderX + borderWidthAdjusted - radius, borderY) - offsetCtx.arcTo( - borderX + borderWidthAdjusted, - borderY, - borderX + borderWidthAdjusted, - borderY + radius, - radius - ) - offsetCtx.lineTo( - borderX + borderWidthAdjusted, - borderY + borderHeightAdjusted - radius - ) - offsetCtx.arcTo( - borderX + borderWidthAdjusted, - borderY + borderHeightAdjusted, - borderX + borderWidthAdjusted - radius, - borderY + borderHeightAdjusted, - radius - ) - offsetCtx.lineTo(borderX + radius, borderY + borderHeightAdjusted) - offsetCtx.arcTo( - borderX, - borderY + borderHeightAdjusted, - borderX, - borderY + borderHeightAdjusted - radius, - radius - ) - offsetCtx.lineTo(borderX, borderY + radius) - offsetCtx.arcTo(borderX, borderY, borderX + radius, borderY, radius) - offsetCtx.stroke() - - // 关闭路径 - offsetCtx.closePath() - cache[color] = index++ - ctx.drawImage( - offsetCanvas, - 0, - height * cache[color], - width, - height, - x, - y, - width, - height - ) -} - -export const drawBrick = ( - ctx: CanvasRenderingContext2D, - { x, y, width, height, color, structure }: Brick -) => { - for (let i = 0; i < structure.length; i++) { - for (let j = 0; j < structure[i].length; j++) { - if (structure[i][j] == "0") continue - drawBrickPiece(ctx, { - x: (x + j) * width, - y: (y + i) * height, - width, - height, - color, - } as Brick) - } - } -} - -export const drawBg = function ( - ctx: CanvasRenderingContext2D, - colors: BrickColor[][], - brickWidth: number = gameParam.brickWidth, - brickHeight: number = gameParam.brickHeight -) { - ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height) - for (let i = 0; i < colors.length; i++) { - for (let j = 0; j < colors[i].length; j++) { - if (colors[i][j] === void 0) continue - drawBrickPiece(ctx, { - x: j * brickWidth, - y: i * brickHeight, - width: brickWidth, - height: brickHeight, - color: colors[i][j], - } as Brick) - } - } -} diff --git a/src/draw/brickStyle.ts b/src/draw/brickStyle.ts index 0f3ac64..7995559 100644 --- a/src/draw/brickStyle.ts +++ b/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, diff --git a/src/draw/drawBrickPiece.ts b/src/draw/drawBrickPiece.ts index 995b64a..6f48368 100644 --- a/src/draw/drawBrickPiece.ts +++ b/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") diff --git a/src/draw/index.ts b/src/draw/index.ts index e81547b..33f14d9 100644 --- a/src/draw/index.ts +++ b/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, diff --git a/src/game.ts b/src/game.ts index 2caf881..0499eb5 100644 --- a/src/game.ts +++ b/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" diff --git a/src/gameConfig.ts b/src/gameConfig.ts new file mode 100644 index 0000000..c3b0664 --- /dev/null +++ b/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 + }, +} + + diff --git a/src/helper.ts b/src/helper.ts index 1383b7a..fe910cf 100644 --- a/src/helper.ts +++ b/src/helper.ts @@ -1,5 +1,5 @@ import { Brick } from "./brick" -import { gameParam } from "./config" +import { gameParam } from "./gameConfig" import { BrickColor } from "./types" /** diff --git a/src/inputHandler.ts b/src/inputHandler/index.ts similarity index 95% rename from src/inputHandler.ts rename to src/inputHandler/index.ts index aa7a6cd..98a4c10 100644 --- a/src/inputHandler.ts +++ b/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, diff --git a/src/inputHandler/inputHandlerConfig.ts b/src/inputHandler/inputHandlerConfig.ts new file mode 100644 index 0000000..0979a15 --- /dev/null +++ b/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 diff --git a/src/main.ts b/src/main.ts index d490803..b1d0fde 100644 --- a/src/main.ts +++ b/src/main.ts @@ -1,4 +1,4 @@ -import { gameParam } from "./config" +import { gameParam } from "./gameConfig" import Game from "./game" import { customRaf } from "./utils"