From 22f7ae82ca66445c1b62681889a3b1c124dfc524 Mon Sep 17 00:00:00 2001 From: laihanbin <512412344@qq.com> Date: Fri, 15 Dec 2023 13:48:25 +0800 Subject: [PATCH] =?UTF-8?q?fix:=20=E4=BC=98=E5=8C=96=E5=8D=95=E6=9C=BA?= =?UTF-8?q?=E7=89=88=E7=9A=84=E7=BB=98=E5=88=B6=E6=96=B9=E5=BC=8F?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- packages/Chinese-chess/components.d.ts | 5 -- packages/Chinese-chess/src/assets/style.scss | 1 + packages/Chinese-chess/src/libs/Controller.ts | 81 ++++++++----------- .../Chinese-chess/src/libs/GameInterface.ts | 4 +- .../Chinese-chess/src/pages/OfflineGame.vue | 22 ++--- 5 files changed, 46 insertions(+), 67 deletions(-) diff --git a/packages/Chinese-chess/components.d.ts b/packages/Chinese-chess/components.d.ts index 3c8c4a5..e785c19 100644 --- a/packages/Chinese-chess/components.d.ts +++ b/packages/Chinese-chess/components.d.ts @@ -11,15 +11,10 @@ declare module '@vue/runtime-core' { ChatContainer: typeof import('./src/components/ChatContainer.vue')['default'] ChessMain: typeof import('./src/components/ChessMain/index.vue')['default'] ChessManual: typeof import('./src/components/ChessManual.vue')['default'] - Confirm: typeof import('./src/components/Message/Confirm.vue')['default'] - Controller: typeof import('./src/components/ChessMain/Controller.vue')['default'] GameController: typeof import('./src/components/ChessMain/GameController.vue')['default'] IconSeat: typeof import('./src/components/IconSeat.vue')['default'] Modal: typeof import('./src/components/Message/Modal.vue')['default'] ModeSelector: typeof import('./src/components/ModeSelector.vue')['default'] - RouterLink: typeof import('vue-router')['RouterLink'] - RouterView: typeof import('vue-router')['RouterView'] - Seperator: typeof import('./src/components/ChessMain/Seperator.vue')['default'] Spectator: typeof import('./src/components/ChessMain/Spectator.vue')['default'] StatusWrapper: typeof import('./src/components/ChessMain/StatusWrapper.vue')['default'] } diff --git a/packages/Chinese-chess/src/assets/style.scss b/packages/Chinese-chess/src/assets/style.scss index 241933c..6418802 100644 --- a/packages/Chinese-chess/src/assets/style.scss +++ b/packages/Chinese-chess/src/assets/style.scss @@ -38,6 +38,7 @@ body { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol', 'Noto Color Emoji'; color: var(--black); // background-color: var(--light); + opacity: .1; } :where(.btn) { diff --git a/packages/Chinese-chess/src/libs/Controller.ts b/packages/Chinese-chess/src/libs/Controller.ts index c5d8243..4e0f9a4 100644 --- a/packages/Chinese-chess/src/libs/Controller.ts +++ b/packages/Chinese-chess/src/libs/Controller.ts @@ -244,11 +244,21 @@ export const createController = ({ movePiece(activePiece, { x, y }) // 判断是否将军 if (isGeneralInChess(context.chessPieces, context.currentCamp)) { - console.log('将军') + // console.log('将军') + gameInterface.animations.check.run(() => { + gameInterface.animations.clear() + }) // 判断是否绝杀 if (isGameOver()) { - alert(`绝杀无解${context.currentCamp === Camp.RED ? '红' : '黑'}胜`) - console.log('绝杀无解') + // alert(`绝杀无解${context.currentCamp === Camp.RED ? '红' : '黑'}胜`) + // console.log('绝杀无解') + gameInterface.animations.checkMate.run(() => { + gameInterface.animations[context.currentCamp === Camp.RED ? 'redWin' : 'blackWin'].run(() => { + gameInterface.animations.clear() + }) + }) + context.status = GameStatus.Finished + return false } } @@ -260,71 +270,46 @@ export const createController = ({ const handleClick = (e: MouseEvent): void => { const point = gameInterface.getPointer(e) const currentPiece = getPieceByPoint(point) + + if (context.status !== GameStatus.Playing) { + return + } + // 点击上去的位置有没有棋子 if (context.activePiece) { // 判断一下之前有没有点击过棋子 if (currentPiece && isCurrentExecution(currentPiece.camp)) { // 也就是说点到了同阵营的棋子 // 如果还是原来的棋子就不变 如果点了新棋子那么就给新棋子active - if (currentPiece.coord.x === context.activePiece.coord.x && currentPiece.coord.y === context.activePiece.coord.y) return + if (currentPiece.coord.x === context.activePiece.coord.x && currentPiece.coord.y === context.activePiece.coord.y) { + return + } context.activePiece = currentPiece context.canMoveList = computedCanMove(context.activePiece, context.chessPieces) - return - } - // 是否吃子 因为上面已经判断过进入下一步是自己方 - // 判断是否吃子 移动过成功才可以进行吃子 - if (currentPiece && canEatPiece(context.activePiece, context.chessPieces, point.x, point.y) && move(context.activePiece, point.x, point.y)) { + } else if (currentPiece && canEatPiece(context.activePiece, context.chessPieces, point.x, point.y) && move(context.activePiece, point.x, point.y)) { + // 是否吃子 因为上面已经判断过进入下一步是自己方 + // 判断是否吃子 移动过成功才可以进行吃子 // 那么走吃子的逻辑 context.chessPieces = eatPiece(currentPiece, context.chessPieces) - return - } - // 是否移动到可以移动的地方 - if (context.canMoveList.find(item => item[0] === point.x && item[1] === point.y)) { + } else if (context.canMoveList.find(item => item[0] === point.x && item[1] === point.y)) { + // 是否移动到可以移动的地方 move(context.activePiece, point.x, point.y) + context.canMoveList.length = 0 } } else { // 选中已方棋子 const piece = getPieceByPoint(point) setActive(piece) } - } - - let reqId: number - let lastTime = Date.now() - - function run (): void { - reqId = requestAnimationFrame(run) - context.counter += Math.PI / 180 - - if (context.counter >= 2 * Math.PI) { - context.counter = 0 - } - - const currTime = Date.now() - if (currTime - lastTime > 500 && context.activePiece) { - context.activePiece.setScale(context.activePiece.scale === 1 - ? 0.9 - : 1 - ) - lastTime = currTime - } gameInterface.clearMain() - gameInterface.drawChessPieces(context.chessPieces) - const lastPath = context.movePath.at(-1) - if (lastPath) { - gameInterface.drawCurrentStop(lastPath.path.at(-1)!, context.counter) - gameInterface.drawLastStop(lastPath.path[0]) - gameInterface.drawMovePath(lastPath.path) + if (context.canMoveList.length > 0) { + gameInterface.drawAllowPoints(context.canMoveList.map(item => new Point(item[0], item[1]))) } } - function pause (): void { - cancelAnimationFrame(reqId) - } - function handleInputMouseDown (e: KeyboardEvent): void { const { key } = e const target = e.target as HTMLInputElement @@ -422,7 +407,11 @@ export const createController = ({ return { initGame, destroy, - run, - pause + run: () => { + context.status = GameStatus.Playing + gameInterface.clearMain() + gameInterface.drawChessPieces(context.chessPieces) + } + // pause } } diff --git a/packages/Chinese-chess/src/libs/GameInterface.ts b/packages/Chinese-chess/src/libs/GameInterface.ts index cc7299c..f04736e 100644 --- a/packages/Chinese-chess/src/libs/GameInterface.ts +++ b/packages/Chinese-chess/src/libs/GameInterface.ts @@ -553,8 +553,6 @@ export const createGameInterface = (baseSize = 128): GameInterface => { oInterface.style.width = checkerBoardCanvas.style.width oInterface.style.height = checkerBoardCanvas.style.height - parentNode.appendChild(oInterface) - const pieceFont = new FontFace('PieceFont', 'url(fzlsft.ttf)') const aniFont = new FontFace('STXINGKAI', 'url(STXINGKAI.ttf)') @@ -568,6 +566,8 @@ export const createGameInterface = (baseSize = 128): GameInterface => { ;(document.fonts as any).add(f2) await document.fonts.ready.then() + parentNode.appendChild(oInterface) + animations = createAnimation(topAnimationCanvas.getContext('2d')!, { width, height, diff --git a/packages/Chinese-chess/src/pages/OfflineGame.vue b/packages/Chinese-chess/src/pages/OfflineGame.vue index e391a6f..2509c3e 100644 --- a/packages/Chinese-chess/src/pages/OfflineGame.vue +++ b/packages/Chinese-chess/src/pages/OfflineGame.vue @@ -32,20 +32,14 @@ onMounted(() => { chatListRef.value && chatInputRef.value ) { - const font = new FontFace('PieceFont', 'url(fzlsft.ttf)') - font.load().then(f => { - (document.fonts as any).add(f) - }).then(async () => await document.fonts.ready.then()) - .then(() => { - const ctrl = createController({ - oMain: mainRef.value!, - oManual: manualRef.value!, - oChatList: chatListRef.value!, - oChatInput: chatInputRef.value! - }) - ctrl.initGame() - ctrl.run() - }) + const ctrl = createController({ + oMain: mainRef.value, + oManual: manualRef.value, + oChatList: chatListRef.value, + oChatInput: chatInputRef.value + }) + ctrl.initGame() + ctrl.run() } })