+
得分：
0
+
消除行：
0
+
diff --git a/src/brick/index.ts b/src/brick/index.ts
index a3d35f2..828afbf 100644
--- a/src/brick/index.ts
+++ b/src/brick/index.ts
@@ -1,28 +1,38 @@
-import { gameParam } from "../gameConfig"
import { drawBrick } from "../draw"
-import { BinaryString, BrickLetter, BrickStruct, IBrick } from "../types/brick"
+import { gameParam } from "../gameConfig"
+import {
+ BinaryString,
+ BrickColor,
+ BrickStruct,
+ Bricks,
+ IBrick,
+} from "../types/brick"
import { bricks } from "./brickConfig"
-const getRandomLetter = (): BrickLetter => {
- const letters = Object.keys(bricks) as BrickLetter[]
- return letters[(Math.random() * letters.length) >> 0]
-}
const getY = (structure: BinaryString) => {
const index = structure.findLastIndex((s) => +s !== 0)
if (index === -1) return -structure.length
return -index - 1
}
-
export class Brick implements IBrick {
- readonly letter = getRandomLetter()
- readonly color = bricks[this.letter].color
- readonly width = gameParam.brickWidth
- readonly height = gameParam.brickHeight
- structure = bricks[this.letter].struct
- x = gameParam.column / 2 - 1
- y = getY(this.structure)
+ readonly color: BrickColor
+ readonly width: number
+ readonly height: number
+ public structure: BinaryString
+ public x: number
+ public y: number
isRecycle = false
- constructor(private lastTime: number = performance.now()) {}
+ constructor(
+ public letter: keyof Bricks,
+ public lastTime: number = performance.now()
+ ) {
+ this.color = bricks[this.letter].color
+ this.width = gameParam.brickWidth
+ this.height = gameParam.brickHeight
+ this.structure = bricks[this.letter].struct
+ this.x = gameParam.column / 2 - 1
+ this.y = getY(this.structure)
+ }
draw(ctx: CanvasRenderingContext2D) {
drawBrick(ctx, this)
}
@@ -118,6 +128,9 @@ export class Brick implements IBrick {
}
return binary
}
+ correctLastTime(time: number) {
+ this.lastTime = time
+ }
/**
*
* @param mapBinary 已记录方块的二进制数据
diff --git a/src/game.ts b/src/game.ts
index 2a73eeb..44e6fd3 100644
--- a/src/game.ts
+++ b/src/game.ts
@@ -1,7 +1,7 @@
import CanvasWithMapCtx from "./canvasWithMapCtx"
import { gameParam } from "./gameConfig"
import Renderer from "./renderer"
-import Scorer from "./scorer"
+import { Scorer, scorer } from "./scorer"
import { ICanvasWithMapCtx, IGame, IRenderer } from "./types"
import { customRaf } from "./utils"
@@ -10,9 +10,9 @@ export default class Game implements IGame {
private renderer: IRenderer
private Scorer: Scorer
private startWithEnd: readonly [IGame["startGame"], IGame["cancelGame"]]
- constructor(updateScore?: (score: number) => void) {
+ constructor() {
this.canvasWithMapCtx = new CanvasWithMapCtx()
- this.Scorer = new Scorer(updateScore)
+ this.Scorer = scorer
this.renderer = new Renderer(this.canvasWithMapCtx)
this.startWithEnd = customRaf((time: number = performance.now()) => {
this.renderer.render(time)
diff --git a/src/gameHelper.ts b/src/gameHelper.ts
index 4fb8371..9e7ad65 100644
--- a/src/gameHelper.ts
+++ b/src/gameHelper.ts
@@ -1,9 +1,14 @@
+import { bricks } from "./brick/brickConfig"
import { gameParam } from "./gameConfig"
import { ICanvasWithMapCtx } from "./types"
-import { IBrick } from "./types/brick"
+import { BrickLetter, IBrick } from "./types/brick"
import { SinglePattern } from "./utils"
class GameHelper {
+ getRandomLetter(): BrickLetter {
+ const letters = Object.keys(bricks) as BrickLetter[]
+ return letters[(Math.random() * letters.length) >> 0]
+ }
/**
* @dec 记录方块的落点位置 以及它的颜色
* @returns 是否成功记录 如果失败就是游戏结束
@@ -79,4 +84,4 @@ const SingleGameHelper = SinglePattern(GameHelper)
const gameHelper = new SingleGameHelper()
export { gameHelper }
-export type { GameHelper }
\ No newline at end of file
+export type { GameHelper }
diff --git a/src/renderer.ts b/src/renderer.ts
index 5e8c025..a0e95ad 100644
--- a/src/renderer.ts
+++ b/src/renderer.ts
@@ -3,7 +3,7 @@ import { drawBg } from "./draw/index"
import { GameHelper, gameHelper } from "./gameHelper"
import { userActions } from "./inputHandler"
import Operation from "./operate"
-import Scorer from "./scorer"
+import { Scorer, scorer } from "./scorer"
import { ICanvasWithMapCtx, IRenderer } from "./types"
import { EventEmitter, eventEmitter } from "./ui/eventEmitter"
@@ -17,11 +17,11 @@ export default class Renderer implements IRenderer {
private nextBrick: Brick
constructor(canvasWithMapCtx: ICanvasWithMapCtx) {
this.canvasWithMapCtx = canvasWithMapCtx
- this.scorer = new Scorer()
+ this.scorer = scorer
this.eventEmitter = eventEmitter
this.gameHelper = gameHelper
- this.brick = new Brick()
- this.nextBrick = new Brick()
+ this.brick = new Brick(this.gameHelper.getRandomLetter())
+ this.nextBrick = new Brick(this.gameHelper.getRandomLetter())
this.operation = new Operation(this, this.canvasWithMapCtx, this.brick, {
playGame: this.playGame.bind(this),
pauseGame: this.pauseGame.bind(this),
@@ -85,11 +85,15 @@ export default class Renderer implements IRenderer {
this.canvasWithMapCtx.bg
)
const score = this.gameHelper.computeScore(row)
- this.scorer.bonusPoint(score)
- this.eventEmitter.emit("scoreUpdate", this.scorer.score)
+ this.scorer.scoreIncrease(score)
+ this.scorer.eliminateNumIncrease(row)
+ this.eventEmitter.emit("updateScore", this.scorer.score)
+ this.eventEmitter.emit("updateEliminate", this.scorer.eliminateNum)
drawBg(this.canvasWithMapCtx.bgCtx, this.canvasWithMapCtx.bg)
this.brick = this.nextBrick
- this.nextBrick = new Brick(time)
+ this.nextBrick = new Brick(this.gameHelper.getRandomLetter(), time)
+ this.eventEmitter.emit("updateNextBrick", this.nextBrick)
+ this.brick.correctLastTime(time)
this.operation.takeTurns(this.brick)
}
private cachePauseTime(time: number) {
diff --git a/src/scorer.ts b/src/scorer.ts
index 1f4c48f..af7fc3b 100644
--- a/src/scorer.ts
+++ b/src/scorer.ts
@@ -1,26 +1,27 @@
-export default class Scorer {
- static instance: Scorer
- private cb: ((score: number) => void) | undefined
- constructor(cb?: (score: number) => void) {
- if (Scorer.instance) {
- return Scorer.instance
- }
- if (cb) {
- this.cb = cb
- }
- Scorer.instance = this
- }
+import { SinglePattern } from "./utils"
+
+class Scorer {
private _score = 0
+ private _eliminateNum = 0
get score() {
return this._score
}
- bonusPoint(v: number) {
+ get eliminateNum() {
+ return this._eliminateNum
+ }
+ scoreIncrease(v: number) {
this._score += v
- if (this.cb) {
- this.cb(this._score)
- }
}
- makeZero() {
+ eliminateNumIncrease(v: number) {
+ this._eliminateNum += v
+ }
+ reset() {
this._score = 0
+ this._eliminateNum = 0
}
}
+
+const SingleScorer = SinglePattern(Scorer)
+const scorer = new SingleScorer()
+export { scorer }
+export type { Scorer }
diff --git a/src/types/index.ts b/src/types/index.ts
index a80f7c5..446b546 100644
--- a/src/types/index.ts
+++ b/src/types/index.ts
@@ -52,7 +52,9 @@ export interface IGame extends PlayWithPause {
}
export interface EmitterEvents {
- scoreUpdate?: Function[]
+ updateScore?: Function[]
+ updateEliminate?:Function[]
+ updateNextBrick?: Function[]
gameOver?: Function[]
}
diff --git a/src/ui/index.ts b/src/ui/index.ts
index 19c7e4d..b80f046 100644
--- a/src/ui/index.ts
+++ b/src/ui/index.ts
@@ -1,28 +1,54 @@
+import { Brick } from "../brick"
+import { drawBrick } from "../draw"
import Game from "../game"
+import { gameParam } from "../gameConfig"
+import { Scorer, scorer } from "../scorer"
import { $ } from "../utils"
import { EventEmitter, eventEmitter } from "./eventEmitter"
export default class Ui {
game: Game
- dom: Record
+ dom
eventEmitter: EventEmitter
+ scorer: Scorer
constructor() {
this.game = new Game()
this.eventEmitter = eventEmitter
+ this.scorer = scorer
this.dom = {
brickCanvas: $(".brick")! as HTMLCanvasElement,
bgCanvas: $(".bg")! as HTMLCanvasElement,
+ nextBrickCanvas: $(".next_brick")! as HTMLCanvasElement,
start: $(".start")! as HTMLElement, // Cast the result to HTMLElement
pause: $(".pause")! as HTMLElement,
+ regame: $(".regame")! as HTMLElement,
restart: $(".restart")! as HTMLElement,
score: $(".score>span")! as HTMLElement,
+ eliminate: $(".eliminate>span")! as HTMLElement,
}
+ this.dom.nextBrickCanvas.width = gameParam.brickWidth * 4
+ this.dom.nextBrickCanvas.height = gameParam.brickHeight * 4
this.init()
this.addEvent()
}
init() {
- this.eventEmitter.on("scoreUpdate", (score: number) => {
- this.dom.score.innerText = score + ""
+ this.eventEmitter.clearAllListeners()
+ this.eventEmitter.on("updateScore", () => {
+ this.dom.score.innerText = this.scorer.score + ""
+ })
+ this.eventEmitter.on("updateEliminate", () => {
+ this.dom.eliminate.innerText = this.scorer.eliminateNum + ""
+ })
+ this.eventEmitter.on("updateNextBrick", (brick: Brick) => {
+ //清空画布
+ this.dom.nextBrickCanvas
+ .getContext("2d")!
+ .clearRect(0, 0, this.dom.nextBrickCanvas.width, this.dom.nextBrickCanvas.height)
+ drawBrick(this.dom.nextBrickCanvas.getContext("2d")!, {
+ ...brick,
+ x: 0,
+ y: 0,
+ } as Brick)
})
}
addEvent() {
@@ -40,5 +66,11 @@ export default class Ui {
this.dom.pause.innerText = "继续"
}
})
+ this.dom.regame.addEventListener("click", () => {
+ this.scorer.reset()
+ this.eventEmitter.emit("updateScore", this.scorer.score)
+ this.game.restartGame()
+ this.init()
+ })
}
}
diff --git a/tsconfig.json b/tsconfig.json
index 31cd205..8b4607a 100644
--- a/tsconfig.json
+++ b/tsconfig.json
@@ -3,9 +3,11 @@
"strict": true,
"useDefineForClassFields": true,
"noImplicitAny": true,
+ "target": "ESNext",
"lib": ["esnext", "dom"],
+ "moduleResolution": "node",
"noEmitOnError": true,
"noUnusedLocals": true,
- "noUnusedParameters": true,
+ "noUnusedParameters": true
}
}