Skip to content

Commit

Permalink
Refactor import statements for improved code organization and readabi…
Browse files Browse the repository at this point in the history
…lity
  • Loading branch information
jinhuid committed Jun 2, 2024
1 parent 2a9c933 commit 7f3fd24
Show file tree
Hide file tree
Showing 19 changed files with 264 additions and 105 deletions.
53 changes: 51 additions & 2 deletions css/style.css
Original file line number Diff line number Diff line change
Expand Up @@ -8,17 +8,66 @@
left: 0;
height: 100%;
width: 100%;
border-radius: 10px;
}
.bg {
z-index: -1;
background-color: rgb(226, 233, 175);
}

#container {
.game {
position: relative;
height: 80vh;
background-size: 100% 100%;
aspect-ratio: 9 / 18;
z-index: 99;
transform: scale(0.9);
border-radius: 10px;
border: 1px solid black;
}
.container{
position: relative;
margin: auto;
height: min-content;
width: 400px;
background-color: rgb(158,173,134);
/* z-index: ; */
}
button,.score{
padding: 8px 16px;
color: white;
border: none;
border-radius: 4px;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
cursor: pointer;
transition: background-color 0.3s;
}
.start{
position: absolute;
top: 50%;
left: 50%;
height: 50px;
width: 100px;
background-color: #328855;
transform: translate(-50%, -50%);
z-index: 99;
}
.start:hover{
background-color: #64c88a;
}
.pause{
display: none;
position: absolute;
background-color: brown;
top: 50%;
right: 0;
}
.score{
position: absolute;
background-color: brown;
top: 20%;
right: 0;
}
.restart{
display: none;
}

13 changes: 9 additions & 4 deletions index.html
Original file line number Diff line number Diff line change
Expand Up @@ -8,10 +8,15 @@
<script type="module" src="./src/main.ts"></script>
</head>
<body>
<div class="score">0</div>
<div id="container">
<canvas class="canvas brick"></canvas>
<canvas class="canvas bg"></canvas>
<div class="container">
<div class="score">得分:<br><span>0</span></div>
<button class="pause">暂停</button>
<div class="game">
<button class="start">开始</button>
<button class="restart">重新开始</button>
<canvas class="brick canvas"></canvas>
<canvas class="bg canvas"></canvas>
</div>
</div>
</body>
</html>
2 changes: 1 addition & 1 deletion src/brick/brickConfig.ts
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
import { Bricks } from "../types";
import { Bricks } from "../types/brick";

// prettier-ignore
export const bricks:Bricks = {
Expand Down
2 changes: 1 addition & 1 deletion src/brick/index.ts
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
import { gameParam } from "../gameConfig"
import { drawBrick } from "../draw"
import { BinaryString, BrickLetter, BrickStruct, IBrick } from "../types"
import { BinaryString, BrickLetter, BrickStruct, IBrick } from "../types/brick"
import { bricks } from "./brickConfig"

const getRandomLetter = (): BrickLetter => {
Expand Down
3 changes: 2 additions & 1 deletion src/canvasWithMapCtx.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { gameParam } from "./gameConfig"
import { BrickColor, ICanvasWithMapCtx } from "./types"
import { ICanvasWithMapCtx } from "./types"
import { BrickColor } from "./types/brick"
import { $ } from "./utils"

const canvas = $(".canvas.brick") as HTMLCanvasElement
Expand Down
2 changes: 1 addition & 1 deletion src/draw/brickStyle.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { gameParam } from "../gameConfig"
import { IBrick } from "../types"
import { IBrick } from "../types/brick"

export const drawStyle = (
ctx: CanvasRenderingContext2D,
Expand Down
2 changes: 1 addition & 1 deletion src/draw/drawBrickPiece.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { gameParam } from "../gameConfig"
import { IBrick } from "../types"
import { IBrick } from "../types/brick"
import { drawStyle } from "./brickStyle"

const offsetCanvas = document.createElement("canvas")
Expand Down
2 changes: 1 addition & 1 deletion src/draw/index.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,5 @@
import { gameParam } from "../gameConfig"
import { BrickColor, IBrick } from "../types"
import { BrickColor, IBrick } from "../types/brick"
import { drawBrickPiece } from "./drawBrickPiece"

export const drawBrick = (
Expand Down
6 changes: 3 additions & 3 deletions src/gameConfig.ts
Original file line number Diff line number Diff line change
@@ -1,13 +1,13 @@
import { GameParam } from "./types"
import { $ } from "./utils"
const container = $("#container") as HTMLDivElement
const container = $(".game") as HTMLDivElement
const { width, height } = container.getBoundingClientRect()
export const gameParam: GameParam = {
column: 10,
row: 20,
FPS: 165,
FPS: null,
speed: 2,
keySpeed: 8,
keySpeed: 10,
score: 0,
devicePixelRatio: window.devicePixelRatio,
// 给方块计算出整数值宽高,不然小数情况可能会出现方块间的间隙
Expand Down
3 changes: 2 additions & 1 deletion src/gameHelper.ts
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { gameParam } from "./gameConfig"
import { IBrick, ICanvasWithMapCtx } from "./types"
import { ICanvasWithMapCtx } from "./types"
import { IBrick } from "./types/brick"
import { SinglePattern } from "./utils"

class GameHelper {
Expand Down
10 changes: 3 additions & 7 deletions src/main.ts
Original file line number Diff line number Diff line change
@@ -1,8 +1,4 @@
import Game from "./game"
import { $ } from "./utils"
import Ui from "./ui";

const game = new Game((score) => {
$(".score")!.textContent = score + ""
})
game.startGame()
console.log(game)

new Ui()
2 changes: 1 addition & 1 deletion src/operate.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,10 @@
import {
IBrick,
ICanvasWithMapCtx,
IRenderer,
OperateEvents,
PlayWithPause,
} from "./types"
import { IBrick } from "./types/brick"

export default class Operation implements OperateEvents {
constructor(
Expand Down
16 changes: 10 additions & 6 deletions src/renderer.ts
Original file line number Diff line number Diff line change
Expand Up @@ -5,20 +5,23 @@ import { userActions } from "./inputHandler"
import Operation from "./operate"
import Scorer from "./scorer"
import { ICanvasWithMapCtx, IRenderer } from "./types"
import { EventEmitter, eventEmitter } from "./ui/eventEmitter"

export default class Renderer implements IRenderer {
private canvasWithMapCtx: ICanvasWithMapCtx
private operation: Operation
private scorer: Scorer
private eventEmitter: EventEmitter
private gameHelper: GameHelper
private brick: Brick
private newBrick: Brick
private nextBrick: Brick
constructor(canvasWithMapCtx: ICanvasWithMapCtx) {
this.canvasWithMapCtx = canvasWithMapCtx
this.scorer = new Scorer()
this.eventEmitter = eventEmitter
this.gameHelper = gameHelper
this.brick = new Brick()
this.newBrick = new Brick()
this.nextBrick = new Brick()
this.operation = new Operation(this, this.canvasWithMapCtx, this.brick, {
playGame: this.playGame.bind(this),
pauseGame: this.pauseGame.bind(this),
Expand Down Expand Up @@ -68,12 +71,12 @@ export default class Renderer implements IRenderer {
}
}
private newNextOne(time: number) {
const isSuccess = !this.gameHelper.record(
const isSuccess = this.gameHelper.record(
this.canvasWithMapCtx.mapBinary,
this.canvasWithMapCtx.bg,
this.brick
)
if (isSuccess) {
if (!isSuccess) {
this._over = true
return
}
Expand All @@ -83,9 +86,10 @@ export default class Renderer implements IRenderer {
)
const score = this.gameHelper.computeScore(row)
this.scorer.bonusPoint(score)
this.eventEmitter.emit("scoreUpdate", this.scorer.score)
drawBg(this.canvasWithMapCtx.bgCtx, this.canvasWithMapCtx.bg)
this.brick = this.newBrick
this.newBrick = new Brick(time)
this.brick = this.nextBrick
this.nextBrick = new Brick(time)
this.operation.takeTurns(this.brick)
}
private cachePauseTime(time: number) {
Expand Down
74 changes: 74 additions & 0 deletions src/types/brick.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,74 @@
import { Binary, isBinaryString } from "./helper";


export type BinaryString<T extends BrickStruct> = {
[K in keyof T]: isBinaryString<T[K]>;
};
// type a = BinaryString<("00" | "10" | "01" | "11")[]>

export type Struct<
T extends number,
R extends any[] = []
> = R["length"] extends T ? R : Struct<T, [...R, Binary<T>]>;

export type BrickLetter = keyof Bricks;

export type BrickColor = Bricks[BrickLetter]["color"];

export type BrickStruct = Bricks[BrickLetter]["struct"];



export type Bricks = {
[key: string]: {
color: string;
struct: Readonly<Struct<1> | Struct<2> | Struct<3> | Struct<4>>;
};
o: {
color: "#FADADD";
struct: Readonly<Struct<2>>;
};
i: {
color: "#F7E9D4";
struct: Readonly<Struct<4>>;
};
s: {
color: "#C8E6C9";
struct: Readonly<Struct<3>>;
};
z: {
color: "#B3E5FC";
struct: Readonly<Struct<3>>;
};
l: {
color: "#FFCC80";
struct: Readonly<Struct<3>>;
};
j: {
color: "#FFEE58";
struct: Readonly<Struct<3>>;
};
t: {
color: "#CE93D8";
struct: Readonly<Struct<3>>;
};
};

export interface IBrick {
letter: BrickLetter;
x: number;
y: number;
width: number;
height: number;
color: BrickColor;
structure: BinaryString<BrickStruct>;
isRecycle: boolean;
draw(ctx: CanvasRenderingContext2D): void;
update(time: number, mapBinary: number[]): boolean;
getBinary(): number[];
left(mapBinary: number[]): void;
right(mapBinary: number[]): void;
downOne(mapBinary: number[]): boolean;
downBottom(mapBinary: number[]): boolean;
rotate(mapBinary: number[]): void;
}
4 changes: 4 additions & 0 deletions src/types/helper.ts
Original file line number Diff line number Diff line change
Expand Up @@ -11,3 +11,7 @@ export type Binary<
R extends string = "",
Arr extends string[] = []
> = Arr["length"] extends T ? R : Binary<T, `${R}${"0" | "1"}`, [...Arr, ""]>

export type OptionalKeys<T> = {
[K in keyof T]-?: {} extends Pick<T, K> ? K : never
}[keyof T]
Loading

0 comments on commit 7f3fd24

Please sign in to comment.